基于js實現可拖動彈出框插件



39 152 51



特效描述:基于js實現 可拖動 彈出框,基于js實現可拖動彈出框插件

代碼結構

1. 引入CSS

<link rel="stylesheet" href="easydialog.css" />

2. 引入JS

<script src="easydialog.min.js"></script>

3. HTML代碼

<div class="header">
	<div class="header_box">
		<h1 class="logo">easyDialog v2.0</h1>
		<h2 class="sub_tit">演示與說明</h2>
	</div>
</div>
<div class="wrapper">
	<h3>使用默認的HTML模板</h3>
<div class="code_box">
<pre>
var btnFn = function(){
  alert( e.target );
  return false;
};
easyDialog.open({
  container : {
    header : '彈出層標題',
    content : '歡迎使用easyDialog : )',
    yesFn : btnFn,
    noFn : true
  }
});
</pre>
<div class="con_right">
	<p>默認的HTML模板分成3個部分<br />
		<b>header:</b>包含彈出層的標題和關閉按鈕<br />
		<b>conent:</b>包含彈出層的內容<br />
		<b>footer:</b>包含確定和取消按鈕
	</p>
	<p>如果header沒有內容將不顯示,content必須要有內容,footer沒有2個按鈕也不顯示。<br />
		<b>yesFn:</b>確定按鈕的回調函數,回調函數返回false將不關閉彈出層。<br />
		<b>noFn:</b>取消按鈕的回調函數,回調函數返回false將不關閉彈出層,取消按鈕的回調函數也同樣會綁定在關閉按鈕上,如果參數不是函數而是true,那么取消按鈕就只有關閉彈出層的功能。<br />
		如果沒有給按鈕傳回調函數,按鈕將不顯示。
	</p>
	<a href="javascript:void(0)" class="run" id="demoBtn1">運行</a>
</div>
</div>
	<h3>默認模板只有content</h3>
<div class="code_box">
<pre>
easyDialog.open({
  container : {
    content : '彈出層將在2秒后關閉...'
  },
  autoClose : 2000
});
</pre>
<div class="con_right">
	<p>默認模板如果只有content有內容,將不顯示header和footer部分,將顯示最簡模式。<br />
		<b>autoClose:</b>自動關閉窗口,單位為毫秒(ms)。
	</p>
	<a href="javascript:void(0)" class="run" id="demoBtn2">運行</a>
</div>
</div>
	<h3>自定義彈出層</h3>
<div class="code_box">
<pre>
&lt;div id="imgBox" style="display:none"&gt;
&nbsp;&nbsp;&lt;img src="test_img.jpg" alt="" /&gt;
&lt;/div&gt;
easyDialog.open({
  container : 'imgBox',
  autoClose : 2000,
  fixed : false
});
</pre>
<div class="con_right">
	<p>自定義彈出層時,需要先將HTML結構添加到頁面中,然后設置其隱藏(display:none),傳參必須為id。<br />
		<b>fixed:</b>該參數為false時,彈出窗口為絕對定位(不跟隨頁面的滾動而滾動),為true時,彈出窗口為固定定位(跟隨頁面的滾動而滾動)。
	</p>
	<a href="javascript:void(0)" class="run" id="demoBtn3">運行</a>
</div>
</div>
<h3>遮罩層</h3>
<div class="code_box">
<pre>
easyDialog.open({
  container : {
    header : '沒有遮罩層',
    content : '歡迎使用easyDialog : )'
  },
  overlay : false
});
</pre>
<div class="con_right">
	<p><b>overlay:</b>該參數為false時,將不顯示遮罩層,沒有遮罩層的情況下可以方便對頁面繼續進行操作。</p>
	<a href="javascript:void(0)" class="run" id="demoBtn4">運行</a>
</div>
</div>
<h3>跟隨定位</h3>
<div class="code_box">
<pre>
easyDialog.open({
  container : {
    header : '跟隨定位',
    content : '彈出窗口可以跟隨某元素絕對定位'
  },
  follow : 'demoBtn5',
  followX : -137,
  followY : 24
});
</pre>
<div class="con_right">
	<p><b>follow:</b>被跟隨元素,參數可以是元素的id,也可以是DOM對象。<br />
		<b>followX:</b>相對于被跟隨元素的X軸偏移。<br />
		<b>followY:</b>相對于被跟隨元素的X軸偏移。<br />
	</p>
	<a href="javascript:void(0)" class="run" id="demoBtn5">運行</a>
