JavaScript type="text/template"的用法

JavaScript type="text/template"相当于定义一个模板,如果没有使用html()方法的话,是显示不出来的,我们直接看例子(我是在tp框架的里面写的)

 1 <div class="container"> 2 <div class="waterfall"> 3 </div> 4 </div> 

定义一个模板:

 1 <!-- 一个模板  -->
 2 <script id="waterfall-template" type="text/template">
 3     <?php foreach ($list as $key => $value) { ?>
 4     <ul class="list-group">
 5         <li class="list-group-item">
 6             <a href="javascript:;"><img src="<?php echo $value['banner_image']; ?>" /></a>
 7         </li>
 8         <li class="list-group-item">
 9             <a href="{:U('Admin/Banner/banner_detail',array('banner'=>$value['banner_id']))}"><button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="fa fa-pencil"></span></button></a>
10             <a href="#myModal" class="del_btn" role="button" data-toggle="modal" data-banner="<?php echo $value['banner_id']; ?>"><button type="button" class="btn btn-default btn-xs"><i class="fa fa-trash-o"></i></button></a>
11             <span style="float: right;"><?php echo $value['banner_type'] == 1?'首页':'';?></span>
12         </li>
13     </ul>
14     <?php } ?>
15 </script>

使用:

 1 <script>
 2     $('.waterfall').data('bootstrap-waterfall-template', $('#waterfall-template').html()).waterfall();
 3     var del_data = null;
 4     $(".waterfall").on('click','.del_btn',function(){
 5         del_data = $(this).attr('data-banner');
 6     });
 7     $('.btn-danger').click(function(){
 8         if (del_data) {
 9             window.location.href = '{:U("Admin/Banner/banner_del")}?banner_id=' + del_data;
10         }
11     });
12 </script>

 参考其他人的资料:http://www.cnblogs.com/olivianate/p/5364850.html

我这里的案例是写一个流水布局的。waterfall()

posted @ 2017-08-28 11:15  1O(∩_∩)O1  阅读(990)  评论(0编辑  收藏  举报