jQuery手机移动端模态对话框插件

jQuery手机移动端模态对话框插件
下载次数:1 文件大小:59.89KB 所需积分:0 QQ联系购买积分:3331653644(1元=10积分)

默认

$('#btn-01').click(function(){
    $.dialog({
        contentHtml : '<p>我是默认弹出对话框示例展示。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

自动关闭

$('#btn-01').click(function(){ 
    $.dialog({
        autoClose : 2500,
        contentHtml : '<p>我是自动关闭的对话框示例展示。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

无标题

$('#btn-03').click(function(){
    $.dialog(
        { showTitle : false,
         contentHtml : '<p>我是没有标题的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
        });
});

自定义标题

$('#btn-04').click(function(){ 
    $.dialog({
        titleText : '自定义标题',
        contentHtml : '<p>我是自定义标题的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    }); 
});

Comfirm 类型

$('#btn-05').click(function(){
    $.dialog({
        type : 'confirm',
        contentHtml : '<p>我是confirm类型的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

Comfirm 类型, 自定义按钮文字

$('#btn-06').click(function(){
    $.dialog({
        type : 'confirm',
        buttonText : {
            ok : '自定义-确定',
            cancel : '自定义-取消'
        }, contentHtml : '<p>我是confirm类型的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

Comfirm 类型, 按钮回调函数

$('#btn-07').click(function(){
    $.dialog({
        type : 'confirm',
        onClickOk : function(){
            alert('你点了确定~~');
        }, onClickCancel : function(){
            alert('你点了取消~~');
        }, contentHtml : '<p>我是confirm类型的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

Comfirm 类型, 状态回调函数

$('#btn-08').click(function(){
    $.dialog({
        type : 'confirm',
        onBeforeShow : function(){ 
            alert('显示前执行~~')
        }, onShow : function(){ 
            alert('显示完成后执行~~')
        }, onBeforeClosed : function(){ 
            alert('关闭前执行~~')
        }, onClosed : function(){
            alert('关闭后执行,可以看页面title是否改变~~');
            document.title = '我已经关闭拉!';
        }, contentHtml : '<p>我是confirm类型的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

info 类型

$('#btn-09').click(function(){
    $.dialog({ 
        type : 'info',
        infoText : '加载中…',
        infoIcon : 'images/icon/loading.gif',
        autoClose : 2500
    });
});

info 类型, HTML创建内容

$('#btn-12').click(function(){
    $.dialog({
        type : 'info',
        contentHtml : '<img class="info-icon" src="images/icon/success.png" alt="操作成功" /><p class="info-text">操作成功</p>',
        autoClose : 2500
    });
});

info 类型, 更改状态

$('#btn-12').click(function(){
    var infoDialog = $.dialog({
        type : 'info',
        infoText : '加载中…',
        infoIcon : 'images/icon/loading.gif'
    }); 
    window.setTimeout(function() {
        infoDialog.dialog.update({
            autoClose : 1500,
            infoText : '操作成功',
            infoIcon : 'images/icon/success.png'
        });
    }, 2500);
});

适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

0 条评论