Category: Javascript /Jquery / Bootstrap / Web

改造FullCalendar增加节气、节日和农历显示, add lunar for FullCalendar

网上看了FeiFei些的《fullCalendar改造计划之带农历节气节假日的万年历》文章,按照他的方法改造发现他用的是老版本的插件,新版本代码结构变动很大,无奈自己重新读源码改造之,记录下来,给有需求的朋友一点参考。 FullCalendar官网(https://fullcalendar.io/) 改造使用新的版本,v 3.0.1。 首先看下改造成功后的预览图吧: 一、汉化 现在插件已经自带了本地化文件,所以直接加载插件包中的locale/zh-cn/js即可。 二、增加农历,节气,节假日显示 关于直接调用Google Calendar的订阅我就不说了,墙的厉害。 下面说说直接修改源文件,这个就麻烦点,不过自定义程度很高,缺点就是插件更新麻烦。 按照FeiFei的方法,使用hao123的js库(点击下载lunar.js),这个库包含了农历、节气和节假日。 直接将lunar.js内容拷贝到fullcalendar.js里放在头部或者单独加载这个js都可以,看个人习惯。这里我是直接放在fullcalendar.js里,然后修改插件生成日期单元格的内容部分: 先搜索fc-day-number,查找到以下代码: if (this.view.dayNumbersVisible) { html… Read More

JQuery: 提交表单数据,转换表单数据为json,values of Form to Json (jquery.serializeJSON)

项目:https://github.com/marioizquierdo/jquery.serializeJSON 下载:jquery.serializeJSON-master jquery.serializeJSON 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交。 而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦。接下来介绍的插件将解决这个问题。 使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用 .serializeJSON() 方法来序列化form表单的数据成JS对象。 安装 Install with bower bower install jquery.serializeJSON, or npm npm… Read More

JavaScript 日期处理类库: Moment.js 写法示例(详解)

主页:http://momentjs.cn/ 文档:http://momentjs.cn/docs/ 项目地址:https://github.com/moment/moment/ 下载:moment-develop 引用: http://sources.ikeepstudying.com/js/moment-2.10.6.js  (未压缩) http://sources.ikeepstudying.com/js/moment.min-2.18.1.js (压缩版) http://sources.ikeepstudying.com/js/moment-with-locales-2.10.6.js (支持多语言)   1. 安装 bower install moment --save… Read More

Javascript: JS函数节流与防抖 throttle,debounce

throttle 与 debounce 都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。 概念 throttle:连续的时间间隔(每隔一定时间间隔执行callback)。 debounce:空闲的时间间隔(callback执行完,过一定空闲时间间隔再执行callback)。 电梯超时 想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应。假设电梯有两种运行策略 throttle 和 debounce ,超时设定为15秒,不考虑容量限制。 throttle 策略的电梯。保证如果电梯第一个人进来后,15秒后准时运送一次,不等待。如果没有人,则待机。 debounce 策略的电梯。如果电梯里有人进来,等待15秒。如果又人进来,15秒等待重新计时,直到15秒超时,开始运送。 <div… Read More

jQuery:sumoselect 插件实现select下拉复选框

主页:http://hemantnegi.github.io/jquery.sumoselect/ 项目:https://github.com/HemantNegi/jquery.sumoselect 下载:jquery.sumoselect-master DEMO: http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html 简单介绍 jquery.sumoselect是一款跨设备、跨浏览器的jQuery下拉列表框插件。该jQuery下拉列表框插件可以单选,也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用,所有设备上功能都是一致的。 该jQuery下拉列表框插件的特点有: 可以进行单选,也可以进行多选。 可以通过CSS文件来自定义样式。 支持绝大多数的设备。 根据设备智能渲染。 在Android、IOS、Windows和其它设备上会自动渲染出该设备原生样式的下拉列表框。 可以自定义提交数据的格式(多选可以通过 csv 或默认形式来提交)。 支持Selected、Disabled和占位文本。 易扩展,开发者可以很容易的创建新的组件。… Read More

基于localStorage开发的前端缓存jquery插件,jquery.cache.js

什么是localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同 localStorage的优势 1、localStorage拓展了cookie的4K限制 2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的 localStorage的局限 1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性 2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换 3、localStorage在浏览器的隐私模式下面是不可读取的 4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡 5、localStorage不能被爬虫抓取到 localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空   jquery.cache.js 主要代码如下: ;(function(window, undefined) {… Read More

jQuery插件:强大的下拉框插件-Select2

主页:https://select2.github.io/ 项目:https://github.com/select2/select2 实例:https://select2.github.io/examples.html 下载:select2-4.0.3 select2是一个可以给你定制支持搜索、标签、远程数据集,无限滚动,以及其他常用功能的一个下拉框美化插件。总之,功能很强大。 配置 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script> 基本使用 <script type="text/javascript"> $('select').select2(); </script> 单选框… Read More