bootstrap新闻模块样式模板

  1 <!--  news beginning -->
  2         <div class="container mp30">
  3             <div class="row">
  4                 <div class="col-md-4">
  5                     <div class="panel panel-default">
  6                         <div class="panel-heading">
  7                             <span class="glyphicon glyphicon-list-alt"></span><b>新闻</b></div>
  8                         <div class="panel-body">
  9                             <div class="row">
 10                                 <div class="col-xs-12">
 11                                     <ul class="demo1" id="news1">
 12                                         
 13                                     </ul>
 14                                 </div>
 15                             </div>
 16                         </div>
 17                         <div class="panel-footer">
 18 
 19                         </div>
 20                     </div>
 21                 </div>
 22                 
 23                 <div class="col-md-4">
 24                     <div class="panel panel-default">
 25                         <div class="panel-heading">
 26                             <span class="glyphicon glyphicon-list-alt"></span><b>新闻</b></div>
 27                         <div class="panel-body">
 28                             <div class="row">
 29                                 <div class="col-xs-12">
 30                                     <ul class="demo2" id="news2">
 31                                         
 32                                         
 33                                     </ul>
 34                                 </div>
 35                             </div>
 36                         </div>
 37                         <div class="panel-footer">
 38 
 39                         </div>
 40                     </div>
 41                 </div>
 42                 
 43                 <div class="col-md-4">
 44                     <div class="panel panel-default">
 45                         <div class="panel-heading">
 46                             <span class="glyphicon glyphicon-list-alt"></span><b>新闻</b></div>
 47                         <div class="panel-body">
 48                             <div class="row">
 49                                 <div class="col-xs-12">
 50                                     <ul class="demo2" id="news3">
 51                                         
 52                                         
 53                                     </ul>
 54                                 </div>
 55                             </div>
 56                         </div>
 57                         <div class="panel-footer">
 58 
 59                         </div>
 60                     </div>
 61                 </div>
 62             </div>
 63         </div>
 64 
 65         <!--  end news -->
 66 _________________________________________________
 67 var s = "";
 68             var f= "";
 69             var g="";
 70 
 71 
 72 
 73 $.each(response, function(index, value) {                                            
 74                     s+='<li class="news-item">';
 75                     s+='<table cellpadding="4">';    
 76                     s+='<tr>';
 77                     s+='<td><a href="'+basePath+'ajax/news-show.jsp?entity.id='
 78                             + value.id + '">'+value.title+'</a></td>';
 79                     s+='</tr></table></li>';
 80                     if(index==9)
 81                     return false;
 82                 })
 83             $("#news1").append(s);
 84             $.each(response, function(index, value) {    
 85                     if(index<=9)
 86                     {}
 87                     else
 88                     {
 89                         f+='<li class="news-item">';
 90                         f+='<table cellpadding="4">';    
 91                         f+='<tr>';
 92                         f+='<td><a href="'+basePath+'ajax/news-show.jsp?entity.id='
 93                                 + value.id + '">'+value.title+'</a></td>';
 94                         f+='</tr></table></li>';
 95                         if(index==20)
 96                         return false;
 97                     }                                        
 98                     
 99                 })
100             $("#news2").append(f);
101             $.each(response, function(index, value) {    
102                     if(index<=20){}
103                     else
104                     {
105                      g+='<li class="news-item">';
106                         g+='<table cellpadding="4">';    
107                         g+='<tr>';
108                         g+='<td><a href="'+basePath+'ajax/news-show.jsp?entity.id='
109                                 + value.id + '">'+value.title+'</a></td>';
110                         g+='</tr></table></li>';
111                         if(index==30)
112                         return false;
113                     }                                        
114                     
115                 })
116             $("#news3").append(g);

 

转载于:https://www.cnblogs.com/zzzzw/p/4849765.html