前端常用功能记录(一)

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

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