index.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. {extend name="layout/layout" /}
  2. {block name="title"}分类{/block}
  3. {block name="css"}
  4. <!-- 这里引入css -->
  5. <link href="{:client_asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
  6. <link href="{:client_asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
  7. {/block}
  8. {block name="zepto"}
  9. <!-- 这是zepto插件 -->
  10. {/block}
  11. {block name="menu_title"}分类{/block}
  12. {block name="main"}
  13. <!-- 这是正文 -->
  14. <div class="body_sytle">
  15. <div class="c_list_box">
  16. <div class="c_list_tab_box">
  17. <a href="javascript:;" {neq name="sex" value="2"} class="hover" {/neq} sex="1">男生</a>
  18. <a href="javascript:;" {eq name="sex" value="2"} class="hover" {/eq} sex="2">女生</a>
  19. </div>
  20. <ul class="c_list_ul"></ul>
  21. </div>
  22. </div>
  23. {/block}
  24. {block name="footer"}
  25. <!-- 这里引入底部footer -->
  26. <!--活动弹框-->
  27. <div {empty name="activityRes"}style="display: none;" {else /}data-type="1"{/empty} class="christmas_popup_box">
  28. <div class="christmas_body">
  29. <div class="christmas_main">
  30. <a href="javascript:;" class="christmas_close_2"></a>
  31. {notempty name="$activityRes"}
  32. <a href="/s/0?rid={$activityRes.id}&aid={$activityRes.aid}" class="christmas_main_but"><img src="{$activityRes.popimage}" /></a>
  33. {/notempty}
  34. </div>
  35. </div>
  36. <div class="christmas_jgb"></div>
  37. </div>
  38. {/block}
  39. {block name="js"}
  40. <!-- 这里引入js -->
  41. <script type="text/javascript">
  42. $(function(){
  43. var sex = {$sex};
  44. loadCategories(sex);
  45. $(".c_list_tab_box > a").click(function(){
  46. $(this).addClass("hover");
  47. $(this).siblings().removeClass("hover");
  48. var sex = $(this).attr("sex");
  49. loadCategories(sex);
  50. });
  51. })
  52. function loadCategories(sex){
  53. var opposite = (sex==1) ? 2 : 1;
  54. $(".sex_"+opposite).hide();
  55. if(!$(".sex_"+sex).length){
  56. makeCategoryHtml(sex);
  57. }
  58. $(".sex_"+sex).show();
  59. }
  60. function makeCategoryHtml(sex){
  61. $.get("/clientwebapi/category/channelcategoriesapi",{'sex':sex},function(data){
  62. $.each(data,function(key,value){
  63. var imgList = [
  64. "{:client_asset('/img/frontend/banner/classify_icon_1.png')}",
  65. "{:client_asset('/img/frontend/banner/classify_icon_2.png')}",
  66. "{:client_asset('/img/frontend/banner/classify_icon_3.png')}",
  67. "{:client_asset('/img/frontend/banner/classify_icon_4.png')}",
  68. "{:client_asset('/img/frontend/banner/classify_icon_5.png')}",
  69. "{:client_asset('/img/frontend/banner/classify_icon_6.png')}",
  70. "{:client_asset('/img/frontend/banner/classify_icon_7.png')}"
  71. ];
  72. var simg = imgList[(key % 7)];
  73. if(value.image){
  74. simg = value.image;
  75. }
  76. var item = '<li class="sex_'+sex+'">';
  77. item +='<a href="/clientweb/category/books?book_category_id='+value.id+'" category-id="'+value.id+'">';
  78. item +='<span>' +value.name+ '</span>';
  79. item +='</a>';
  80. item +='</li>';
  81. $("ul.c_list_ul").append(item);
  82. });
  83. });
  84. }
  85. </script>
  86. {/block}