基于jQuery實(shí)現(xiàn)選取月份插件附源碼下載
更新時間：2015年12月28日 14:06:02 投稿：mrr
這是一個基于jQuery的可以選擇年份和月份的月份拾取插件，你可以設(shè)置點(diǎn)擊頁面上的任意元素觸發(fā)彈出年月選擇面板，可以是一個鏈接也可以是一個輸入框，廣泛應(yīng)用于月份查詢，而無需設(shè)置select表單。
這是一個基于jQuery的可以選擇年份和月份的月份拾取插件，你可以設(shè)置點(diǎn)擊頁面上的任意元素觸發(fā)彈出年月選擇面板，可以是一個鏈接也可以是一個輸入框，廣泛應(yīng)用于月份查詢，而無需設(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
接下來很簡單，我們來調(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是一個數(shù)組，可以設(shè)置年份，參數(shù)topOffset就是觸發(fā)彈出的面板與當(dāng)前元素的偏移距離。onMonthSelect是選擇月份后的回調(diào)函數(shù)?，F(xiàn)在運(yùn)行網(wǎng)頁，點(diǎn)擊鏈接或輸入框，會彈出一個年月選擇面板，選擇好后，面板消失，并在鏈接上或輸入框內(nèi)顯示所選的年月。至于彈出面板中的月份樣式可以修改jquery.monthpicker.css中的css來獲取最佳視覺效果。
您可能感興趣的文章:
- 基于jQuery通過jQuery.form.js插件實(shí)現(xiàn)異步上傳
- 基于jQuery通過jQuery.form.js插件使用ajax提交form表單
- jquery.form.js實(shí)現(xiàn)將form提交轉(zhuǎn)為ajax方式提交的方法
- jquery.form.js用法之清空form的方法
- 解決3.01版的jquery.form.js中文亂碼問題的解決方法
- 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條件分頁代替離線查詢，通過代碼實(shí)例讓讀者更深入了解該功能的操作，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法
jQuery XDomainRequest 是一個利用 XDomainRequest 對象為 IE8、IE9 實(shí)現(xiàn)跨域資源共享（CORS - Cross Origin Resource Sharing）的 jQuery 插件2023-06-06
jquery點(diǎn)擊獲取動態(tài)數(shù)據(jù)進(jìn)行傳參問題
這篇文章主要介紹了jquery點(diǎn)擊獲取動態(tài)數(shù)據(jù)進(jìn)行傳參問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在網(wǎng)上經(jīng)常會看到一些很長的網(wǎng)頁會延遲加載其中的圖片，我認(rèn)為這是一種按需分配的做法，網(wǎng)頁只為那些想繼續(xù)瀏覽網(wǎng)頁的人加載后面的圖片，在不影響用戶體驗(yàn)的前提下，最大程度地減少服務(wù)器負(fù)擔(dān)和流量2012-06-06
懶加載實(shí)現(xiàn)的分頁&&網(wǎng)站footer自適應(yīng)
本文主要介紹了wap手機(jī)端懶加載分頁，web電腦端懶加載分頁以及web電腦端footer底部固定。具有很好的參考價值，下面就跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了jQuery仿寫百度百科的目錄樹醫(yī)保詞條樣式，點(diǎn)擊右側(cè)的目錄樹，左側(cè)跳轉(zhuǎn)到指定的錨點(diǎn)位置，滾動鼠標(biāo)，游標(biāo)跟隨一起滾動至響應(yīng)鏈接位置，具體實(shí)現(xiàn)思路大家參考下本文2017-01-01
使用jquery Ajax實(shí)現(xiàn)上傳附件功能
這篇文章主要為大家詳細(xì)介紹了使用jquery Ajax實(shí)現(xiàn)上傳附件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要為大家詳細(xì)介紹了jquery仿微信聊天界面的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
近期研究了下MenuButton,有了新的感悟，原先在那個DEMO中右鍵支持做法，現(xiàn)在看來真是小兒科啊2012-07-07