快捷導(dǎo)航

JavaScript枚舉選擇jquery插件代碼實(shí)例

更新時(shí)間：2020年11月17日 09:06:54 作者：dint

這篇文章主要介紹了JavaScript枚舉選擇jquery插件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

某次做項(xiàng)目要實(shí)現(xiàn)一個(gè)功能：

按星期選擇一個(gè)連續(xù)的時(shí)間范圍比如：周一到周五，周六到周日或周六到周三

聰明的朋友馬上想出辦法：用兩個(gè)選項(xiàng)為周一到周日的下拉列表實(shí)現(xiàn)，對(duì) 那樣可以，但是我覺(jué)得不夠友好，

所以利用業(yè)余時(shí)間寫下了這個(gè)jQuery小插件。

源碼

用法: 鼠標(biāo)點(diǎn)擊開(kāi)始/結(jié)束項(xiàng)（紅色部分，可自定義）進(jìn)行選擇和取消選擇

效果圖：周一到周五

周六到周日

周日到周三

<html>
<head>
<title>daybox測(cè)試</title>
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='easyui.daybox.js'></script>
</head>
<body>
<div id='aDayboxDiv'></div>
<script type='text/javascript'>
$(function(){
 $('#aDayboxDiv').daybox({
          weeks: [{ text: '一', value: 2 }, { text: '二', value: 3 }, { text: '三', value: 4 },
              { text: '四', value: 5 }, { text: '五', value: 6 }, { text: '六', value: 7 },
              { text: '日', value: 1 }]
          });
 $('#aDayboxDiv').daybox('setValue', 0, 2);
});
</script>
</body>
</html>

運(yùn)行結(jié)果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript面向?qū)ο髮?shí)現(xiàn)放大鏡案例
這篇文章主要為大家詳細(xì)介紹了JavaScript面向?qū)ο髮?shí)現(xiàn)放大鏡案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
微信小程序 Storage更新詳解
這篇文章主要介紹了微信小程序 Storage更新詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
JavaScript動(dòng)態(tài)添加事件之事件委托
動(dòng)態(tài)添加事件實(shí)質(zhì)就是指js中的事件委托。本文給大家介紹JavaScript動(dòng)態(tài)添加事件之事件委托的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧
2016-07-07
淺談讓你的代碼更簡(jiǎn)短，更整潔，更易讀的ES6小技巧
這篇文章主要介紹了淺談讓你的代碼更簡(jiǎn)短，更整潔，更易讀的ES6小技巧，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
多種方法實(shí)現(xiàn)load加載完成后把圖片一次性顯示出來(lái)
如何一個(gè)load 加載完成后把圖片一次性顯示出來(lái)，下面有個(gè)不錯(cuò)的方法，希望對(duì)大家有所幫助
2014-02-02
js代碼實(shí)現(xiàn)的加入收藏效果并兼容主流瀏覽器
這篇文章主要介紹了js代碼實(shí)現(xiàn)的加入收藏效果并兼容主流瀏覽器,需要的朋友可以參考下
2014-06-06
JavaScript效率調(diào)優(yōu)經(jīng)驗(yàn)
有時(shí)候大家在使用多字符的時(shí)候，需要用的到下面的知識(shí)。
2009-06-06
使用GruntJS構(gòu)建Web程序之構(gòu)建篇
前一篇記錄了Grunt的安裝，這篇介紹下怎么使用Gruntjs來(lái)搭建一個(gè)前端項(xiàng)目，然后使用grunt合并，壓縮JS文件。
2014-06-06
javascript實(shí)現(xiàn)鼠標(biāo)放上后下邊對(duì)應(yīng)內(nèi)容變換的效果
這篇文章主要介紹了javascript鼠標(biāo)放上后下邊對(duì)應(yīng)內(nèi)容變換的方法,實(shí)例分析了javascript實(shí)現(xiàn)tab切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
js自動(dòng)生成對(duì)象的屬性示例代碼
大家應(yīng)該都不知道js可以自動(dòng)生成對(duì)象的屬性吧，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2013-10-10