码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript-Tool-lhgDialog：基础示例-源代码

时间：2020-07-16 22:02:15      阅读：76      评论：0      收藏：0      [点我收藏+]

标签：责任   conf   dtd   skin   comm   alert   窗口组件   ESS   page   

ylbtech-JavaScript-Tool-lhgDialog：基础示例-源代码

 

1.返回顶部
1、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基础示例 - lhgDialog窗口组件 lhgdialog弹出窗口</title>
    <meta name="keywords" content="lhgdialog,dialog,弹出窗口,js窗口,js弹出窗口,js库,对话框,alert,提示,警告,确认,提问,ajax,tip,confirm,open,prompt,lhgcore,javascript,jquery,window,clientside,control,open source,LGPL,dhtml,html,xhtml,plugins" />
    <meta name="description" content="lhgdialog是一功能强大的简单迷你并且高效的弹出窗口插件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+." />
    <link href="/css/common.css" type="text/css" rel="stylesheet" />
    <link href="/css/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="/js/prettify.js"></script>
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script>
        // skin demo
        (function () {
            var _skin, _lhgcore;
            var _search = window.location.search;
            if (_search) {
                _skin = _search.split(‘demoSkin=‘)[1];
            };

            document.write(‘<scr‘ + ‘ipt src="/js/lhgdialog.min.js?skin=‘ + (_skin || ‘default‘) + ‘"></sc‘ + ‘ript>‘);
            window._isDemoSkin = !!_skin;
        })();
    </script>
    <script type="text/javascript" src="/js/demo.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="hd_logo"><a href="/index.html">lhgDialog弹窗提示窗口组件</a></div>
            <div class="hd_nav">
                <a href="/index.html">首页</a> | <a href="/api/">API文档</a> | 基础示例 | <a href="/value/">传值示例</a> | <a href="/animate/">动画示例</a> | <a href="/frameset/">框架示例</a>
            </div>
        </div>
        <div class="line">&nbsp;</div>
        <div class="cbody">
            <h2>皮肤切换演示</h2>
            <p><button class="runcode" id="demo_skin">运行»</button></p>
            <p>
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <ins class="adsbygoogle"
                     style="display:inline-block;width:728px;height:90px"
                     data-ad-client="ca-pub-9761122628191004"
                     data-ad-slot="2248956816"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </p>
            <h2>配置参数演示</h2>
            <p></p>
            <ol>
                <li>
                    <h3>标题 [title]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_title">
$.dialog({title:‘我是新标题‘});
</pre>
                    <p><button class="runcode" name="demo_title">运行»</button></p>
                </li>
                <li>
                    <h3>内容 [content]</h3>
                    <p>1. 传入字符串</p>
<pre class="prettyprint" id="demo_content">
$.dialog({content: ‘我支持HTML‘});
</pre>
                    <p><button class="runcode" name="demo_content">运行»</button></p>
                    <p>2. 使用iframe方式加载单独的内容页</p>
<pre class="prettyprint" id="demo_content_frm">
$.dialog({content: ‘url:content/content.html‘});
</pre>
                    <p><button class="runcode" name="demo_content_frm">运行»</button></p>
                </li>
                <li>
                    <h3>确定取消按钮 [ok & cancel]</h3>
                    <p>备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭</p>
<pre class="prettyprint" id="demo_yes_no">
$.dialog({
    content: ‘如果定义了回调函数才会出现相应的按钮‘,
    ok: function(){
        this.title(‘3秒后自动关闭‘).time(3);
        return false;
    },
    cancelVal: ‘关闭‘,
    cancel: true /*为true等价于function(){}*/
});
</pre>
                    <p><button class="runcode" name="demo_yes_no">运行»</button></p>
                </li>
                <li>
                    <h3>最大化最小化按钮 [max & min]</h3>
                    <p>备注：此参数是用来显示或隐藏最大化最小化按钮</p>
<pre class="prettyprint" id="demo_max_min">
$.dialog({
    content: ‘不显示最大化和最小化按钮‘,
    max: false,
    min: false
});
</pre>
                    <p><button class="runcode" name="demo_max_min">运行»</button></p>
                </li>
                <li>
                    <h3>自定义按钮 [button]</h3>
                    <p>备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭；button参数对应的扩展方法名称也是"button"</p>
<pre class="prettyprint" id="demo_button">
$.dialog({
    id: ‘testID‘,
    content: ‘hello world!‘,
    button: [
        {
            name: ‘同意‘,
            callback: function () {
                this.content(‘你同意了‘).time(2);
                return false;
            },
            focus: true
        },
        {
            name: ‘不同意‘,
            callback: function () {
                alert(‘你不同意‘)
            }
        },
        {
            name: ‘无效按钮‘,
            disabled: true
        },
        {
            name: ‘关闭我‘
        }
    ]
});
</pre>
                    <p><button class="runcode" name="demo_button">运行»</button></p>
                </li>
                <li>
                    <h3>设置大小 [width & height]</h3>
                    <p>备注：尺寸可以带单位或使用百分比%</p>
