jQuery实现的输入框选择时间插件用法实例
作者:bea
本文实例讲述了jQuery实现的输入框选择时间插件用法。分享给大家供大家参考。具体实现方法如下: 代码如下: <!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta charset = utf8> <titl
本文实例讲述了jQuery实现的输入框选择时间插件用法。分享给大家供大家参考。具体实现方法如下:
代码如下:
<!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset = utf8>
<title>jQuery实现的输入框选择时间插件</title>
<script charset="utf-8" src="/js/jquery-1.6.2.min.js"></script>
<script charset="utf-8" src="/js/jquery.settime.js"></script>
</head>
<body>
<p id="msg">msg </p>
<p >time1<input id="time" value="" /></p>
<p >time2<input id="time2" value="" /></p>
<p >time3<input id="time3" value="" /></p>
<p ><input type = button id="button" value="button"/></p>
<div>
</div>
<script>
$('#time').setTime();
$('#time2').setTime({
drag:true,
h:[5,20],
i:[5,50],
s:[5,45],
a:0.05,
constraint:'',
'starteffect': function(d){
$('#msg').html(d[0]);
},
'onmove':function(e){
$('#msg').html(e[0] + '/' + e[1])
},
zindex:'0',
'cursor':'move',
'area':[[50,600],[10 ,5000]],
'callback':function(){
//alert(1)
}
});
$('#time3').setTime({
drag:true,
a:0.05
});
$('#button').click(function(){
alert( $('#time').val() );
alert( $('#time2').val() );
alert( $('#time3').val() );
});
</script>
</body>
</html>
本文中的时间插件jquery.settime.js点击此处本站下载。
希望本文所述对大家的jQuery程序设计有所帮助。
有用 | 无用
代码如下:
<!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset = utf8>
<title>jQuery实现的输入框选择时间插件</title>
<script charset="utf-8" src="/js/jquery-1.6.2.min.js"></script>
<script charset="utf-8" src="/js/jquery.settime.js"></script>
</head>
<body>
<p id="msg">msg </p>
<p >time1<input id="time" value="" /></p>
<p >time2<input id="time2" value="" /></p>
<p >time3<input id="time3" value="" /></p>
<p ><input type = button id="button" value="button"/></p>
<div>
</div>
<script>
$('#time').setTime();
$('#time2').setTime({
drag:true,
h:[5,20],
i:[5,50],
s:[5,45],
a:0.05,
constraint:'',
'starteffect': function(d){
$('#msg').html(d[0]);
},
'onmove':function(e){
$('#msg').html(e[0] + '/' + e[1])
},
zindex:'0',
'cursor':'move',
'area':[[50,600],[10 ,5000]],
'callback':function(){
//alert(1)
}
});
$('#time3').setTime({
drag:true,
a:0.05
});
$('#button').click(function(){
alert( $('#time').val() );
alert( $('#time2').val() );
alert( $('#time3').val() );
});
</script>
</body>
</html>
本文中的时间插件jquery.settime.js点击此处本站下载。
希望本文所述对大家的jQuery程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js获取当前日期前七天的方法
- JQuery的ON()方法支持的所有事件罗列
- 使用命令对象代替switch语句的写法示例
- Underscore.js常用方法总结
- js实现文字跟随鼠标移动而移动的方法
- jQuery实现tab标签自动切换的方法
- js根据鼠标移动速度背景图片自动旋转的方法
- JS实现鼠标箭头变成一个燃烧烛光效果的方法
- JS实现在线统计一个页面内鼠标点击次数的方法
- JS网页在线获取鼠标坐标值的方法
- js实现背景图片感应鼠标变化的方法
- 常用的JavaScript模板引擎介绍
- JavaScript操作Cookie详解
- js实现可得到不同颜色值的颜色选择器实例
- Windows系统中安装nodejs图文教程
- JS+CSS实现实用的单击输入框弹出选择框的方法
- JS实现很酷的EMAIL地址添加功能实例
- 浅谈JavaScript数据类型及转换
- javaScript基础语法介绍