国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jquery > 超强的JQuery模态对话框插件

超强的JQuery模态对话框插件

来源:程序员人生   发布时间:2014-04-30 11:55:16 阅读次数:3422次
调用方法基本上很傻瓜,只要为链接加上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>

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生