<pre class="prettyprint" id="demo_size">
$.dialog({
    width: ‘700px‘,
    height: 500,
    content: ‘url:http://www.baidu.com‘
});
</pre>
                    <p><button class="runcode" name="demo_size">运行»</button></p>
                </li>
                <li>
                    <h3>静止定位 [fixed]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_fixed">
$.dialog({
    fixed: true,
    content: ‘请拖动滚动条查看‘
});
</pre>
                    <p><button class="runcode" name="demo_fixed">运行»</button></p>
                </li>
                <li>
                    <h3>自定义坐标 [left & top]</h3>
                    <p>备注：尺寸可以带单位或使用百分比%</p>
<pre class="prettyprint" id="demo_position">
$.dialog({
    left: 100,
    top: ‘60%‘,
    content: ‘我改变坐标了‘
});
</pre>
                    <p><button class="runcode" name="demo_position">运行»</button></p>
                    <p>创建一个右下角浮动的消息窗口</p>
<pre class="prettyprint" id="demo_position2">
$.dialog({
    id: ‘msg‘,
    title: ‘公告‘,
    content: ‘欢迎使用lhgdialog窗口!‘,
    width: 200,
    height: 100,
    left: ‘100%‘,
    top: ‘100%‘,
    fixed: true,
    drag: false,
    resize: false
});
</pre>
                    <p><button class="runcode" name="demo_position2">运行»</button></p>
                <li>
                    <h3>锁屏 [lock & background & opacity]</h3>
                    <p>备注：background & opacity是一个会影响到全局的配置，后续出现的对话框再设置这2个参数将不再起作用</p>
<pre class="prettyprint" id="demo_lock">
$.dialog({
    lock: true,
    background: ‘#000‘, /* 背景色 */
    opacity: 0.5,    /* 透明度 */
    content: ‘中断用户在对话框以外的交互，展示重要操作与消息‘,
    icon: ‘error.gif‘,
    ok: function () {
        /* 这里要注意多层锁屏一定要加parent参数 */
        $.dialog({content: ‘再来一个锁屏‘, lock: true, parent:this});
        return false;
    },
    cancel: true
});
</pre>
                    <p><button class="runcode" name="demo_lock">运行»</button></p>
                </li>
                <li>
                    <h3>定义消息图标和标题栏图村 [icon & titleIcon]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_icon">
$.dialog({
    icon: ‘success.gif‘,
    titleIcon: ‘lhgcore.gif‘,
    content: ‘我可以定义消息图标哦‘
});
</pre>
                    <p><button class="runcode" name="demo_icon">运行»</button></p>
                </li>
                <li>
                    <h3>内容与边界填充边距 [padding]</h3>
                    <p>备注：注意图片加上width和height，否则出现位置偏移</p>
<pre class="prettyprint" id="demo_padding">
$.dialog({
    id: ‘a15‘,
    title: ‘Android4.0照片‘,
    lock: true,
    content: ‘&lt;img src="/images/android.jpg" width="600" height="404" /&gt;‘,
    padding: 0
});
</pre>
                    <p><button class="runcode" name="demo_padding">运行»</button></p>
                </li>
                <li>
                    <h3>定时关闭的消息 [time]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_time">
$.dialog({
    time: 2,
    content: ‘两秒后关闭‘
});
</pre>
                    <p><button class="runcode" name="demo_time">运行»</button></p>
                </li>
                <li>
                    <h3>不许拖拽 [drag & resize]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_drag">
$.dialog({
    drag: false,
    resize: false,
    content: ‘禁止拖拽‘
});
</pre>
                    <p><button class="runcode" name="demo_drag">运行»</button></p>
                </li>
                <li>
                    <h3>防止重复弹出 [id]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_id">
$.dialog({
    id: ‘testID2‘,
    content: ‘再次点击运行看看‘
});
$.dialog({id: ‘testID2‘}).title(‘3秒后关闭‘).time(3);
</pre>
                    <p><button class="runcode" name="demo_id">运行»</button></p>
                </li>
                <li>
                    <h3>初始化和关闭回调函数 [init & close]</h3>
                    <p>备注：回调函数中this指向窗口实例对象本身</p>