</div>
</div>
<h3>關閉拖拽</h3>
<div class="code_box">
<pre>
easyDialog.open({
  container : {
    header : '關閉拖拽',
    content : '歡迎使用easyDialog : )'
  }
  drag : false
});
</pre>
<div class="con_right">
	<p><b>drag:</b>該參數為false時將關閉拖拽的功能。<br />
	如果是自定義彈出層,要實現拖拽需要滿足2個條件,首先要確保drag為true,然后需要一個id為“<b>easyDialogTitle</b>”的DOM元素。
	</p>
	<a href="javascript:void(0)" class="run" id="demoBtn6">運行</a>
</div>
</div>
<h3>關閉彈出層</h3>
<div class="code_box">
<pre>
easyDialog.close();
</pre>
<div class="con_right">
	<p>調用easyDialog.close()方法可以關閉當前的彈出層,另外使用ESC鍵也可以關閉彈出層,如果不想使用ESC鍵來關閉彈出層設置<b>lock</b>為true即可。</p>
	<p>如果是自定義彈出層,也想使用關閉按鈕來關閉彈出層,除了給該按鈕手動綁定一個關閉彈出層的方法外,還可以添加一個id為“<b>closeBtn</b>”的DOM元素,這樣不綁定事件就也可以關閉彈出層。</p>
</div>
</div>
<h3>回調函數</h3>
<div class="code_box">
<pre>
var callFn = function(){
  alert( 'hello' );
};
easyDialog.open({
  container : {
    header : '回調函數',
    content : '歡迎使用easyDialog : )'
  },
  callback : callFn
});
</pre>
<div class="con_right">
	<p><b>callback:</b>設置彈出層關閉后執行的回調函數。</p>
	<a href="javascript:void(0)" class="run" id="demoBtn7">運行</a>
</div>
</div>
<h3>參數列表</h3>
<table class="param_tb">
	<colgroup>
		<col style="width:120px" />
		<col style="width:140px" />
		<col style="width:90px" />
		<col style="width:610px" />
	</colgroup>
	<thead>
		<tr class="even">
			<th>參數</th>
			<th>參數類型</th>
			<th>默認參數</th>
			<th>參數說明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>container</td>
			<td>String / Object</td>
			<td>null</td>
			<td class="t_l">
				<p><b>彈出窗口內容</b></p>
				<p>參數為DOM元素的id,那么彈出層內容將是自定義的,如果是object將自動創建一個默認的彈出層內容模板。</p>
				<p>內容模板的參數:</p>
				<p>header:彈出層的標題,并包含了關閉按鈕,如果沒有參數將不顯示。</p>
				<p>content:彈出層的內容,參數可以是字符串,也可以是HTML代碼。<br />
				<p>yesFn:確定按鈕的回調函數,回調函數返回false將不關閉彈出層,回調函數的this指向easyDialog,無參數將不顯示按鈕。<br />
				<p>noFn:取消按鈕的回調函數,回調函數返回false將不關閉彈出層,回調函數的this指向easyDialog,該回調函數也同樣會綁定在關閉按鈕上,如果參數不是函數而是true,那么取消按鈕僅有關閉彈出層的功能,無參數將不顯示按鈕。</p>
				<p>yesText:確定按鈕的文本,默認為“確定”。</p>
				<p>noText:取消按鈕的文本,默認為“取消”。</p>
			</td>
		</tr>
		<tr class="even">
			<td>drag</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p><b>拖拽效果</b></p>
				<p>true:啟用拖拽效果。</p>
				<p>false:禁用拖拽效果。</p>
				<p>自定義彈出層,要實現拖拽需要滿足2個條件,首先要確保drag參數為true,然后需要一個id為“easyDialogTitle”的DOM元素。</p>
			</td>
		</tr>
		<tr>
			<td>fixed</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p><b>設置定位</b></p>
				<p>true:固定定位,彈出窗口跟隨頁面滾動而滾動。</p>
				<p>false:絕對定位,彈出窗口不跟隨頁面的滾動。</p>
			</td>
		</tr>
		<tr class="even">
			<td>overlay</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p><b>設置遮罩層</b></p>
				<p>true:顯示遮罩層,不可對頁面其他元素進行操作。</p>
				<p>false:不顯示遮罩層,可以對頁面其他元素進行操作。</p>
			</td>
		</tr>
		<tr>
			<td>follow</td>
			<td>String / Object</td>
			<td>null</td>
			<td class="t_l">
				<p><b>跟隨定位</b></p>
				<p>設置彈出窗口跟隨某元素進行絕對定位,跟隨定位時將不顯示遮罩層,參數可以是元素id也可以是DOM對象。</p>
			</td>
		</tr>
		<tr class="even">
			<td>followX</td>
			<td>Number</td>
			<td>0</td>
			<td class="t_l">
				<p>設置跟隨定位時,相對于被跟隨元素的X軸偏移,單位為px,傳參時無需帶單位。</p>
			</td>
		</tr>
		<tr>
			<td>followY</td>
			<td>Number</td>
			<td>0</td>
			<td class="t_l">
				<p>設置跟隨定位時,相對于被跟隨元素的Y軸偏移,單位為px,傳參時無需帶單位。</p>
			</td>
		</tr>
		<tr class="even">
			<td>lock</td>
			<td>Boolean</td>
			<td>false</td>
			<td class="t_l">
				<p><b>鎖定彈出層</b></p>
				<p>true:ESC鍵不可以關閉彈出層。</p>
				<p>false:ESC鍵可以關閉彈出層。</p>
			</td>
		</tr>
		<tr>
			<td>autoClose</td>
			<td>Number</td>
			<td>0</td>
			<td class="t_l">
				<p>設置彈出層自動關閉,單位為ms,傳參時無需帶單位。</p>
			</td>
		</tr>
		<tr class="even">
			<td>callback</td>
			<td>Function</td>
			<td>null</td>
			<td class="t_l">
				<p>設置關閉彈出層后執行的回調函數,this指向easyDialog。</p>
			</td>
		</tr>
	</tbody>
</table>
<div class="html_code">
	<h3>默認內容模板的樣式和結構</h3>
	<p>如果要自定義默認模板的樣式,可以修改下載文檔中的<b>easydialog.css</b>文件,下面是相應的HTML源碼部分:</p>
	<pre>
&lt;div class="easyDialog_wrapper" id="easyDialogWrapper" &gt;
&nbsp;&nbsp;&lt;div class="easyDialog_content"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4 class="easyDialog_title" id="easyDialogTitle"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="javascript:void(0)" title="關閉窗口" class="close_btn" id="closeBtn"&gt;&amp;times;&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;彈出層標題
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/h4&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="easyDialog_text"&gt;歡迎使用easyDialog : )&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="easyDialog_footer"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class="btn_normal" id="easyDialogNoBtn"&gt;取消&lt;/button&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class="btn_highlight" id="easyDialogYesBtn"&gt;確定&lt;/button&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div id="imgBox" style="display:none;"><img src="test_img.jpg" alt="" /></div>
<script>
var $ = function(){
	return document.getElementById(arguments[0]);
};
var btnFn = function( e ){
	alert( e.target );
	return false;
};
$('demoBtn1').onclick = function(){
	easyDialog.open({
		container : {
			header : '彈出層標題',
			content : '歡迎使用easyDialog : )',
			yesFn : btnFn,
			noFn : true
		},
		fixed : false
	});
};
$('demoBtn2').onclick = function(){
	easyDialog.open({
		container : {
			content : '彈出層將在2秒后關閉...'
		},
		autoClose : 2000
	});
};
$('demoBtn3').onclick = function(){
	easyDialog.open({
		container : 'imgBox',
		autoClose : 2000,
		fixed : false
	});
};
$('demoBtn4').onclick = function(){
	easyDialog.open({
		container : {
			header : '沒有遮罩層',
			content : '歡迎使用easyDialog : )'
		},
		overlay : false
	});
};
$('demoBtn5').onclick = function(){
	easyDialog.open({
		container : {
			header : '跟隨定位',
			content : '彈出層可以跟隨某元素絕對定位'
		},
		follow : 'demoBtn5',
		followX : -137,
		followY : 24
	});
};
$('demoBtn6').onclick = function(){
	easyDialog.open({
		container : {
			header : '關閉拖拽',
			content : '歡迎使用easyDialog : )'
		},
		drag : false
	});
};
var callFn = function(){
	alert( 'hello' );
};
$('demoBtn7').onclick = function(){
	easyDialog.open({
		container : {
			header : '回調函數',
			content : '歡迎使用easyDialog : )'
		},
		callback : callFn
	});
};
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 提示框/彈出層 彈出層拖動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子