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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 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
PHP截取中文字符串的问题
2006/07/12 PHP
php的控制语句
2006/10/09 PHP
DISCUZ 分页代码
2007/01/02 PHP
php 生成随机验证码图片代码
2010/02/08 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
vue 更改连接后台的api示例
2019/11/11 Javascript
python获取糗百图片代码实例
2013/12/18 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
详解Python当中的字符串和编码
2015/04/25 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python实现选择排序
2017/06/04 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers