Layer UI基础使用

最新推荐文章于 2024-05-15 11:25:51 发布

Future、Martin

最新推荐文章于 2024-05-15 11:25:51 发布

阅读量4.9k

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/qq_756589808/article/details/79805494

版权

1 篇文章 0 订阅

订阅专栏

  1、加载页面时马上加载数据： 

  layui.use('layer', function() { 

                      var $ = layui.jquery, 

                          layer = layui.layer; 

                  layer.ready(function() { 

                      layer.msg('很高兴一开场就见到你'); 

});

});

  ready:进行Ajax请求，获取数据 

  2、数据渲染 

  <body> 

          <div id="view"></div> 

      </body> 

  //自定义渲染模板 

      <script id="demo" type="text/html"> 

          <h1>{{ d.title }}</h1> 

          <ul> 

              {{# for(var i = 0, len = d.list.length; i 

              < len; i++){ }} <li> 

                  <span>姓名：{{ d.list[i].name }}</span> 

                  <span>城市：{{ d.list[i].city }}</span> 

                  </li> 

                  {{# } }} 

          </ul> 

      </script> 

  //渲染数据 

  <script> 

          //第三步：渲染模版  

          var data = { 

              title: '前端攻城师', 

              list: [{ 

                  name: '贤心', 

                  city: '杭州' 

              }, { 

                  name: '谢亮', 

                  city: '北京' 

              }, { 

                  name: '浅浅', 

                  city: '杭州' 

              }, { 

                  name: 'Dem', 

                  city: '北京' 

}]

};

          var gettpl = document.getElementById('demo').innerHTML; 

          laytpl(gettpl).render(data, function(html) { 

              document.getElementById('view').innerHTML = html; 

});

      </script> 

  2. 子页面操作： 

 
 1、访问父页面元素值 

 
 var 
  parentId=parent.$( 
 "#id" 
 ).val(); 
 //访问父页面元素值 
   

 
 2、访问父页面方法 

 
 3、如何关闭弹出的子页面窗口 

 
 4、如何从子页面执行刷新父页面操作 

 
 5.传值 

 
 $('#sayHello').click(function () {   

 
         top.layer.open({   

 
             id: "layer_say_hello",   

 
             type: 2,   

 
             title: '打招呼',   

 
             shadeClose: true,   

 
             shade: 0.8,   

 
             area: ['500px', '400px'],   

 
             content: '/Findfriend/Part_SayHello', //iframe的url   

 
             success: function (layero, index) {   

 
                 var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素   

 
                 var her_nickname = $("#nickname").text();   //nickname 是 HomeFrame的元素   

 
                 // layero.find("iframe")        找到iframe的jquery对象   

 
                 // layero.find("iframe")[0]     将jqeruy对象转化为Dom对象   

 
                 // contentWindow                获取当前 iframe 的 内容 window对象（Dom对象）   

 
                 //.send-hello 是 LayerFrame 的元素   

 
                 var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);   

 
                 jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);   

 
                 jquerySendHelloButton.attr("data-her-nick-name", her_nickname);   

}

});

})

关注

专栏目录