JavaScript枚举选择jquery插件代码实例


Posted in jQuery onNovember 17, 2020

某次做项目要实现一个功能:

按星期选择一个连续的时间范围 比如:周一到周五,周六到周日 或 周六到周三

聪明的朋友马上想出办法:用两个选项为周一到周日的下拉列表实现,对 那样可以,但是我觉得不够友好,

所以利用业余时间写下了这个jQuery小插件。

源码

用法: 鼠标点击开始/结束项(红色部分,可自定义)进行选择和取消选择

效果图:JavaScript枚举选择jquery插件代码实例 周一到周五

JavaScript枚举选择jquery插件代码实例 周六到周日

JavaScript枚举选择jquery插件代码实例 周日到周三

<html>
<head>
<title>daybox测试</title>
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='easyui.daybox.js'></script>
</head>
<body>
<div id='aDayboxDiv'></div>
<script type='text/javascript'>
$(function(){
 $('#aDayboxDiv').daybox({
          weeks: [{ text: '一', value: 2 }, { text: '二', value: 3 }, { text: '三', value: 4 },
              { text: '四', value: 5 }, { text: '五', value: 6 }, { text: '六', value: 7 },
              { text: '日', value: 1 }]
          });
 $('#aDayboxDiv').daybox('setValue', 0, 2);
});
</script>
</body>
</html>

运行结果:JavaScript枚举选择jquery插件代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中each循环的简单回滚操作
May 05 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
如何在vue 中引入使用jquery
Nov 10 #jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 #jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
Jquery Fade用法详解
Nov 06 #jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
使用jQuery实现购物车
Oct 29 #jQuery
jQuery实现简单评论区功能
Oct 26 #jQuery
You might like
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
子页向父页传值示例
2013/11/27 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
浅谈js原生拖放
2016/11/21 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python实现简单http服务器功能
2018/09/17 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
夜大自我鉴定
2013/10/31 职场文书
伦敦奥运会口号
2014/06/13 职场文书
出生公证书
2015/01/23 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
培训讲师开场白
2015/06/01 职场文书
2015年中学团委工作总结
2015/07/22 职场文书