html與javascript之動態篇

以下所講內容採用bootstrap模板，jquery庫，對於原生html大致也同樣適用

轉載前請貼上博客鏈接：http://blog.csdn.net/gugugujiawei

一、側邊欄分頁

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>
                            <!-- /input-group -->
                            
                        </li>  
                      	 
                        <li>
                            <a href="#"><i class="fa fa-wrench fa-fw"></i> 審覈業務<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="{% url 'user-review' %}">用戶審覈業務</a>
                                </li>
                                <li>
                                    <a href="{% url 'device-review' %}">設備審覈業務</a>                                  
                                </li>
                                <li>
                                    <a href="{% url 'middleware-review' %}">中間件審覈業務</a>
                                </li>

                            </ul>
                            <!-- /.nav-second-level -->
                        </li>                                                                                                
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->

當點擊某一項跳轉到另外頁面時，可以在相應的html頁面中改爲

<li class="active">
	<a href="#"><i class="fa fa-wrench fa-fw"></i> 審覈業務<span class="fa arrow"></span></a>
	<ul class="nav nav-second-level">
		<li>
			<a class="active" href="{% url 'user-review' %}">用戶審覈業務</a>
		</li>
		<li>
			<a href="{% url 'device-review' %}">設備審覈業務</a>                                  
		</li>
		<li>
			<a href="{% url 'middleware-review' %}">中間件審覈業務</a>
		</li>
	</ul>
 	<!-- /.nav-second-level -->
</li> 

二、單擊按鈕彈出modal對話框

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增用戶</button>

modal爲嵌入在html div中的html隱藏文本

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background:#d9edf7">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">
×
</button>
<h4 class="modal-title" id="myModalLabel">
新增用戶信息
</h4>
</div>                                                              
            <div class="modal-body form-horizontal">                       
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用戶名</label>
                    <div class="col-sm-10">
                    <input type="text" class="form-control" id="username" placeholder="用戶名">
                     </div>
                </div>                                                                                        
            </div>
            <div class="modal-footer">
                <input type="hidden" name="add-name" id="add-id"></input>
                <button class="btn btn-default" data-dismiss="modal" type="button">關閉</button>
                <input class="btn btn-primary" type="submit" name="addButton" value="確定"></input>
            </div>                        
</div>
</div>
</div>

三、按鈕觸發事件

<input type="submit" class="btn btn-primary" name="pass" value="通過所選"></input>

<pre name="code" class="javascript"><script type="text/javascript">
$(document).ready(function(){
$("input[name='pass']").click(function(){
check("hidden-value2");
});
});

</script>

監聽name爲pass的按鈕點擊事件，當成也可以在button中添加onclick方法。

四、獲取table的行列的文本內容，或是值

var rowsize = document.getElementById('user-history-body').getElementsByTagName('tr').length;

解釋：獲取tbody---<tbody id="user-history-body">，得到其下tr標籤的個數。

var td = document .getElementById ("dataTables-user-history").rows [i+1].cells[8].innerHTML;

解釋：獲取

<table class="table table-striped table-bordered table-hover" id="dataTables-user-history">

下tobody的第i+1行第8列的文本

五、checkbox的全選和全不選操作

假設監聽的對象的id="chk_all2"，另外需置所有的checkbox的name="transPro2"

<pre name="code" class="html">

                        //<!--全選與全不選的操作（點擊checkbox）-->
                        $(document).on("click","#chk_all2",function(){
                            var ischecked= $("#chk_all2:checked").length;
                            var $checkboxs =$("input[name='transPro2']");
                            if(ischecked){
                                $checkboxs.prop("checked",true);
                            }else{
                                $checkboxs.prop("checked",false);							 
                            }
                        });
                        //<!--end-->

<pre name="code" class="javascript">1、可以類似QQ郵箱那樣用checkbox控制checkbox

<input type="checkbox" name="transPro2" id="chk_all2"/>

<pre name="code" class="javascript">2、用點擊文本的方式控制則爲:

<a href="javascript:void(0)" id="allSelect2" >全部</a>

<pre name="code" class="javascript">而javascript改爲

<pre name="code" class="html"><script type="text/javascript">
$(document).on("click","#allSelect2",function(){
var $checkboxs =$("input[name='transPro2']");
$checkboxs.prop("checked",true);
});

</script> 

注意有些人喜歡將

 href="javascript:void(0)"

改爲href="#"，但這樣的話點擊之後會使頁面回到頁首部，太過突兀。