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实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现简单聊天室
Feb 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
Terran兵种对照表
2020/03/14 星际争霸
php下实现折线图效果的代码
2007/04/28 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
javascript实现数独解法
2015/03/14 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
自荐信的两点禁忌
2013/10/30 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
安全演讲稿大全
2014/05/09 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
工会工作个人总结
2015/03/03 职场文书
python高温预警数据获取实例
2022/07/23 Python