underscore demo 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8"/>
 5     <meta name="viewport" content="width=device-width"/>
 6     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 7     <script src="underscore.js"></script>
 8     
 9 </head>
10 <body>
11     <!-- ace-template demo-->
12     <script id="t2" type="text/template">
13         <% _.each(datas, function(item) {%>
14             <div class="outer">
15                 <div class="title">
16                     <span><%= item.film%></span>
17                 </div>
18                 <ul class="ul">
19                     <% _.each(datas, function(item) {%>
20                         <li>
21                             <a href="<%= item.url %>">【<%= item.title%>】</a>
22                         </li>
23                     <%});%>
24                 </ul>
25             </div>
26         <%});%>
27     </script>
28     
29     <!-- data -->
30     <script>
31         var datas = [{
32                 title: "1942",
33                 url: "http://www.baidu.com",
34                 film: "film1"
35             },{
36                 title: "少年派的漂流",
37                 url: "http://www.baidu.com",
38                 film:"电影2"
39             },{
40                 title: "教父",
41                 url: "http://www.baidu.com",
42                 film: "电影3"
43             },
44             {
45                 title: "肖申克的救赎",
46                 url: "http://www.baidu.com",
47                 film: "电影4"
48             },
49             {
50                 title: "3d2012",
51                 url: "http://www.baidu.com",
52                 film:"电影5"
53             }];
54         
55         $("body").html(_.template($("#t2").html(), datas));
56     </script>
57     
58     <script type="text/javascript">
59         $(".ul").hide();
60         
61         $(".ul>li:last-child").addClass("last-li");
62         
63         $("body>div:first-child>ul").show();
64         
65         $(".title").click(function() {
66             $(this).siblings().toggle();
67             $(this).parent().siblings().children(".bbs-nav-ul").hide();
68         });
69         
70         $(".title").hover(function() {
71             $(this).toggleClass("hover");
72         });
73         
74         $(".ul>li").hover(function() {
75             $(this).toggleClass("hover");
76         });
77     </script>
78 </body>
79 </html>
View Code

 

posted @ 2013-08-16 17:49  daishuguang  阅读(251)  评论(0)  编辑  收藏  举报