1. 程式人生 > >Jquery ui彈框筆記

Jquery ui彈框筆記

jquery ui 彈框還是比較豐富的,提前準備好彈窗內容標籤。呼叫dialog()方法,傳遞相關引數即可,接下來將作相關的介紹。

內容標籤準備

對話方塊使用div標籤包裹彈框內容,這個是常用的,在div上加上title屬性將在彈出對話方塊的頭部進行顯示,不加頭部顯示空白。
簡單示例:

<body>
	<button>彈出對話方塊</button>
	<div id="dialog" title="基本對話方塊" style="display: none">
		<p>這是一個預設的對話方塊</p>
	</div>
	<script type="text/javascript">
		
		$("button").button().click(function(){
			$("#dialog").dialog();
		});

	</script>
</body>

在這裡插入圖片描述
彈出的對話方塊預設是可以改變視窗大小,而且帶一個X關閉按鈕,並且可以拖動。

增加彈出及關閉的效果。

$("button").button().click(function(){
	$("#dialog").dialog({
			show : {
				effect : "blind",
				duration : 1000
			},
			hide : {
				effect : "explode",
				duration : 1000
			}
		});
	});

Jquery ui 目前實現的效果有:blind,explode,highlight,size,scale,puff,pulsate,shake,slide,bounce,clip,drop,fade,fold

帶按鈕的彈窗示例:
帶按鈕,檢視原始碼,只需要傳遞一個buttons陣列即可。陣列中text為顯示的文字,click為點選的觸發事件。

$("#dialog").dialog({
		buttons : [
			{
				text : "確定",
				click : function(){
					alert("點選了確定按鈕");
				}
			},
			{
				text : "取消",
				click : function(){
					alert("點選了取消按鈕");
				}
			}
							
		]
	});

對應的原始碼
在這裡插入圖片描述
看過原始碼之後,想展示帶圖示按鈕,想必你已經知道怎麼弄了吧。

無參的dialog()預設生成的最小高度min-height:87px,並且height自動根據內容適應。
在這裡插入圖片描述

上面的最小高度在原始碼上是150px,原始碼上可以看到好多預設值,如autoOpen自動開啟,預設是不帶button的,buttons:[],預設可拖放,draggable:true,預設可調大小resizable: true。附原始碼配置:

options: {
		appendTo: "body",
		autoOpen: true,
		buttons: [],
		classes: {
			"ui-dialog": "ui-corner-all",
			"ui-dialog-titlebar": "ui-corner-all"
		},
		closeOnEscape: true,
		closeText: "Close",
		draggable: true,
		hide: null,
		height: "auto",
		maxHeight: null,
		maxWidth: null,
		minHeight: 150,
		minWidth: 150,
		modal: false,
		position: {
			my: "center",
			at: "center",
			of: window,
			collision: "fit",

			// Ensure the titlebar is always visible
			using: function( pos ) {
				var topOffset = $( this ).css( pos ).offset().top;
				if ( topOffset < 0 ) {
					$( this ).css( "top", pos.top - topOffset );
				}
			}
		},
		resizable: true,
		show: null,
		title: null,
		width: 300,

		// Callbacks
		beforeClose: null,
		close: null,
		drag: null,
		dragStart: null,
		dragStop: null,
		focus: null,
		open: null,
		resize: null,
		resizeStart: null,
		resizeStop: null
	}

我們可以傳遞height改變視窗的高度,width改變視窗的寬度,modal:true則為模態框(具有遮罩的效果)
手工關閉彈窗,呼叫dialog(“close”)方法。

$("#dialog").dialog({
	buttons : [
			{
				text : "關閉",
				click : function(e){
					console.log(e);
					$("#dialog").dialog("close");
				}
			}
		]
	});

其中點選事件裡e,返回的是一個jQuery.Event物件。
在這裡插入圖片描述

也支援簡單的寫法,不用傳遞一個數組。

$("#dialog").dialog({
	buttons : {
		確定 : function(){
			$(this).dialog("close");
		}
	}
});