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" >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');
});