zhoujie0111 阅读(133) 评论(0)

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

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