zoukankan      html  css  js  c++  java
  • 引用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() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

  • 相关阅读:
    JavaScript 获得今天的日期 (yy-mm-dd)格式
    web前端筛选页面(类似大众点评)
    JS 获取浏览器的名称和版本信息
    java 接收json数据
    指定配置文件启动mongodb
    linux写一个定时任务
    windows杀死占用端口
    mongodb聚合操作汇总
    jpa常用查询
    idea 更换主题
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/5893623.html
Copyright © 2011-2022 走看看