<pre class="prettyprint" id="demo_init_close">
$.dialog({
    content: ‘初始化函数执行前窗口的内容‘,
    left: ‘20%‘,
    init: function(){
        alert(‘正在执行初始化函数，此时你可看到窗口内容没有发生变化‘);
        this.content(‘我是初始化函数执行后的窗口中的内容‘);
    },
    close: function(){
        alert(‘我是窗口关闭前执行的函数，如果返回false将阻止窗口关闭‘);
    }
});
</pre>
                    <p><button class="runcode" name="demo_init_close">运行»</button></p>
                </li>
                <li>
                    <h3>父窗口对象 [parent]</h3>
                    <p>备注：此参数只用在打开多层窗口都使用遮罩层时才会用到此参数，<b style="color:#f00">注意多层窗口锁屏时一定要加此参数</b></p>
<pre class="prettyprint" id="demo_parent">
$.dialog({
    id: ‘LHG1976D‘,
    /* ifrst.html 和 second.html 中的代码请自行查看 */
    content: ‘url:content/first.html‘,
    lock:true
});
</pre>
                    <p><button class="runcode" name="demo_parent">运行»</button></p>
                </li>
            </ol>
            <h2>扩展方法演示</h2>
            <p>备注：扩展方法支持链式操作</p>
            <ol>
                <li>
                    <h3>直接引用返回 [content() & title()]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_1">
var api = $.dialog({
    title: ‘我是对话框‘,
    content: ‘我是初始化的内容‘
});
api.content(‘对话框内容被扩展方法改变了‘).title(‘提示‘);
</pre>
                    <p><button class="runcode" name="demo_api_1">运行»</button></p>
                </li>
                <li>
                    <h3>刷新跳转页面 [reload()]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_2">
$.dialog({
    content: ‘点确定按钮后将刷新窗口调用页面‘,
    ok: function(){
        this.reload();
    }
});
</pre>
                    <p><button class="runcode" name="demo_api_2">运行»</button></p>
                </li>
                <li>
                    <h3>按钮接口演示 [button()]</h3>
                    <p>备注：回调函数如果返回false将阻止对话框关闭</p>
<pre class="prettyprint" id="demo_api_3">
var dialog = $.dialog({
    title: ‘警告‘,
    content: ‘点击管理按钮将让删除按钮可用‘,
    width: ‘20em‘,
    button: [{
        name: ‘管理‘,
        callback: function () {
            this
            .content(‘我更改了删除按钮‘)
            .button({
                name: ‘删除‘,
                disabled: false
            })
            .lock();
            return false;
        },
        focus: true
    }]
});

dialog.button(
    {
        name: ‘删除‘,
        callback: function () {
            alert(‘delect‘)
        },
        disabled: true
    }
)
</pre>
                    <p><button class="runcode" name="demo_api_3">运行»</button></p>
                </li>
                <li>
                    <h3>通过对话框ID引用 [get()]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_4">
var api1 = $.dialog({
    content: ‘我是窗口中的内容‘,
    id: ‘LHG76D‘
});
api1.get(‘LHG76D‘,1).content(‘我改变了窗口内容，并在2秒后关闭‘).time(2);
</pre>
                    <p><button class="runcode" name="demo_api_4">运行»</button></p>
                </li>
                <li>
                    <h3>最大化和最小化 [max() & min()]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_5">
$.dialog({
    content: ‘我现在是最大化窗口，点确定按钮最小化窗口‘,
    id: ‘LHG78D‘,
    ok: function(){
        this.min(); /* 这里调用了最小化方法 */
        return false;
    }
}).max();
</pre>
                    <p><button class="runcode" name="demo_api_5">运行»</button></p>
                </li>
                <li>
                    <h3>标题倒计时</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_6">
var timer;
$.dialog({
    content: ‘时间越来越少，越来越少..‘,
    init: function () {
        var that = this, i = 5;
        var fn = function () {
            that.title(i + ‘秒后关闭‘);
            !i && that.close();
            i --;
        };
        timer = setInterval(fn, 1000);
        fn();
    },
    close: function () {
        clearInterval(timer);
    }
});
</pre>
                    <p><button class="runcode" name="demo_api_6">运行»</button></p>
                </li>
                <li>
                    <h3>关闭不删除内容 [hide() & show()]</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_7">
$.dialog({
    id: ‘show-hide‘,
    content: ‘关闭后阻止对话框被删除，只隐藏对话框‘,
    close: function () {
        this.hide();
        return false;
    }
})
</pre>
                    <p><button class="runcode" name="demo_api_7">运行»</button></p>
                </li>
                <li>
                    <h3>AJAX高级应用：执行HTML片段中特殊script标签</h3>
                    <p>备注：HTML片段中的<span style=" padding:1px; margin:0 3px; color:#03C; background:#F8F8F8">&lt;script type="<span style="color:#090">text/dialog</span>"&gt;&lt;/script&gt;</span>标签包裹的javascript将会在lhgdialog内部执行，其this指向对话框扩展方法，这样可以进一步实现消息内容模块化。</p>
                    <p>(本例子使用了AJAX，需要在服务器上运行。可打开 <a href="content/login.html" target="_blank">content/login.html</a> 查看源码中的自定义脚本)</p>
