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仿微信聊天界面
May 06 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jQuery实现动态操作table行
Nov 23 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中快速生成随机密码的几种方式
2017/04/17 PHP
DWR Ext 加载数据
2009/03/22 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
简单介绍Python中的struct模块
2015/04/28 Python
Python简单读取json文件功能示例
2017/11/30 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
学生处主任岗位职责
2013/12/01 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2015新学期家长寄语
2015/02/26 职场文书
台风停课通知
2015/04/24 职场文书
边城读书笔记
2015/06/29 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python