Bootstrap組件系列之福利篇幾款好用的組件（推薦二）
在上篇文章給大家介紹了Bootstrap組件系列之福利篇幾款好用的組件(推薦)，接下來本文給大家介紹Bootstrap組件系列之福利篇幾款好用的組件（推薦二），感興趣的朋友一起學(xué)習(xí)吧！
七、多值輸入組件manifest
關(guān)于文本框的多值輸入，一直是一個(gè)比較常見的需求，今天博主推薦一款好用的多值輸入組件給大家，不要謝我，請叫我“紅領(lǐng)巾”！
1、效果展示
本地多值輸入框
遠(yuǎn)程多值輸入框
2、源碼說明
感謝開源社區(qū)，感謝那些喜歡分享的可愛的人兒。開源地址。
3、代碼示例
（1）本地多值輸入
首先需要引用如下幾個(gè)文件
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/jquery-manifest-master/src/jquery.manifest.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js"></script> <script src="~/Content/jquery-manifest-master/build/jquery.manifest.js"></script>
bootstrap的Js和css文件并非必須，本文是為了樣式好看，所以將其引用進(jìn)來。manifest組件不依賴bootstrap，但是依賴jQuery，除此之外還需要引用jquery.manifest.css、jquery.ui.widget.js、jquery.marcopolo.js三個(gè)文件。
然后就是html和js的初始化
<input type='text' autocomplete="off" id="txt_man" />
<script type="text/javascript">
$(function () {
$('#txt_man').manifest();
});
</script>
通過簡單如上簡單的步驟，上面的效果就可出來，是不是很簡單。簡單來看看它的一些用法
//常用屬性：得到文本框里面所有項(xiàng)的集合
var values = $('#txt_man').manifest('values');
//常用方法1：移除最后一項(xiàng)
$('#txt_man').manifest('remove', ':last');
//常用方法2：項(xiàng)文本框里面新增一項(xiàng)。第二個(gè)參數(shù)的格式由JSON數(shù)據(jù)的格式?jīng)Q定
$('#txt_man').manifest('add', {
id: "1",
name:"ABC"
});
//常用方法3：獲取遠(yuǎn)程搜索到的數(shù)據(jù)的列表
$('#txt_man').manifest('list');
//常用事件1：組件的新增項(xiàng)事件
$('#txt_man').on('manifestadd', function (event, data, $item, initial) {
//alert("新增的項(xiàng)為："+data);
});
//常用事件2：組件的移除項(xiàng)事件
$('#txt_man').on('manifestremove', function (event, data, $item) {
});
//常用事件3：遠(yuǎn)程調(diào)用時(shí)通過鍵盤選擇項(xiàng)變化的事件
$('#txt_man').on('manifestselect', function (event, data, $item) {
});
（2）遠(yuǎn)程多值輸入
遠(yuǎn)程搜索輸入的方式，需要我們提供一個(gè)url地址，獲取數(shù)據(jù)，然后返回到瀏覽器。本文為了簡單，就直接用源碼網(wǎng)站上面的url來展示效果了。
首先需要引用的js文件
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/jquery-manifest-master/src/jquery.manifest.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/jquery-manifest-master/build/parts/jquery.ui.widget.js"></script> <script src="~/Content/jquery-manifest-master/build/parts/jquery.marcopolo.js"></script> <script src="~/Content/jquery-manifest-master/build/jquery.manifest.js"></script>
和上面的相比，多了一個(gè)文件jquery.marcopolo.js的引用。
然后就是html和js的初始化
<form action="https://api.foursquare.com/v2/venues/search?callback=?" method="get">
<div class="form-group"><div class="col-xs-10">
<input type='text' id="txt_man2" />
<img src="~/Content/jquery-manifest-master/busy.gif" />
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$('#txt_man2').manifest({
formatDisplay: function (data, $item, $mpItem) {
return data.name;
},
formatValue: function (data, $value, $item, $mpItem) {
return data.id;
},
marcoPolo: {
data: {
client_id: 'NO2MTQVBQANW3Q3SG23OFVMEGYOWIZDT4E1QHRPZO0BFCN4X',
client_secret: 'LG2WRKKS1SXZ2FMKDG01LDW1KDTEKKTULMXM0XEVWRN0LLHB',
intent: 'global',
limit: 5,
v: '20150601'
},
formatData: function (data) {
return data.response.venues;
},
formatItem: function (data, $item) {
return data.name;
},
minChars: 3,
param: 'query'
},
required: true
});
});
</script>
至于每一個(gè)參數(shù)的意義，園友們有需要可以研究下，應(yīng)該不難理解。博主簡單監(jiān)視了一下這個(gè)遠(yuǎn)程搜索方法的返回值
如果有園友打算自己用這個(gè)遠(yuǎn)程的方法，可以參考這個(gè)數(shù)據(jù)格式去實(shí)現(xiàn)。
八、文本框搜索組件bootstrap-typeahead
其實(shí)關(guān)于文本框搜索的功能，很多組件都帶有這個(gè)功能，比如原來博主用過的jQuery UI里面就有一個(gè)autocomplete組件可以實(shí)現(xiàn)自動(dòng)完成。而bootstrap文本框的自動(dòng)搜索組件，網(wǎng)上也是層出不窮，今天之所以選擇這個(gè)組件是因?yàn)橛X得它和bootstrap的風(fēng)格比較類似，而且組件比較小，簡單實(shí)用。
1、效果展示
本地靜態(tài)搜索（數(shù)據(jù)源在本地）
遠(yuǎn)程搜索（數(shù)據(jù)源通過ajax請求遠(yuǎn)程獲取）
2、源碼說明
3、代碼示例
首先需要引用的文件：主要包含一個(gè)css和一個(gè)js文件。需要jQuery和bootstrap的支持。
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/demo/css/prettify.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"></script>
然后組件的初始化
<input type='text' class="form-control" id="txt_man" />
數(shù)據(jù)源在本地
<script type="text/javascript">
$(function () {
$("#txt_man").typeahead({
source: [
{ key: 1, value: 'Toronto' },
{ key: 2, value: 'Montreal' },
{ key: 3, value: 'New York' },
{ key: 4, value: 'Buffalo' },
{ key: 5, value: 'Boston' },
{ key: 6, value: 'Columbus' },
{ key: 7, value: 'Dallas' },
{ key: 8, value: 'Vancouver' },
{ key: 9, value: 'Seattle' },
{ key: 10, value: 'Los Angeles' }
],
display: "value",
val:"key"
});
});
</script>
數(shù)據(jù)源通過ajax請求獲取
<script type="text/javascript">
$(function () {
$("#txt_man").typeahead({
ajax: {
url: '/Home2/TypeaheadData',
timeout: 300,
method: 'post',
triggerLength: 1,
loadingClass: null,
displayField: null,
preDispatch: null,
preProcess: null
},
display: "value",
val:"key"
});
});
</script>
后臺(tái)對應(yīng)的測試方法
public JsonResult TypeaheadData()
{
var lstRes = new List<object>();
for (var i = 0; i < 20; i++)
lstRes.Add(new { key = i, value = Guid.NewGuid().ToString().Substring(0, 4) });
return Json(lstRes, JsonRequestBehavior.AllowGet) ;
}
常用屬性：
•display：顯示的字段名稱
•val：實(shí)際的值
•items：搜索結(jié)果默認(rèn)展示的個(gè)數(shù)。默認(rèn)值為8
•source：本地?cái)?shù)據(jù)源，格式為數(shù)組。
•ajax：ajax請求的對象，可以直接為一個(gè)string的url，也可是object對象。如果是object對象，url這個(gè)就不說了，triggerLength的屬性表示輸入幾個(gè)字符觸發(fā)搜索。
常用事件：
•itemSelected：選中搜索值的時(shí)候觸發(fā)。
<script type="text/javascript">
$(function () {
$("#txt_man").typeahead({
ajax: {
url: '/Home2/TypeaheadData',
timeout: 300,
method: 'post',
triggerLength: 1,
loadingClass: null,
displayField: null,
preDispatch: null,
preProcess: null
},
display: "value",
val: "key",
itemSelected: function (item, val, text) {
}
});
});
</script>參數(shù)item表示選中的對象，參數(shù)val表示選中項(xiàng)的實(shí)際值，text表示選中項(xiàng)的顯示值。
九、bootstrap步驟組件
關(guān)于bootstrap步驟組件，上篇介紹過一個(gè)ystep這個(gè)小組件，它在查看任務(wù)的進(jìn)度方面能起到一定的作用，但是對于一些復(fù)雜的業(yè)務(wù)，需要按照當(dāng)前的步驟處理相應(yīng)的業(yè)務(wù)這個(gè)方面它就有點(diǎn)無能為力了。今天博主就介紹一款效果相當(dāng)不錯(cuò)的步驟組件，有了這個(gè)組件，程序員再也不用擔(dān)心復(fù)雜的步驟設(shè)計(jì)了。
1、效果展示
一睹風(fēng)采
按照步驟進(jìn)行“上一步”、“下一步”
更多步驟
2、源碼說明
這個(gè)組件是博主在網(wǎng)上找到的，看了下很多的樣式和用法都是bootstrap里面的，唯一需要引用一個(gè)js和一個(gè)css文件。暫時(shí)未找到源碼出處，如果有知道源碼出處的可以告訴博主，博主再加上，為了尊重作者的勞動(dòng)成果博主一定尊重原創(chuàng)！
3、代碼示例
需要引用的文件
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-step/css/bs-is-fun.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/bootstrap-step/js/brush.js"></script>
bs-is-fun.css和brush.js這兩個(gè)文件需要引用，組件需要jQuery和bootstrap的支持。
然后就是組件的初始化。
（1）箭頭
<ul class="nav nav-pills nav-justified step step-arrow"> <li class="active"> <a>step1</a> </li> <li class="active"> <a>step2</a> </li> <li> <a>step3</a> </li> </ul>
如果是靜態(tài)的步驟，只需要以上一段html代碼即可看到上圖中的箭頭步驟效果。這里的active樣式表示步驟已經(jīng)經(jīng)過的樣式。
（2）正方形
<ul class="nav nav-pills nav-justified step step-square"> <li class="active"> <a>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li> </ul>
（3）圓形
<ul class="nav nav-pills nav-justified step step-round"> <li class="active"> <a>step1</a> </li> <li class="active"> <a>step2</a> </li> <li class="active"> <a>step3</a> </li> </ul>
（4）進(jìn)度條
<ul class="nav nav-pills nav-justified step step-progress"> <li class="active"> <a>step1<span class="caret"></span></a> </li> <li class="active"> <a>step2<span class="caret"></span></a> </li> <li> <a>step3<span class="caret"></span></a> </li> <li> <a>step4<span class="caret"></span></a> </li> <li> <a>step5<span class="caret"></span></a> </li> <li> <a>step6<span class="caret"></span></a> </li> </ul>
（5）上一步、下一步
上圖中的“上一步”、“下一步”是在bootstrap的modal組件里面自己定義的，還是把代碼貼出來，供大家參考。
<div class="modal fade" id="myModalNext"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title">選項(xiàng)配置</h4><ul class="nav nav-pills nav-justified step step-progress"> <li class="active"> <a>步驟一<span class="caret"></span></a> </li> <li> <a>步驟二<span class="caret"></span></a> </li> <li> <a>步驟三<span class="caret"></span></a> </li> <li> <a>步驟四<span class="caret"></span></a> </li> <li> <a>步驟五<span class="caret"></span></a> </li> <li> <a>步驟六<span class="caret"></span></a> </li> </ul> </div> <div class="modal-body"> <div class="container-fluid"> <div class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false"> <div class="carousel-inner" role="listbox"> <div class="item active"> <p>步驟一</p> <div class="col-xs-2"> 配置角色 </div> <div class="col-xs-4"> <input type="text" class="form-control" /> </div> <div class=" col-xs-4"> <button type="button" class=" btn btn-primary">保存</button> </div> </div> <div class="item"> <p>步驟二</p> <div class="col-xs-2"> 配置用戶 </div> <div class="col-xs-4"> <input type="text" class="form-control" /> </div> <div class=" col-xs-4"> <button type="button" class=" btn btn-primary">保存</button> </div> </div> <div class="item"> <p>步驟三</p> </div> <div class="item"> <p>步驟四</p> </div> <div class="item"> <p>步驟五</p> </div> <div class="item"> <p>步驟六</p> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default MN-pre">上一步</button> <button type="button" class="btn btn-primary MN-next">下一步</button> </div> </div> </div> </div>
當(dāng)然，還需要注冊兩個(gè)按鈕的點(diǎn)擊事件
$("#myModalNext .modal-footer button").each(function () {
$(this).click(function () {
if ($(this).hasClass("MN-next")) {
$("#myModalNext .carousel").carousel('next');
$("#myModalNext .step li.active").next().addClass("active");
} else {
$("#myModalNext .carousel").carousel('prev');
if ($("#myModalNext .step li").length > 1) {
$($($("#myModalNext .step li.active"))[$("#myModalNext .step li.active").length - 1]).removeClass("active")
}
}
})
})
邏輯可能并不完善，如果正式使用需要測試。
十、按鈕加載組件ladda-bootstrap
關(guān)于按鈕加載，博主早就想找一個(gè)合適的組件去優(yōu)化，如果不處理，肯定存在重復(fù)操作的可能。今天來看下這么一個(gè)小東西吧。
1、效果展示
初見
自定義顏色、大小、進(jìn)度條
2、源碼說明
3、代碼示例
需要引用的文件
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-themeless.min.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/spin.min.js"></script> <script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"></script>
組件初始化：初始化4個(gè)按鈕
<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
<button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button><button class="btn btn-primary ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button>
<button class="btn btn-primary ladda-button" data-style="zoom-out"><span class="ladda-label">zoom-out</span></button>
$(function () {
$('button').click(function (e) {
e.preventDefault();
var l = Ladda.create(this);
l.start();
l.setProgress(0 - 1);
$.post("/Home2/TypeaheadData",{ },
function (data,statu) {
console.log(statu);
}, "json");
.always(function () { l.stop(); });
return false;
});
});
代碼釋疑：應(yīng)該不難理解，初始化組件主要涉及的代碼 var l = Ladda.create(this); l.start(); ，這里的this表示當(dāng)前點(diǎn)擊的按鈕的對象（注意這里是dom對象而不是jQuery對象），然后請求結(jié)束后調(diào)用 l.stop(); 關(guān)閉加載。
（1）data-style所有選項(xiàng)如下，有興趣可以去試試，看看都是些什么效果：
data-style="expand-left"
data-style="expand-right"
data-style="expand-up"
data-style="expand-down"
data-style="zoom-in"
data-style="zoom-out"
data-style="slide-left"
data-style="slide-right"
data-style="slide-up"
data-style="slide-down"
data-style="contract"
（2）如果需要調(diào)整按鈕的大小，組件內(nèi)置了data-size屬性，data-size所有選項(xiàng)如下：
data-size="xs"
data-size="s"
data-size="l"
（3）如果需要設(shè)置按鈕的顏色，通過data-spinner-color
data-spinner-color="#FF0000"
（4）按鈕的進(jìn)度條的設(shè)置
Ladda.bind('button', {
callback: function (instance) {
var progress = 0;
var interval = setInterval(function () {
progress = Math.min(progress + Math.random() * 0.1, 1);
instance.setProgress(progress);
if (progress === 1) {
instance.stop();
clearInterval(interval);
}
}, 200);
}
});
});
主要通過instance.setProgress(progress);這一句來設(shè)置當(dāng)前執(zhí)行的進(jìn)度，progress的取值在0到1之間。當(dāng)然，以上只是測試進(jìn)度效果的代碼，在正式項(xiàng)目中這里需要計(jì)算當(dāng)前請求執(zhí)行的情況來動(dòng)態(tài)返回進(jìn)度。
十一、開關(guān)組件bootstrap-switch
在bootstrap中文網(wǎng)的首頁上面，你就能找到這么一個(gè)組件
1、效果展示
初始效果
五花八門的屬性以及事件
2、源碼說明
Bootstrap-Switch源碼地址：https://github.com/nostalgiaz/bootstrap-switch
Bootstrap-Switch文檔以及Demo：http://www.bootstrap-switch.org/examples.html
3、代碼示例
需要引用的文件
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-switch-master/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/bootstrap-switch-master/bootstrap-switch-master/dist/js/bootstrap-switch.js"></script>
組件依賴于JQuery和bootstrap
然后就是和html和js的初始化
<input type="checkbox" checked />
$(function () {
$('input[type=checkbox]').bootstrapSwitch({ size: "large" });
})
size屬性并非必須，如果你使用默認(rèn)的樣式，參數(shù)可以不傳。
常用的屬性
•size：開關(guān)大小。可選值有'mini', 'small', 'normal', 'large'
•onColor：開關(guān)中開按鈕的顏色?？蛇x值有'primary', 'info', 'success', 'warning', 'danger', 'default'
•offColor：開關(guān)中關(guān)按鈕的顏色?？蛇x值'primary', 'info', 'success', 'warning', 'danger', 'default'
•onText：開關(guān)中開按鈕的文本，默認(rèn)是“ON”。
•offText：開關(guān)中關(guān)按鈕的文本，默認(rèn)是“OFF”。
•onInit：初始化組件的事件。
•onSwitchChange：開關(guān)變化時(shí)的事件。
常用的事件和方法可以直接查看文檔，官方提供了很詳細(xì)的說明。
十二、評(píng)分組件bootstrap-star-rating
某東、某寶上面的評(píng)分大家應(yīng)該都有了解，無意中發(fā)現(xiàn)了一塊bootstrap風(fēng)格的評(píng)分組件，覺得有點(diǎn)意思，以后做電商、社區(qū)、論壇系統(tǒng)或許用得著，就來分享分享。
1、效果展示
2、源碼說明
3、代碼示例
此組件需要jQuery和bootstrap樣式的支持
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/css/star-rating.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/star-rating.js"></script> <script src="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/locales/zh.js"></script>
直接通過html初始組件
<input id="input-2b" type="number" class="rating" min="0" max="5" step="0.5" data-size="xl"
data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">
<input id="input-21a" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xl">
<input id="input-21b" value="4" type="number" class="rating" min=0 max=5 step=0.2 data-size="lg">
<input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">
<input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
<input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs">
<input id="input-21f" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="md">
<input id="input-2ba" type="number" class="rating" min="0" max="5" step="0.5" data-stars=5
data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">
<input id="input-22" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon=0>
組件通過class="rating"這一個(gè)來進(jìn)行初始化。這里幾個(gè)參數(shù)應(yīng)該很好理解：
•value：表示組件初始化的時(shí)候默認(rèn)的分?jǐn)?shù)
•min：最小分?jǐn)?shù)
•max：最大分?jǐn)?shù)
•step：每次增加的最小刻度
•data-size：星星的大小
•data-stars：星星的個(gè)數(shù)
通過 $("#input-21a").val() 即可得到當(dāng)前的評(píng)分?jǐn)?shù)。
以上所述是小編給大家介紹的Bootstrap組件系列之福利篇幾款好用的組件（推薦二），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
js指定步長實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js指定步長實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
移動(dòng)端開發(fā)的過程中，一個(gè)最常見的問題就是適配不同的屏幕寬度。本文主要介紹了webpack的移動(dòng)端適配方案，感興趣的可以了解一下2021-07-07
圍住神經(jīng)貓游戲是一款基于html5、jquery、typescript等技術(shù)開發(fā)的游戲，非常好玩，感興趣的朋友快來圍觀吧，體驗(yàn)一把，下面給大家分享使用html5如何制作圍住神經(jīng)貓游戲-附源碼下載，有需要的朋友可以參考下2015-08-08
javascript refresh page，頁面刷新實(shí)現(xiàn)代碼。2009-07-07
詳解JavaScript原始數(shù)據(jù)類型Symbol
以前提到 JavaScript 原始數(shù)據(jù)類型時(shí)，我們知道有Number，String，Null，Boolean，Undefined這幾種。ES6 引入了新的基本數(shù)據(jù)類型Symbol和BigInt。今天我們就來了解下Symbol類型。Symbol類型是為了解決屬性名沖突的問題，順帶還具備模擬私有屬性的功能。2021-05-05
JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法
這篇文章主要介紹了JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法,本文給出操作實(shí)例代碼和語法介紹,需要的朋友可以參考下2015-05-05
本文主要對html5 canvas的使用進(jìn)行了詳細(xì)的介紹。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
基于JS實(shí)現(xiàn)帶動(dòng)畫效果的流程進(jìn)度條
當(dāng)在使用流程的時(shí)候，比如有一個(gè)審核流程，有三個(gè)階段：開始，審核中，審核成功。當(dāng)在不同的階段，做相應(yīng)的進(jìn)度顯示，當(dāng)顯示時(shí)，是以動(dòng)畫的形式顯示的。下面通過代碼給大家介紹JS實(shí)現(xiàn)帶動(dòng)畫效果的流程進(jìn)度條，感興趣的朋友一起看看吧2018-06-06
js實(shí)現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法,實(shí)例分析了漸顯效果的實(shí)現(xiàn)要點(diǎn)與方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
解決select2在bootstrap modal中不能正常使用的問題
今天小編就為大家分享一篇解決select2在bootstrap modal中不能正常使用的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08