一直没有勇气来写与前端相关的博客,着实因为前端太烂。直至近几天把《暗时间》这本书看完,才鼓起勇气。
不愿意写的原因着实许多,主要因为网上与前端相关的资料太多了,而且各种成熟的框架都有了,写这些东西略显"浅薄"。anyway,记录一些通用的东西还有一些细节,对掌握基础功能还是有帮助的。
主要记录一些常用的前端的功能(express框架,ejs模板引擎),不过运行的前提需要引入一些前端包,如jquery,bootstrap,datatables等等。若引入特殊的包下面会提到。
tab之间切换
这里仅以2个tab为例,多个tab切换类似。
场景:选择不同的tab会切换到对应的tab,同时,两个tab对应不同的下拉框,当选择不同的panel是,下拉框的内容动态生成。
包:select2.js
html: <div class="col-lg-4"> <div class="panel panel-default"> <ul class="nav nav-tabs nav-justified" role="tablist"> <li id="Tab1" class="active"><a href="#">面板1</a></li> <li id="Tab2"><a href="#">面板2</a></li> </ul> </div> </div> <label class="col-lg-2">下拉选项:</label> <div class="col-lg-4"> <select style="width:80%" class="select2" id="dropdown"> <option></option> </select> </div> js: $(document).ready(function() { $(".select2").select2( { placeholder: "请选择" } ); var option1 = ['赵','钱','孙','李'] var option2 = ['周','吴','郑','王'] $('#Tab1').click(function(){ $('.nav li').removeClass('active'); $('#Tab1').addClass('active'); //绑定Tab1的option $('#dropdown').empty() //清空选项值 $('#dropdown').append('<option></option>'); //动态给select添加option选项 for(var i in option1) { var option = $('<option value="' + option1[i] + '">').html(option1[i]); $('#dropdown').append(option); } }); $('#Tab2').click(function(){ $('.nav li').removeClass('active'); $('#Tab2').addClass('active'); //绑定Tab2的option $('#dropdown').empty() $('#dropdown').append('<option></option>'); for(var i in option2) { var option = $('<option value="' + option2[i] + '">').html(option2[i]); $('#dropdown').append(option); } }); }); </script> |