当前路径: 星河码客 » 插件特效 » jQuery弹出对话框插件很好看的外观可以自定义参数

jQuery弹出对话框插件很好看的外观可以自定义参数

1. 默认不带参数配置的对话框$.Zebra_Dialog('');2. 以下是5种类型的对话框: error, warning, question, information and confirmation.$.Zebra_Dialog('', {'type': 'error','title': 'Error'});3. 自定义按钮和回调函数。注意:onClose事件在对话框关闭后才被执行。你可以参考下一个例子如何在关闭对话框之前来执行函数。$.Zebra_Dialog('', {'type': 'question','title': 'Custom buttons','buttons': ['Yes', 'No', 'Help'],'onClose': function(caption) { alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');}});3.1自定义带回调函数的按钮。注意:附加到按钮上的函数会在对话框关闭前触发(按钮一点就就触发)。$.Zebra_Dialog('', {'type': 'question','title': 'Custom buttons','buttons': [ {caption: 'Yes', callback: function() { alert('"Yes" was clicked')}}, {caption: 'No', callback: function() { alert('"No" was clicked')}}, {caption: 'Cancel', callback: function() { alert('"Cancel" was clicked')}} ]});4. 将对话框放置在屏幕的右上角位置$.Zebra_Dialog('', {'title': 'Custom positioning','position': ['right - 20', 'top + 20']});5. 使用消息提示模式-不带按钮,2秒后自动消失。 注意:这种模式需要使用new关键字来实例化对象,最后打开的对话框将被关闭。new $.Zebra_Dialog('', {'buttons': false,'modal': false,'position': ['right - 20', 'top + 20'],'auto_close': 2000});6. 通过AJAX加载外部内容new $.Zebra_Dialog('', {'source': {'ajax': 'ajax.html'},width: 600,'title': 'External content loaded via AJAX'});6.1 在iFrame中加载外部内容。 new $.Zebra_Dialog('Content loaded via AJAX:', {source: {'iframe': { 'src': 'http://www.jqueryfuns.com', 'height': 500}},width: 800,title: 'External content loaded in an iFrame'});7. 自定义外观-标题为蓝黑色背景,以及一个自定义图标。 CSS样式为:.myclass .ZebraDialog_Title { background: #DEDEDE; border-bottom: 1px solid #222 }.myclass .ZebraDialog_Body { background-image: url('coffee_48.png') }new $.Zebra_Dialog('', {'custom_class': 'myclass','title': 'Customizing the appearance'});

jQuery弹出对话框插件很好看的外观可以自定义参数

在线演示        积分下载        6毛下载        砍两刀下载       

文件目录······
暂无数据
 猜你喜欢 更多»
 工具推荐 更多»