html与javascript之动态篇

JavaScript
JavaScript

以下所讲内容采用bootstrap模板，jquery库，对于原生html大致也同样适用

一、侧边栏分页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 <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页面中改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <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对话框

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

modal为嵌入在html div中的html隐藏文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>

三、按钮触发事件

1
2
3
4
5
6
7
8
9
10
 <input type="submit" class="btn btn-primary" name="pass" value="通过所选"></input>
<script type="text/javascript">
$(document).ready(function(){
$("input[name='pass']").click(function(){
check("hidden-value2")
})
})
 </script>

监听name为pass的按钮点击事件，当成也可以在button中添加onclick方法。

四、获取table的行列的文本内容，或是值

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

解释：获取tbody—，得到其下tr标签的个数。

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

解释：获取

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

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

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

假设监听的对象的id=”chk_all2”，另外需置所有的checkbox的name=”transPro2”

1
2
3
4
5
6
7
8
9
10
11
 //<!--全选与全不选的操作（点击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-->

1.可以类似QQ邮箱那样用checkbox控制checkbox

1
2
3
4
5
<input type="checkbox" name="transPro2" id="chk_all2"/>
2.用点击文本的方式控制则为:
```html
<a href="javascript:void(0)" id="allSelect2" >全部</a>

而javascript改为

1
2
3
4
5
6
7
 <script type="text/javascript">
$(document).on("click","#allSelect2",function(){
var $checkboxs =$("input[name='transPro2']")
$checkboxs.prop("checked",true)
})
 </script>

注意有些人喜欢将

1
href="javascript:void(0)"

改为href=”#”，但这样的话点击之后会使页面回到页首部，太过突兀。

Comments