前端常用功能記錄(一)

　　一直沒有勇氣來寫與前端相關的博客，着實因為前端太爛。直至近幾天把《暗時間》這本書看完，才鼓起勇氣。

不願意寫的原因着實許多，主要因為網上與前端相關的資料太多了，而且各種成熟的框架都有了，寫這些東西略顯"淺薄"。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>