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实现div跟随鼠标移动
Aug 20 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现评论模块
Aug 19 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jQuery实现增删改查
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
php从字符串创建函数的方法
2015/03/16 PHP
jQuery入门知识简介
2010/03/04 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
vue观察模式浅析
2018/09/25 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
教育孩子心得体会
2014/01/01 职场文书
服务之星获奖感言
2014/01/21 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
2014年教育工作总结
2014/11/26 职场文书
布达拉宫的导游词
2015/02/02 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书