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 21 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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时间戳使用实例代码
2008/06/07 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
php函数与传递参数实例分析
2014/11/15 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
用于table内容排序
2006/07/21 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
分析Python读取文件时的路径问题
2018/02/11 Python
Python实现的读写json文件功能示例
2018/06/05 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
解析python的局部变量和全局变量
2019/08/15 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
师范生求职自荐信
2014/06/14 职场文书
2015年财政所工作总结
2015/04/25 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
python调试工具Birdseye的使用教程
2021/05/25 Python
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang