基于jQuery實(shí)現(xiàn)選取月份插件附源碼下載
這是一個(gè)基于jQuery的可以選擇年份和月份的月份拾取插件,你可以設(shè)置點(diǎn)擊頁(yè)面上的任意元素觸發(fā)彈出年月選擇面板,可以是一個(gè)鏈接也可以是一個(gè)輸入框,廣泛應(yīng)用于月份查詢,而無(wú)需設(shè)置select表單。
HTML
首先將monthpicker插件相關(guān)的css和js文件載入,大家可以到源碼下載里下載css和js文件。
<link rel="stylesheet" type="text/css" href="jquery.monthpicker.css"> <script src="jquery.js"></script> <script src="jquery.monthpicker.js"></script>
然后在要放置年月的位置加入如下代碼,可以是輸入框可以是鏈接等任意HTML元素。
<a href="#monthpicker" id="monthpicker"></a> <input type="text" class="input" id="monthly">
jQuery
接下來(lái)很簡(jiǎn)單,我們來(lái)調(diào)用插件。
$(function(){ $('#monthpicker').monthpicker({ years: [2015, 2014, 2013, 2012, 2011], topOffset: 6, onMonthSelect: function(m, y) { console.log('Month: ' + m + ', year: ' + y); } }); $('#monthly').monthpicker({ years: [2015, 2014, 2013, 2012, 2011], topOffset: 6 }) });
代碼中可以看出,參數(shù)years是一個(gè)數(shù)組,可以設(shè)置年份,參數(shù)topOffset就是觸發(fā)彈出的面板與當(dāng)前元素的偏移距離。onMonthSelect是選擇月份后的回調(diào)函數(shù)。現(xiàn)在運(yùn)行網(wǎng)頁(yè),點(diǎn)擊鏈接或輸入框,會(huì)彈出一個(gè)年月選擇面板,選擇好后,面板消失,并在鏈接上或輸入框內(nèi)顯示所選的年月。至于彈出面板中的月份樣式可以修改jquery.monthpicker.css中的css來(lái)獲取最佳視覺(jué)效果。
- 基于jQuery通過(guò)jQuery.form.js插件實(shí)現(xiàn)異步上傳
- 基于jQuery通過(guò)jQuery.form.js插件使用ajax提交form表單
- jquery.form.js實(shí)現(xiàn)將form提交轉(zhuǎn)為ajax方式提交的方法
- jquery.form.js用法之清空f(shuō)orm的方法
- 解決3.01版的jquery.form.js中文亂碼問(wèn)題的解決方法
- jquery插件jquery.confirm彈出確認(rèn)消息
- jQuery焦點(diǎn)圖插件SaySlide
- jQuery定義插件的方法
- Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
- jQuery插件之jQuery.Form.js用法實(shí)例分析(附demo示例源碼)
相關(guān)文章
jQuery模擬新浪微博首頁(yè)滾動(dòng)效果的方法
這篇文章主要介紹了jQuery模擬新浪微博首頁(yè)滾動(dòng)效果的方法,實(shí)例分析了jQuery使用animate、css等方法實(shí)現(xiàn)滾動(dòng)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery實(shí)現(xiàn)的點(diǎn)擊顯示隱藏下拉菜單功能完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的點(diǎn)擊顯示隱藏下拉菜單功能,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05jquery ajax學(xué)習(xí)筆記2 使用XMLHttpRequest對(duì)象的responseXML
使用XMLHttpRequest對(duì)象的responseXML的方式來(lái)接受XML數(shù)據(jù)對(duì)象的DOM對(duì)象2011-10-10jQuery往textarea中光標(biāo)所在位置插入文本的方法
這篇文章主要介紹了jQuery往textarea中光標(biāo)所在位置插入文本的方法,實(shí)例分析了jQuery操作光標(biāo)及文本的相關(guān)技巧,需要的朋友可以參考下2015-06-06jquery實(shí)現(xiàn)ajax加載超時(shí)提示的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)ajax加載超時(shí)提示的方法,涉及jQuery中l(wèi)oad方法的ajax加載超時(shí)設(shè)置與提示信息處理技巧,需要的朋友可以參考下2016-07-07jquery+json實(shí)現(xiàn)數(shù)據(jù)二級(jí)聯(lián)動(dòng)的方法
這篇文章主要介紹了jquery+json實(shí)現(xiàn)數(shù)據(jù)二級(jí)聯(lián)動(dòng)的方法,涉及jQuery基于get方法與后臺(tái).net程序傳輸json交互實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11jQuery zTree插件快速實(shí)現(xiàn)目錄樹(shù)
這篇文章主要為大家詳細(xì)介紹了jQuery zTree插件快速實(shí)現(xiàn)目錄樹(shù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08TextArea不支持maxlength的解決辦法(jquery)
自己寫了一個(gè)jquery的擴(kuò)展,這樣就可以很容易實(shí)現(xiàn)對(duì)textarea控制最大長(zhǎng)度了。2011-09-09