Bootstrap 外掛【四】
阿新 • • 發佈：2019-02-05
學習要點
- 附加導航
- 顏色選擇器
- 日期選擇器
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" 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');
});