超强JQuery模态对话框插件


调用方法基本上很傻瓜,只要为链接加上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>

DOM元素显示

  把调用者链接的href设置为目标元素的ID既可。注意目标元素的本身是不作为显示输出的,显示的只是其innerHTML的内容。

<a href="http://p5s8.ddvip.com/index.php#test" class="nyroModal">DOM Element (hidden div)</a>
<div id="test" style="display: none; width: 600px;">
  <a href="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">Open a new modal</a><br />
  Test
</div>

  手动调用(看示例吧)

<script type="text/javascript">
$(function() {
  $('#manual').click(function(e) {
    e.preventDefault();
    var content = 'Content wrote in JavaScript<br />';
    jQuery.each(jQuery.browser, function(i, val) {
      content+= i + " : " + val+'<br />';
    });
    $.nyroModalManual({
      bgColor: '#3333cc',
      content: content
    });
    return false;
  });
  $('#manual2').click(function(e) {
    e.preventDefault();
    $.nyroModalManual({
      url: 'http://nyromodal.nyrodev.com/demoSent.php'
    });
    return false;
  });
  $('#manual3').click(function(e) {
    e.preventDefault();
    $('#imgFiche').nyroModalManual({
      bgColor: '#cc3333'
    });
    return false;
  });
  $('#myValidForm').submit(function(e) {
    e.preventDefault();
    if ($("#myValidForm :text").val() != '') {
      $('#myValidForm').nyroModalManual();
    } else {
      alert("Enter a value before going to " + $('#myValidForm').attr("action"));
    }
    return false;
  });
});
</script>
<a id="manual" href="http://p5s8.ddvip.com/index.php#">Manual Call</a>
<a id="manual2" href="http://p5s8.ddvip.com/index.php#">Manual Call to get an ajax content</a>
<a id="manual3" href="http://p5s8.ddvip.com/index.php#">Manual Call calling through an other link</a>
<form id="myValidForm" method="post" action="http://nyromodal.nyrodev.com/demoSent.php">
  <input type="text" name="wouhou" />
  <input type="submit" value="simple form with validation" />
</form>


  Iframe 支持

  错误处理(如果目标地址出错,则会提示错误)

  允许指定元素做为显示容器

  如果指定对象的blocker属性,则对话框会结果会显示在指定的元素内,这样做就可以避免整个页面被模态对话框遮住。

<div id="blocker"></div>
<a href="http://nyromodal.nyrodev.com/demoSent.php" id="block">blocker Modal</a>
<script type="text/javascript">
$(function() {
  $('#block').nyroModal({
    'blocker': '#blocker'
  });
});

  其它:关于对话框全局配置

  请不要使用$.fn.nyroModal.settings = {...}的方式操作,这样会覆盖他的很多默认配置。你可以使用下面的方式,既可避免该问题:$.extend($.fn.nyroModal.settings,{...})。关于配置的详细,请参见官网。

  其它:注意事项,配置默认对话框最小是400x300,所以如果你要显示的元素小于这个值,那你就要指定minWidth和minHeight属性了,以合对话框能自动缩放到元素的大小


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3