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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
document.write的几点使用心得
2014/05/14 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
详解javascript设计模式三:代理模式
2019/03/25 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python3 爬取图片的实例代码
2018/11/06 Python
python+flask实现API的方法
2018/11/21 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
《山谷中的谜底》教学反思
2014/04/26 职场文书
广告学专业求职信
2014/06/19 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
职称评定个人总结
2015/03/05 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
遗失证明范文
2015/06/19 职场文书
篮球赛新闻稿
2015/07/17 职场文书
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android