jQuery模態對話框插件



91 360 121



特效描述:jQuery 模態對話框插件,jQuery模態對話框插件

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/default/zebra_dialog.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="libraries/highlight/public/css/ir_black.css" type="text/css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="libraries/highlight/public/javascript/highlight.js"></script>
<script type="text/javascript" src="js/zebra_dialog.js"></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代碼

<header class="htmleaf-header">
	<div class="htmleaf-demo center">
	  <a href="index.html" class="current">默認對話框</a>
	  <a href="index2.html">扁平風格</a>
	</div>
</header>
<section class="htmleaf-container">
	<div class="main-wrapper">
		<h3>Zebra_Dialog Demo:默認對話框</h3>
		<strong>1.</strong> 默認不帶參數配置的對話框。點擊<a href="javascript:void(0)" id="example1">這里</a> 查看效果。
		<pre><code class="javascript">$.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery');</code></pre>
		<p>&nbsp;</p>
		<strong>2.</strong> 以下是5種類型的對話框: <a href="javascript:void(0)" id="example2_1">error</a>, <a href="javascript:void(0)" id="example2_2">warning</a>, <a href="javascript:void(0)" id="example2_3">question</a>, <a href="javascript:void(0)" id="example2_4">information</a> and <a href="javascript:void(0)" id="example2_5">confirmation</a>.
<pre><code class="javascript">// this example is for the "error" box only
// for the other types the "type" property changes to "warning", "question", "information" and "confirmation"
// and the text for the "title" property also changes
$.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery', {
'type':     'error',
'title':    'Error'
});</code></pre>
		<p>&nbsp;</p>
		<strong>3.</strong> 自定義按鈕和回調函數。點擊<a href="javascript:void(0)" id="example3">這里</a>查看效果。<br><br>
		<em>注意:onClose事件在對話框關閉后才被執行。你可以參考下一個例子如何在關閉對話框之前來執行函數。</em>
<pre><code class="javascript">$.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery', {
'type':     'question',
'title':    'Custom buttons',
'buttons':  ['Yes', 'No', 'Help'],
'onClose':  function(caption) {
	alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
}
});</code></pre>
		<p>&nbsp;</p>
		<strong>3.1</strong>自定義帶回調函數的按鈕。點擊 <a href="javascript:void(0)" id="example31">這里</a>查看效果。<br><br>
		<em>注意:附加到按鈕上的函數會在對話框關閉前觸發(按鈕一點就就觸發)。</em>
<pre><code class="javascript">$.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery', {
'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')}}
			]
});</code></pre>
		<p>&nbsp;</p>
		<strong>4.</strong> 將對話框放置在屏幕的右上角位置。點擊<a href="javascript:void(0)" id="example4">這里</a>查看效果。
<pre><code class="javascript">$.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery', {
'title':    'Custom positioning',
'position': ['right - 20', 'top + 20']
});</code></pre>
		<p>&nbsp;</p>
		<strong>5.</strong> 使用消息提示模式-不帶按鈕,2秒后自動消失。
		<br><br>
		<em>注意:這種模式需要使用new關鍵字來實例化對象,最后打開的對話框將被關閉。</em><br>
		點擊<a href="javascript:void(0)" id="example5">這里</a>查看效果。
<pre><code class="javascript">new $.Zebra_Dialog('&lt;strong&gt;Zebra_Dialog&lt;/strong&gt;, a small, compact and highly configurable dialog box plugin for jQuery', {
'buttons':  false,
'modal': false,
'position': ['right - 20', 'top + 20'],
'auto_close': 2000
});</code></pre>
		<p>&nbsp;</p>
		<strong>6.</strong> 通過AJAX加載外部內容。
		點擊<a href="javascript:void(0)" id="example6">這里</a>查看效果。
<pre><code class="javascript">new $.Zebra_Dialog('&lt;strong&gt;Some dummy content:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;', {
'source':  {'ajax': 'ajax.html'},
width: 600,
'title': 'External content loaded via AJAX'
});</code></pre>
		<p>&nbsp;</p>
		<strong>6.1</strong> 在iFrame中加載外部內容。
		點擊 <a href="javascript:void(0)" id="example61">這里</a> 查看效果。
<pre><code class="javascript">new $.Zebra_Dialog('&lt;strong&gt;Content loaded via AJAX:&lt;/strong&gt;', {
source: {'iframe': {
	'src':  'http://en.m.wikipedia.org/wiki/Dialog_box',
	'height': 500
}},
width: 800,
title:  'External content loaded in an iFrame'
});</code></pre>
		<p>&nbsp;</p>
		<strong>7.</strong> 自定義外觀-標題為藍黑色背景,以及一個自定義圖標。
		<br><br>CSS樣式為:
<pre><code class="css">/* Notice how we're targting the dialog box's title bar through the custom class */
.myclass .ZebraDialog_Title { background: #DEDEDE; border-bottom: 1px solid #222 }
.myclass .ZebraDialog_Body { background-image: url('coffee_48.png') }</code></pre>
		點擊 <a href="javascript:void(0)" id="example7">這里</a> 查看效果。<br>
<pre><code class="javascript">new $.Zebra_Dialog('Buy me a coffee if you like this plugin!', {
'custom_class':  'myclass',
'title': 'Customizing the appearance'
});</code></pre>
		<p>&nbsp;</p>
	</div>
<div id="boxcontent" style="display: none">
<p>Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis
leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia
in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et
auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.</p>
<p>Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis
leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia
in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et
auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.</p>
<p>Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis
leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia
in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et
auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.</p>
</div>
</section>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 圖片廣告 文字提示框 提示文字
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子