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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery实现tab栏切换效果
Dec 22 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
设定php简写功能的方法
2019/11/28 PHP
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
bootstrap table小案例
2016/10/21 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
遗传算法python版
2018/03/19 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
Python语言进阶知识点总结
2019/05/28 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
安全检查验收制度
2014/01/12 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
化学教育专业自荐信
2014/07/04 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python