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()