一直没有勇气来写与前端相关的博客，着实因为前端太烂。直至近几天把《暗时间》这本书看完，才鼓起...
一直没有勇气来写与前端相关的博客，着实因为前端太烂。直至近几天把《暗时间》这本书看完，才鼓起勇气。
不愿意写的原因着实许多，主要因为网上与前端相关的资料太多了，而且各种成熟的框架都有了，写这些东西略显"浅薄"。anyway，记录一些通用的东西还有一些细节，对掌握基础功能还是有帮助的。
主要记录一些常用的前端的功能(express框架，ejs模板引擎)，不过运行的前提需要引入一些前端包，如jquery，bootstrap，datatables等等。若引入特殊的包下面会提到。
tab之间切换
这里仅以2个tab为例，多个tab切换类似。
场景：选择不同的tab会切换到对应的tab，同时，两个tab对应不同的下拉框，当选择不同的panel是，下拉框的内容动态生成。
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>关于tab切换有个常用的功能是如何得知某个tab当前处于激活状态，然后进行相关操作，获取当前tab激活状态：
var tag = '';var isActive = document.getElementById("Tab1").getAttribute("class");if (isActive === 'active') { tag = 'tab1 is active'; } else { tag = 'tab2 is active'; }
下拉框选定一级选项后自动关联相关二级选项
这个本质上就是key-value的对应关系
场景：选择一级菜单后，对应的二级菜单会关联变化，防止用户选错
html:
<label class="col-lg-2">一级下拉框:</label> <div class="col-lg-4"> <select style="width:80%" class="select2" id="first"> <option></option> <!--初始化select下拉框的值--> <% for(var i in Object.keys(datadict.data)) {%> <option value="<%= Object.keys(datadict.data)[i] %>"><%= Object.keys(datadict.data)[i] %></option> <% } %> </select> </div> <label class="col-lg-2">二级下拉框:</label> <div class="col-lg-4"> <select style="width:80%" class="select2" id="second"> <option></option> </select> </div>js：
$(document).ready(function() { var datadict = {data:{name:['小胖','小杰','小明']}, {hobby:['play guitar','study','play games']}, {species:['cat','dog','horse','fish']}, {other:['elephant','dophin']} } //选定一级后，自动关联二级 $('#first').click(function(){ var first = $('#first').val(); //获取一级菜单的选中值[name,hobby,species,other] var sec = datadict.data[first] ; //alert(sec); $('#second').empty() $('#second').append('<option></option>'); for(var i in sec) { var option = $('<option value="' + sec[i] + '">').html(sec[i]); $('#second').append(option); } });});</script>这里想表明的其实是在html里直接初始化数据的方式，若是从后端传过来的json格式的数据，需要在document里处理一下：
var datadict = <%- JSON.stringify(datadict) %>;
点击按钮弹出对话框
这里只给出modal的一个框架，实际弹出的modal可以有很丰富的内容
场景：点击弹出对话框，对话框可以是程序执行的结果，也可以与用户交互的对象。
html:
<div class='container'> <div class="col-lg-1"> <button id="addButton" class="btn btn-primary">弹出对话框</button> </div></div><!-- Modal --><div class="modal fade" id="myTestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">对话框</h4> </div> <div class="modal-body"> </div> <!-- /.modal-body --> <div class="modal-footer"> <button id="submitBtn" type="button" class="btn btn-primary">确定</button> <button type="button" class="btn btn-dark" data-dismiss="modal">关闭</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --></div> <!-- /.modal -->js：（这种script的方式是jquery的形式，类似上述document）
<script type="text/javascript">+ function($) { $(function() { $('#addButton').on('click', function() { $('#myTestModal').modal('show'); //点击按钮显示对话框,因为对话框默认是隐藏的,aria-hidden="true" }); });}(window.jQuery);</script>
点击每行按钮只操作对应的行
这个其实只要id唯一，然后id又是与操作的数据有一定关系（一般二者相等），则可实现对应操作
场景：这个常见于每行表格最后或开始有个操作的按钮，仅对所在的行进行操作。
html:
<td><a class="btn btn-primary details" role="button" id="<%= data['id'] %>">详情</a></td>这里简化了，没有具体数据，只是说了思路，关键就是如何获取当前点击元素的id值
js:
<script type="text/javascript">+ function($) { $(function() { $('#table1').delegate('.details','click',function(){ var btnId = $(this).attr('id');//获取当前点击的按钮的id值 $('#detailModal').modal('show'); }); });}(window.jQuery);</script>
JS里动态生成表格
场景：点击按钮时候生成一个动态数据的表格
html：
仅仅是一个button和一个div
<div class="col-lg-2"> <button id="addTableBtn" type="button" class="btn btn-primary col-lg-12">点击我</button></div><br/><div id="relatesContainer" class="col-lg-6"></div>js:
<script type="text/javascript">+ function($) { $(function() { var data = [['小胖','BI Leader','handsome!'], ['小杰','OPS Developer','humours!'], ['小明','Protect China','play games all day!']]; $('#addTableBtn').click(function() { var table = $('<table class="table">'); var tbody = $('<tbody>'); var tr = $('<tr>'); var name = $('<td><B>name</B></td>'); var job = $('<td><B>job</B></td>'); var description = $('<td><B>description</B></td>'); tr.append(name); tr.append(job); tr.append(description); tbody.append(tr); for (var i in data) { var data = data[i]; //alert(i); //0,1,2 var tr = $('<tr>'); var name = $('<td>' + data[i][0] + '</td>'); //另一种方式 var job = $('<td>'); var description = $('<td>'); job.html('<font color="red">' + data[i][1] + '</font>'); description.html('<font color="green">' + data[i][2] + '</font>'); tr.append(name); tr.append(job); tr.append(description); tbody.append(tr); } table.append(tbody); $('#relatesContainer').append(table); }); });}(window.jQuery);</script>append是追加子元素，给元素有两种方式，一种则是字符串拼接，另一种是使用元素的属性给予赋值。
时间格式化显示
场景：仅显示日期，不显示时间部分，并且指定时间格式
html：
<span> <input id='start' class="datetimepicker" /></span>js:
<script type="text/javascript">$(document).ready(function() { //仅仅将input标签初始化时间控件 $('.datetimepicker').datetimepicker(); //初始化时间控件仅显示日期部分 $('.datetimepicker').datetimepicker({ timepicker:false, format:'Y/m/d' });});</script>
作者：zhoujie
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，不然我担心博客园找你算账
如果您觉得本文对你有帮助，请竖起您的大拇指右下角点推荐，也可以关注我
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
