一直没有勇气来写与前端相关的博客，着实因为前端太烂。直至近几天把《暗时间》这本书看完，才鼓起勇气。
不愿意写的原因着实许多，主要因为网上与前端相关的资料太多了，而且各种成熟的框架都有了，写这些东西略显"浅薄"。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
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，不然我担心博客园找你算账
如果您觉得本文对你有帮助，请竖起您的大拇指右下角点推荐，也可以关注我