前端常用功能记录(一)(转)

　　一直没有勇气来写与前端相关的博客，着实因为前端太烂。直至近几天把《暗时间》这本书看完，才鼓起勇气。

不愿意写的原因着实许多，主要因为网上与前端相关的资料太多了，而且各种成熟的框架都有了，写这些东西略显"浅薄"。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>

 关于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是追加子元素，给元素有两种方式，一种则是字符串拼接，另一种是使用元素的属性给予赋值。

 

时间格式化显示

场景：仅显示日期，不显示时间部分，并且指定时间格式

包：daterangepicker.js

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>

 http://www.cnblogs.com/zhoujie/p/js1.html