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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 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 读取和修改大文件的某行内容的代码
2009/10/30 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
材料加工工程求职信
2014/02/19 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
婚内分居协议书范文
2014/11/26 职场文书
专家推荐信范文
2015/03/26 职场文书
建党伟业观后感
2015/06/01 职场文书
休假证明书
2015/06/24 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL