• jQuery nyroModal 插件遇到问题


    nyroModal

    ver 1.6.2 弹出层插件 浏览更多
     
    初始化大小问题
    //页面加载完成后初始化 设置大小
    $(function() {
           $.nyroModalSettings({  $(window).width(), height: $(window).height(), modal: true })
    }); 

    多 nyroModal 弹出层自定义大小

     前面解决了默认大小设置问题,但针对所有弹出层此设置都是有效的,当一个页面有多个弹出层,而且彼此大小不一致时,该如何解决?

     在标签的 nyroModal 事件响应之后,再调整生成的 html 样式,原因:

     在标签上绑定一个事件,nyroModal 插件初始化时会合并事件,并且用户绑定的事件会先执行, 如 <a class="nyroModal" href="#content" click="before()">link</a>,

    会先执行 before 再弹出层,因此可以先设置内容,再弹出层(此方式也可解决 nyroModal 回调事件中有 ajax 请求时,弹出了错误层,但 ajax 没返回结果问题,先 ajax 获取内容,再弹出层)

    // before 方法,先 load 内容,再执行以下代码,为什么 setTimeout 呢?
    // 如果不这样,就会立即执行,而 nyroModal 层却没有生成,因此 setTimeout  真是天赐良方
    setTimeout(function(){
         $( '.nyroModalContent').width(200);
         $( '.nyroModalWrapper').width(200);
    }, 100);

    关闭层回调方法,如刷新页面;但一旦设置就针对整个页面,所以研究了根据不同情景,选择不同响应的实现

    一个页面中有多种 nyroModal 层,有 div 和 iframe 两种; div 关闭时不需刷新页面,iframe 关闭时要刷新页面; 如果 endRemove 回调刷新,那么无论 div 还是 iframe 都会刷新;

    因此需要动态判断,通过回调参数选择响应方式,如下代码:

    此处通过 class 值进行判断

     $('.nyroModal').nyroModal({
              endRemove: function(obj, settings) {
                 // settings.type : div , iframe
                 // settings.selector : div中#xxx, iframe中none
                 // settings.selector : div中none, iframe中url
                 try {
                       var selector = $(settings.selector);
    if (selector.length != 0 && selector.attr("class").indexOf("non-refresh") != -1) return; } catch(e) {} window.location.href = window.location.href; } });

    js 动态添加的标签绑定 nyroModal 事件

    大家都很熟悉,一般这些插件的初始化,比如 DatePicker (下文会讲到),都是通过一个 css 选择器,然后在 document.ready 中绑定事件。但对于那些通过 js 动态操作 DOM 加入的标签,该如何绑定这些事件呢?相信大家都有遇到过。以 table 中添加一行为例,其中 tr 中有如下 html :

    <a class="nyroModal" href="#content">link</> <div id="content">content</div>

    其实,实现方式也很简单,获得插入的 tr 行 dom 对象,然后执行下面代码即可:

    1 $(".nyroModal", tr).nyroModal(); 

    总结

    关于 nyroModal 插件遇到的问题就记录到此,后续有问题再做更新。

    解决这些问题,关键是要认真读取官方的 Document 和 Examples,但一般使用者会忽略这些,而是依赖搜索引擎得到很多不全面的答案。

  • 相关阅读:
    “无法更新EntitySet“*****”,因为它有一个DefiningQuery,而元素中没有支持当前操作的元素”问题的解决方法
    Web.Config全攻略
    C#常用的正则
    Asp.Net MVC2 Json
    webservice+Jquery返回Json格式【原创】
    JAVA线程池介绍以及简单实例
    从程序员到项目经理(17):你不是一个人在战斗思维一换天地宽
    SELECT INTO 和 INSERT INTO SELECT 两种表复制语句
    多表对应更新(跨服务器).sql
    sql导出excel.sql
  • 原文地址:https://www.cnblogs.com/ranmofang/p/3753353.html
Copyright © 2020-2023  润新知