超強的JQuery模態對話框插件
來源:程序員人生 發布時間:2014-04-30 11:55:16 閱讀次數:3725次
調用方法基本上很傻瓜,只要為鏈接加上class="nyroModal"既可,手動調用除外,下面介紹
支持模態對話框類型:
Ajax 調用。
<a href="http://www.xxx.com/demoSent.php" class="nyroModal">Ajax</a>
Ajax調用并支持抽取指定內容。
如果只需要顯示頁面上某一個元素,那么只需要在請求時把該元素ID號做為錨點加入請求地址中去。如只顯示指定ID的內容:<a href="http://www.xxx.com/demoSent.php#UserInfo" class="nyroModal">Ajax</a>,則只顯示test.aspx里ID號為UserInfo的元素;如果UserInfo不存在,則顯示所有內容。
允許調整對話框的大小
單張圖片顯示(會自動縮放圖片大小)。
<a href="http://nyromodal.nyrodev.com/img/img2.jpg" class="nyroModal" title="3rd Street Promenade">Image</a>
多張圖片相冊顯示,且支持flash顯示。
下面示例中的鏈接多了一個rel="gal"屬性,這是對圖片進行分組,也就是說rel屬性值相同的會分到一組顯示,該值可以根據你的喜好自行修改;且在加載flash文件時,通過processHandler事件對文件類型進行判斷并處理顯示方式及大小
<script type="text/javascript">
$(function() {
$.nyroModalSettings({
processHandler: function(settings) {
var from = settings.from;
if (from && from.href && from.href.indexOf('http://www.youtube.com/watch?v=') == 0) {
$.nyroModalSettings({
type: 'swf',
height: 355,
width: 425,
url: from.href.replace(new RegExp("watch?v=", "i"), 'v/')
});
}
}
});
});
</script>
Form提交(返回結果顯示在對話框內)
Form提交并過抽取定內容(用法同Ajax)
同樣,我們只需要為form元素添加class="nyroModal"屬性;如果需要在IFrame的方式,那就指定target="_blank"屬性;如果需要抽取部分內容顯示,就指定提交目標頁面的元素的ID號為錨點。
<form method="post" action="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">
<input type="text" name="wouhou" />
<input type="submit" value="simple form"/>
</form>
<form method="post" action="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal" target="_blank">
<input type="text" name="wouhou" />
<input type="submit" value="simple form in iframe"/>
</form>
<form method="post" action="http://nyromodal.nyrodev.com/demoSent.php#test" class="nyroModal">
<input type="text" name="wouhou" />
<input type="submit" value="simple form Filtering Content"/>
</form>
Form提交文件上傳
Form提交文件上傳并抽取指定內容
<form method="post" enctype="multipart/form-data" action="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">
<input type="file" name="file" />
<input type="submit" value="form with file"/>
</form>
<form method="post" enctype="multipart/form-data" action="http://nyromodal.nyrodev.com/demoSent.php#blabla" class="nyroModal">
<input type="file" name="file" />
<input type="submit" value="form with file Filtering Content"/>
</form>
生活不易,碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