当前位置: 首页 > 工具软件 > nyroModal > 使用案例 >

【jQuery.nyroModal】超强JQuery模态对话框插件

越新霁
2023-12-01

官网地址:http://nyromodal.nyrodev.com/

调用方法基本上很傻瓜,只要为链接加上class="nyroModal"既可,手动调用除外,下面介绍

支持模态对话框类型:

  • Ajax 调用。
    < 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不存在,则显示所有内容。
  • 允许调整对话框的大小
  • 单张图片显示(会自动缩放图片大小)。
    < 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的内容。
    < href ="#test"  class ="nyroModal" > DOM Element (hidden div) </ a >
    < div  id ="test"  style ="display: none; width: 600px;" >
      
    < 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 = " # " > Manual Call < / a>
    < a id = " manual2 "  href = " # " > Manual Call to get an ajax content < / a>
    < a id = " manual3 "  href = " # " > 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 >
    < 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属性了,以合对话框能自动缩放到元素的大小。
  • 网方网站:http://nyromodal.nyrodev.com/

转载于:https://www.cnblogs.com/ideas/archive/2009/09/04/jQuery-nyroModal.html

 类似资料: