使用JQuery可以直接在页面上引用谷歌上的网址，这样就可以使用jQuery中的函数了
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
第一个例子：多选框的全选功能
<script src="/jquery/jquery-1.11.1.min.js"></script>
<div class="xuanze">
<input type="checkbox"/>one
<input type="checkbox"/>two
<input type="checkbox"/>three
<input type="checkbox"/>four
</div>
<input type="checkbox" id="quanxuan" οnclick="qx()"/>全选
<button οnclick="quanxuan()">全选</button>
<button οnclick="delquanxuan()">取消全选</button>
<script>
//点击多选框全选，上面的多选框都选上
function qx()
{
var check = document.getElementById("quanxuan");
var xuanze = document.getElementsByTagName("input");
if (check.checked)
{
for (var i = 0; i < xuanze.length; i++)
xuanze[i].checked = true;
}
else {
for (var i = 0; i < xuanze.length; i++)
xuanze[i].checked =false;
}
}
//按钮全选
function quanxuan()
{
var xuanze = document.getElementsByTagName("input");
for (var i = 0; i < xuanze.length; i++)
{
xuanze[i].checked = true;
}
}
//按钮取消全选
function delquanxuan()
{
var xuanze = document.getElementsByTagName("input");
for (var i = 0; i < xuanze.length; i++)
{
xuanze[i].checked = false;
}
}
</script>
第二个例子：导航栏的活动的控制
<head>
<title>Bootstrap 实例 - 标签页（Tab）插件</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<!---导航栏-->
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
W3Cschool Home
</a>
</li>
<li>
<a data-toggle="tab" href="#anzhuo">安卓开发</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">Web开发</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>W3Cschoool菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
<div class="tab-pane fade" id="anzhuo">安卓开发</div>
</div>
</body>
！！！！导航栏，点击处于活动,jq实现
</div>
<ul class="nav nav-tabs">
<li id="wait" role="presentation" class="active"><a href="#">待盖章</a></li>
<li id="complete" role="presentation"><a href="#">已盖章</a></li>
</ul>
<script type="text/javascript">
$("#wait").bind("click", function () {
$(this).addClass("active");
$("#complete").removeClass("active");
$("#Wait").show();
$("#Complete").hide();
});
$("#complete").bind("click", function () {
$(this).addClass("active");
$("#wait").removeClass("active");
$("#Wait").hide();
$("#Complete").show();
});
</script>
效果图：
2.
<div>
<ul id="head_choice" class="nav nav-tabs">
<li role="presentation" class="active"><a>发文单</a></li>
<li role="presentation"><a>附件</a></li>
<li role="presentation"><a>正文</a></li>
<li style="float: right; margin-right: 10px; margin-top: 3px;">
<button id="shift" type="button" class="btn btn-default">转核稿</button></li>
<li style="float: right; margin-right: 10px; margin-top: 3px;">
<button id="save" type="button" class="btn btn-default">保存</button></li>
</ul>
</div>
$("#attachment").hide();
$("#mainContent").hide();
$("#head_choice li:eq(0)").click(function () {
$(this).addClass("active");
$("#head_choice li:eq(1)").removeClass("active");
$("#head_choice li:eq(2)").removeClass("active");
$("#writeDraft").show();
$("#attachment").hide();
$("#mainContent").hide();
});
$("#head_choice li:eq(1)").click(function () {
$(this).addClass("active");
$("#head_choice li:eq(0)").removeClass("active");
$("#head_choice li:eq(2)").removeClass("active");
$("#attachment").show();
$("#writeDraft").hide();
$("#mainContent").hide();
});
$("#head_choice li:eq(2)").click(function () {
$(this).addClass("active");
$("#head_choice li:eq(0)").removeClass("active");
$("#head_choice li:eq(1)").removeClass("active");
$("#mainContent").show();
$("#writeDraft").hide();
$("#attachment").hide();
});
效果图：
一个样式
<div id="div1" class="pad">
<div class="paddingBottom" style="height: 500px; width:100%;">
<div class="round1 paddingRight" style="width: 65%;">
<div class="d2 ">
<table class=" table table-hover table-striped" border="0">
<thead>
<tr>
<th><span class="glyphicon glyphicon-folder-close">项目名称</span></th>
<th>结束日期</th>
<th>状态</th>
<th>总统计</th>
<th>总消耗</th>
<th>总剩余</th>
<th>进度</th>
<th>燃尽图</th>
</tr>
</thead>
</table>
<div class="d1" style="height:184px;">
<table class=" table table-hover table-striped" border="0">
<tbody>
<tr>
<td><a href="#">一级任务</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td><a href="#">分中心</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td><a href="#">11111111</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td><a href="#">22222222</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td><a href="#">22222222</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td><a href="#">22222222</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="d2 " style=" margin-top:2%">
<table class=" table table-hover table-striped" border="0">
<thead>
<tr>
<th><span class="glyphicon glyphicon-th-large"></span> 产品名称</th>
<th>激活</th>
<th>已变更</th>
<th>草稿</th>
<th>已关闭</th>
<th>计划数</th>
<th>发布数</th>
<th>相关BUG</th>
<th>未解决</th>
</tr>
</thead>
</table>
<div class=" d1" style="height:185px;">
<table class=" table table-hover table-striped" border="0">
<tbody>
<tr>
<td><a href="#">计划单</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td><a href="#">测试</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td><a href="#">内镜工作站系统</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td><a href="#">小胖子</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td><a href="#">小胖子</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td><a href="#">小胖子</a></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="round1" style="width: 33%;">
<div class="d3 " style="float: right; clear: left;">
<div class="panel-body">
<span class="glyphicon glyphicon-volume-up">更多动态</span>
<span style="float: right;"><a style="color:white;"href="#">更多</a></span>
</div>
<div class=" d1" style="height:440px;">
<table class="table table-hover table-striped" border="0">
<tbody>
@for (var i = 0; i < 15; i++)
{
<tr>
<td>内镜工作站系统</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div style="height: 250px;">
<div class=" round1 paddingRight" style="width: 32%;">
<div class="d3 ">
<div class="panel-body">
<span class="glyphicon glyphicon-th-list">我的待办</span>
<span style="float: right;"><a style="color:white;" href=" #">更多</a></span>
</div>
<table class=" table table-hover table-striped" border="0">
<tbody>
<tr>
<td>
<span class="badge">1</span>
你有未读信息
</td>
</tr>
<tr>
<td>
<span class="badge">1</span>
你有未读信息
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="round1 paddingRight" style="width: 33%;">
<div class="d3 ">
<div class="panel-body">
<span class="glyphicon glyphicon-tasks">我的任务</span>
<span style="float: right;"><a style="color:white;" href="#">更多</a></span>
</div>
<table class=" table table-hover table-striped" border="0">
<tbody>
<tr>
<td>
<span class="badge">1</span>
你有未读信息
</td>
</tr>
<tr>
<td>
<span class="badge">1</span>
你有未读信息
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="round1" style="width: 33%;">
<div class="d3">
<div class="panel-body">
<span class="glyphicon glyphicon-cog">我的bug</span>
<span style="float: right; "><a style="color:white;" href="#">更多</a></span>
</div>
<table class="table table-hover table-striped" border="0">
<tbody>
<tr>
<td>
<span class="badge">1</span>
你有未读信息
</td>
</tr>
<tr>
<td>
<span class="badge">1</span>
你有未读信息
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
.pad {
padding: 20px;
}
.paddingRight {
padding-right: 20px;
}
.paddingBottom {
padding-bottom: 20px;
}
.round1 {
height: 100%;
float: left;
clear: right;
}
.d1 {
overflow-y: auto;
overflow-x: hidden;
}
.d2 {
width: 100%;
height: 48%;
border: 1px solid #e0d6d6;
}
.d3 {
width: 100%;
height: 100%;
border: 1px solid #e0d6d6;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 0px;
}
table.table {
clear: both;
margin-top: 0px !important;
margin-bottom: 0px !important;
max-width: none !important;
}
.table > thead > tr > th {
border-bottom: 0px;
padding: 10px;
}
.table > tbody > tr > td {
padding: 9px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
.th1 {
height: 42px;
text-align: center;
background-color: #428bca;
font-weight: normal;
color: white;
padding: 3px;
}
.td1 {
height: 31px;
text-align: center;
width: 40px;
}
.th1:first-child {
text-align: left;
width: 17%;
}
.td1:first-child {
text-align: left;
width: 17%;
}
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #428bca;
border-radius: 10px;
float: right;
}
.badgeNoRight {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #428bca;
border-radius: 10px;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.panel-body {
text-align: left;
height: 40px;
background-color: #428bca;
padding: 10px;
font-weight: normal;
color: white;
}
::-webkit-scrollbar-track-piece {
background-color: #CCCCCC;
-webkit-border-radius: 3px;
}
$("#attachment").hide();
$("#mainContent").hide();
$("#head_choice li:eq(0)").click(function () {
$(this).addClass("active");
$("#head_choice li:eq(1)").removeClass("active");
$("#head_choice li:eq(2)").removeClass("active");
$("#writeDraft").show();
$("#attachment").hide();
$("#mainContent").hide();
});
$("#head_choice li:eq(1)").click(function () {
$(this).addClass("active");
$("#head_choice li:eq(0)").removeClass("active");
$("#head_choice li:eq(2)").removeClass("active");
$("#attachment").show();
$("#writeDraft").hide();
$("#mainContent").hide();
});
$("#head_choice li:eq(2)").click(function () {
$(this).addClass("active");
$("#head_choice li:eq(0)").removeClass("active");
$("#head_choice li:eq(1)").removeClass("active");
$("#mainContent").show();
$("#writeDraft").hide();
$("#attachment").hide();
});
$(document).ready(function () {
$(".d2").addClass("panel");
$(".d3").addClass("panel");
$("#div1 th").addClass("th1");
$("#div1 td").addClass("td1");
$("#div1 th:first-child").addClass("th1:first-child");
$("#div1 td:first-child").addClass("td1:first-child");
//$(".table").dataTable();
//$(".table tbody").on('click', 'tr', function () {
// var name = $('td', this).eq(0).text();
// alert('你点击了 ' + name + '这行');
//});
});
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#006000/*#b8c4cb*/,
endColorStr=#f6f6f8); /*IE*/
background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ }
1206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
