• 引用POPUI来实现弹窗效果,且弹窗中的内容可以点击事件


    seajs.use(['../js/ui/dialog'],function(){
            $('.center-button').bind('click',function(){ 
                var $dlg = $.dialog({ 
                    title:'确认/调整九宫格位置', 
                    995,
                    source: $('#dlg_d1').html()
                }); 
    
                $dlg.delegate('.zuobiaoxi td', 'click', function() {
                  $(this).addClass('td_curr').siblings().removeClass('td_curr').parents().siblings().find('td').removeClass('td_curr');
                  $(this).find('.round').addClass('curr').parents().siblings().find('.round').removeClass('curr');
                })
                $dlg.delegate('.c-button .cancel','click',function(){
                        $dlg.close();
                    });
            }); 
        });

    上述代码调用了本地的dialog.js文件,可以建立弹窗,弹窗$.dialog返回给var $dlg,然后使用函数delegate给对象$dlg的子元素.zuobiaoxi 绑定click事件:

    其中html为:(其实是JavaScript格式)

    <script id="dlg_d1" type="text/template">
    <div class="mess-dialog">
      <div class="dia-content">
        <div class="dia-left"><img src="./img/foot-pic.png"></div>
        <div class="dia-right">
          <span>陈道明</span><em>T3-1</em>
          <p>部门:京东商城——华北区域分公司——配送部——分拣中心管理部——固安一级分公司...</p>
        </div>
        <div class="clear"></div>
        <div class="zuobiaoxi">
          <table cellpadding="0" cellspacing="0">
            <tr><td><div class="round">6</div>熟练员工</td><td><div class="round">8</div>绩效之星</td><td><div class="round">9</div>熟练员工</td></tr>
            <tr><td><div class="round">3</div>熟练员工</td><td><div class="round">5</div>绩效之星</td><td class="td_curr"><div class="round curr">7</div>熟练员工</td></tr>
            <tr><td><div class="round">1</div>熟练员工</td><td><div class="round">2</div>绩效之星</td><td><div class="round">4</div>熟练员工</td></tr>
          </table>
          <div class="c-button">
           <button class="cancel">取消</button>
          <button class="sure">确认</button>
          </div>
    
        </div>
      </div>
    </div>
    </script>

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

  • 相关阅读:
    洛谷—— P3353 在你窗外闪耀的星星
    洛谷—— P1238 走迷宫
    洛谷—— P1262 间谍网络
    9.8——模拟赛
    洛谷—— P1189 SEARCH
    算法
    May 22nd 2017 Week 21st Monday
    May 21st 2017 Week 21st Sunday
    May 20th 2017 Week 20th Saturday
    May 19th 2017 Week 20th Friday
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/5893623.html
Copyright © 2020-2023  润新知