JavaScript枚舉選擇jquery插件代碼實(shí)例
某次做項(xiàng)目要實(shí)現(xiàn)一個(gè)功能:
按星期選擇一個(gè)連續(xù)的時(shí)間范圍 比如:周一到周五,周六到周日 或 周六到周三
聰明的朋友馬上想出辦法:用兩個(gè)選項(xiàng)為周一到周日的下拉列表實(shí)現(xiàn),對(duì) 那樣可以,但是我覺(jué)得不夠友好,
所以利用業(yè)余時(shí)間寫(xiě)下了這個(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í)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ajax請(qǐng)求添加自定義header參數(shù)代碼2. ASP基礎(chǔ)知識(shí)VBScript基本元素講解3. Python requests庫(kù)參數(shù)提交的注意事項(xiàng)總結(jié)4. Kotlin + Flow 實(shí)現(xiàn)Android 應(yīng)用初始化任務(wù)啟動(dòng)庫(kù)5. Gitlab CI-CD自動(dòng)化部署SpringBoot項(xiàng)目的方法步驟6. 詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方法7. 利用CSS3新特性創(chuàng)建透明邊框三角8. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問(wèn)題……9. asp知識(shí)整理筆記4(問(wèn)答模式)10. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式