<pre class="prettyprint" id="demo_api_8">
var api = $.dialog({id:‘L1360‘,title:false});

/* jQuery ajax */
$.ajax({
    url:‘content/login.html‘,
    success:function(data){
        api.content(data);
    },
    cache:false
});
</pre>
                    <p><button class="runcode" name="demo_api_8">运行»</button></p>
                </li>
            </ol>
            <h2>外部方法演示</h2>
            <p></p>
            <ol>
                <li>
                    <h3>$.dialog.load() 方法</h3>
                    <p>备注：此方法为Ajax填充内容</p>
<pre class="prettyprint" id="demo_api_9">
$.dialog.load(‘content/ajax.html‘,{max:false,min:false});
</pre>
                    <p><button class="runcode" name="demo_api_9">运行»</button></p>
                </li>
                <li>
                    <h3>$.dialog.alert() 方法</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_10">
$.dialog.alert(‘请不要点击确定按钮！‘,function(){
    alert(‘叫你不要点你非典‘);
});
</pre>
                    <p><button class="runcode" name="demo_api_10">运行»</button></p>
                </li>
                <li>
                    <h3>$.dialog.confirm() 方法</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_11">
$.dialog.confirm(‘你确定要删除这掉消息吗？‘, function(){
    $.dialog.tips(‘执行确定操作‘);
}, function(){
    $.dialog.tips(‘执行取消操作‘);
});
</pre>
                    <p><button class="runcode" name="demo_api_11">运行»</button></p>
                </li>
                <li>
                    <h3>$.dialog.prompt() 方法</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_12">
$.dialog.prompt(‘请输入图片网址‘,
    function(val){
        $.dialog.tips(val);
    },
    ‘http://‘
);
</pre>
                    <p><button class="runcode" name="demo_api_12">运行»</button></p>
                </li>
                <li>
                    <h3>$.dialog.tips() 方法</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_13">
/* 下面的只是演示代码，实际应用中一般这样写：
 * $.dialog.tips(‘数据加载中...‘,600,‘loading.gif‘);
 * [这里是你要执行的代码]
 * $.dialog.tips(‘数据加载完毕‘,1,‘success.gif‘,function(){ 这里写完成后执行的其它代码 });
 */
$.dialog.tips(‘数据加载中...‘,600,‘loading.gif‘);

setTimeout(function(){
    $.dialog.tips(‘数据加载完毕‘,1,‘tips.gif‘,function(){alert(‘加载完成后你要做什么？‘);});
}, 5000 );
</pre>
                    <p><button class="runcode" name="demo_api_13">运行»</button></p>
                </li>
                <li>
                    <h3>调用页面与窗口间的数据互传</h3>
                    <p></p>
<pre class="prettyprint" id="demo_api_14">
$.dialog.data(‘txtObj‘,$(‘#txt1‘)[0]); /* 通过数据共享方法来存储文本框对象 */
$.dialog.data(‘txt1‘,$(‘#txt1‘).val()); /* 通过数据共享的方法来存储文本框中的值 */

$.dialog(‘url:content/value.html‘);
</pre>
                    <p><input id="txt1" type="text" value="调用页面文本框中的值" />&nbsp;<button class="runcode" name="demo_api_14">运行»</button></p>

                </li>
            </ol>
        </div>
        <div class="line">&nbsp;</div>
        <div class="footer">
            <div class="ft_copy">
                Copyright © 2013-2020 <a href="http://www.lhgdialog.com/" target="_blank">www.lhgdialog.com</a>. All rights reserved.
                <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id=‘cnzz_stat_icon_5759176‘%3E%3C/span%3E%3Cscript src=‘" + cnzz_protocol + "s17.cnzz.com/stat.php%3Fid%3D5759176%26show%3Dpic‘ type=‘text/javascript‘%3E%3C/script%3E"));</script>
            </div>
        </div>
        <script type="text/javascript" src="//js.users.51.la/20198835.js"></script>
    </div>
    <script type="text/javascript">prettyPrint();</script>
    <script>_isDemoSkin && window._demoSkin && _demoSkin();</script>
    </div>
</body>
</html>
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
 
 
6.返回顶部
 
技术图片 作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

JavaScript-Tool-lhgDialog：基础示例-源代码

标签：责任   conf   dtd   skin   comm   alert   窗口组件   ESS   page   

原文地址：https://www.cnblogs.com/storebook/p/13324386.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！