JavaScript type="text/template"的用法

最新推荐文章于 2021-11-16 21:19:37 发布

转载最新推荐文章于 2021-11-16 21:19:37 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/laijinquan/p/7442926.html

文章标签：

#javascript #php #ViewUI

本文介绍如何使用JavaScript结合PHP创建动态模板，并实现一个瀑布流布局。通过定义文本模板，利用foreach循环展示列表数据，同时引入交互式按钮进行操作。文章还提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>