一起学习网 一起学习网


基于jQuery实现选取月份插件附源码下载

网络编程 基于jQuery实现选取月份插件附源码下载 06-22

这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单。

查看图片

效果展示 源码下载

HTML

首先将monthpicker插件相关的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

接下来很简单,我们来调用插件。

$(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来获取最佳视觉效果。

Jquery使用小技巧汇总
下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列

基于JavaScript如何实现ajax调用后台定义的方法
由于ajax的独特优势,使得它在当前大量网站得到了广泛的应用,下面就介绍一下ajax如何调用后台定义的函数,虽然比较简单,不过希望能够给初学者带

jQuery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法。分享给大家供大家参考,具体如下:一、jQuery的attr()方法jquery中用attr()方法来获取和设置元素属性,attr是att


编辑:一起学习网

标签:是一个,弹出,面板,链接,输入框