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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery实现影院选座订座效果
Apr 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中的时间显示
2007/01/18 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python  Django 母版和继承解析
2019/08/09 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python轮询机制控制led实例
2020/05/03 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
护理职业应聘自荐书
2013/09/29 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
班级活动策划书
2014/02/06 职场文书
化学教育专业自荐信
2014/07/04 职场文书
房产公证书样本
2015/01/23 职场文书
商务英语求职信范文
2015/03/19 职场文书
导师工作推荐信
2015/03/27 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript