基于jQuery实现选取月份插件附源码下载_jquery
程序员文章站
2022-03-21 16:51:25
...
这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单。
HTML
首先将monthpicker插件相关的css和js文件载入,大家可以到源码下载里下载css和js文件。
然后在要放置年月的位置加入如下代码,可以是输入框可以是链接等任意HTML元素。
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来获取最佳视觉效果。
上一篇: php_pgsql 加载不了怎么办
下一篇: html全局属性是什么
推荐阅读
-
基于spring+hibernate+JQuery开发之电子相册(附源码下载)
-
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
-
jQuery插件实现的日历功能示例【附源码下载】
-
基于jquery实现的tab选项卡功能示例【附源码下载】
-
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
-
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
-
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
-
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
-
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】