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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery实现开关灯效果
Aug 02 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创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
JavaScript按位运算符的应用简析
2014/02/04 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
JS Math对象与Math方法实例小结
2019/07/05 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python判断是空的实例分享
2020/07/06 Python
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
户外用品商店创业计划书
2014/01/29 职场文书
21岁生日感言
2014/02/27 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
清明节演讲稿
2014/05/27 职场文书
导游词之镜泊湖
2019/12/09 职场文书
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python