jQuery animate和CSS3相結合實現緩動追逐效果附源碼下載
639
2024-03-07
這是一個基于jQuery的可以選擇年份和月份的月份拾取插件,你可以設置點擊頁面上的任意元素觸發彈出年月選擇面板,可以是一個鏈接也可以是一個輸入框,廣泛應用于月份查詢,而無需設置select表單。
效果展示 源碼下載
HTML
首先將monthpicker插件相關的css和js文件載入,大家可以到源碼下載里下載css和js文件。
<link rel="stylesheet" type="text/css" > <script src="http://www.gimoo.net/t/1904/jquery.js"></script> <script src="http://www.gimoo.net/t/1904/jquery.monthpicker.js"></script>
然后在要放置年月的位置加入如下代碼,可以是輸入框可以是鏈接等任意HTML元素。
<a id="monthpicker"></a> <input type="text" class="input" id="monthly">
jQuery
接下來很簡單,我們來調用插件。
$(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 }) });
代碼中可以看出,參數years是一個數組,可以設置年份,參數topOffset就是觸發彈出的面板與當前元素的偏移距離。onMonthSelect是選擇月份后的回調函數。現在運行網頁,點擊鏈接或輸入框,會彈出一個年月選擇面板,選擇好后,面板消失,并在鏈接上或輸入框內顯示所選的年月。至于彈出面板中的月份樣式可以修改jquery.monthpicker.css中的css來獲取最佳視覺效果。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!