Bootstrap 插件【四】
学习要点
- 附加导航
- 颜色选择器
- 日期选择器
1.附加导航
第一种：data调用
<!-- data-spy="scroll" data-target="#menu" 设置滚动监听和对象 -->
<body data-spy="scroll" data-target="#menu">
<!-- hero-unit hero单元，显示网站信息 -->
<div class="hero-unit">
<h3>site name</h3>
<button type="button" class="btn btn-large btn-success">content</button>
</div>
<div class="row-fluid">
<!-- id="menu"与body中的data-target对应 -->
<!-- 导航菜单 -->
<div class="span3" id="menu">
<!-- nav nav-list 导航 -->
<!-- data-spy="affix" 附加导航 -->
<ul class="nav nav-list" data-spy="affix" data-offset-top="280">
<li><a href="#1"><i class="icon-chevron-right"></i> 列表1</a></li>
<li><a href="#2"><i class="icon-chevron-right"></i> 列表2</a></li>
<li><a href="#3"><i class="icon-chevron-right"></i> 列表3</a></li>
</ul>
</div>
<!-- 信息主体 -->
<div class="span9">
<fieldset id="1">
<legend>列表1</legend>
<div class="fieldset-content">
<p><img src="img/1.jpg"></p>
</div>
</fieldset>
<fieldset id="2">
<legend>列表2</legend>
<div class="fieldset-content">
<p><img src="img/2.jpg"></p>
</div>
</fieldset>
<fieldset id="3">
<legend>列表3</legend>
<div class="fieldset-content">
<p><img src="img/3.jpg"></p>
</div>
</fieldset>
</div>
</div>css样式
.nav-list { top : 20px; }第二种：用JS控制
去除data-spy=”affix” data-offset-top=”280”
$(function () {
$(".nav-list").affix({
offset : {
top : 280,
}
});
});2.颜色选择器
使用颜色选择器
第一步：引入对应文件，在这里，Bootstrap文件不重复了
<link rel="stylesheet" type="text/css" href="colorpicker/img/colorpicker.css">
<script type="text/javascript" src="colorpicker/js/bootstrap-colorpicker.js"></script>第二步：编写html
<!-- color 颜色包含框 -->
<!-- data-color-format="rgb" 的格式 -->
<!-- data-color="rgb(255, 146, 180)"设置默认颜色值 -->
<div class="input-append color" data-color="rgb(255, 146, 180)" data-color-format="rgb">
<input type="text" class="span2" value="">
<!-- add-on 后缀 -->
<span class="add-on"><i style="background-color: rgb(255, 146, 180);"></span>
</div>第三步：触发JS文件
$(function () {
// 配置颜色选择器
$('.color').colorpicker({
// 格式，十六进制
format : "hex"
});
// 触发事件，当颜色选择器的颜色改变时，body的背景颜色也改变
$(".color").on("changeColor", function (e) {
$("body")[0].style.backgroundColor = e.color.toHex();
});
});3.日期选择器
使用和配置
第一步：导入插件
<link rel="stylesheet" type="text/css" href="datepicker/img/datepicker.css">
<script type="text/javascript" src="datepicker/js/bootstrap-datepicker.js"></script>第二步：编写html
<!-- data-date-format="yyyy-mm-dd" 设置日期格式-->
<!-- data-date-format="yyyy-mm-dd" 设置日期格式-->
<!-- data-date="2013-02-24" 设置日期默认值 -->
<!-- data-date-viewmode="years" 依次让用户选择日期的年->月->日 -->
<!-- data-date-minviewmode="months" 显示到月停止 -->
<div class="input-append date" id="date" data-date="2013-02-24" data-date-format="yyyy-mm-dd" data-date-viewmode="years" data-date-minviewmode="months">
<input class="span2" type="text" value="2013-02-24" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>第三步：编写JS，上述的属性也可以用JS来编写
$(function () {
$("#date").datepicker({
// 格式
format : "yyyy-mm-dd",
viewMode : "years"
});
});例子2：在规定的起始时间和终止时间内挑选时间
第一步：导入插件，不再累赘
第二步：编写html
<button class="btn small" id="start" data-date-format="yyyy-mm-dd" data-date="2013-05-20">起始日期</button>
<span id="startDate">2016-05-20</span><br>
<button class="btn small" id="end" data-date-format="yyyy-mm-dd" data-date="2013-06-20">结束日期</button>
<span id="endDate">2016-06-20</span><br>
<div class="alert alert-error" id="alert"></div>第三步：编写JS
$(function () {
var startDate = new Date(2016, 4, 20); // 2016-5-20
var endDate = new Date(2016, 5, 20); // 2016-6-20
// 警告框隐藏
$(".alert").hide();
$("#start").datepicker().on("changeDate", function (e) {
// 如果选择的起始时间的时间戳大于结束时间的时间戳，
// 那么就报错:起始日期不得大于终止日期
if (e.date.valueOf() > endDate.valueOf()) {
$("#alert").show().html("起始日期不得大于终止日期");
} else {
$("#alert").hide();
startDate = new Date(e.date);
// $("#start").data("date") 日期选择器的日期
$("#startDate").text($("#start").data("date"));
}
});
$("#end").datepicker().on("changeDate", function (e) {
// 如果选择的结束时间的时间戳小于起始时间的时间戳，
// 那么就报错:终止日期不得小于起始日期
if (e.date.valueOf() < startDate.valueOf()) {
$("#alert").show().html("终止日期不得小于起始日期");
} else {
$("#alert").hide();
endDate = new Date(e.date);
// $("#end").data("date") 日期选择器的日期
$("#endDate").text($("#end").data("date"));
}
});
});例子3：在指定范围选择日期
第一步：导入插件，不再累赘
第二步：编写html
<button class="btn small" id="start" data-date-format="yyyy-mm-dd" data-date="2016-05-20">起始日期</button><br>
<button class="btn small" id="end" data-date-format="yyyy-mm-dd" data-date="2016-06-20">结束日期</button>第三步：编写JS
$(function () {
var nowTemp = new Date();
// 实例化当前时间
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#start').datepicker({
// 当日期被选中高亮后
// 如果选择日期的时间戳 < 当前日期的时间戳
// 那么小于当前日期的日期都disabled掉
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(e) {
// 如果选择的起始日期的时间戳 > 终止日期的时间戳
// 那么终止日期等于当前选中的日期 + 1天
if (e.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(e.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#end')[0].focus();
}).data('datepicker');
var checkout = $('#end').datepicker({
// 当日期被选中高亮后
// 如果选择日期的时间戳 <= 起始日期的时间戳
// 那么小于起始日期的日期都disabled掉
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(e) {
checkout.hide();
}).data('datepicker');
});