分类:Javascript /Jquery / Bootstrap / Web

Javascript: 图表类, Chart.js使用总结, 数据可视化, 画折线图实例, Chart.js 快速入门, Chart.js图表的保存/下载

概述 Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中,还包含了大量的自定义选项,包括动画展示形式。 Chart.js比较轻量(gzip版本仅4.5k),且不依赖其他库。 Chart.js官网: http://www.chartjs.org/ 使用步骤 第一步:安装 #npm: npm install chart.js --save #Bower: bower install chart.js --save #CDN: https://cdnjs.com/libraries/Chart.js chart.js源码:https://github.com/nnnick/Chart.js… Read More

jQuery:实现简单table 排序, table sort

使用jquery.sortElements 方法: 引入库: <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript" src="https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script> HTML: <table> <tr> <th id="facility_header">Facility name</th> <th>Phone #</th> <th id="city_header">City</th> <th>Speciality</th>… Read More

JQuery: 操作数组 each、map、grep、filter, 循环数组, 编辑数组

Jquery中对数组的操作大致有一下几种形式: 1、$.each( collection, callback(indexInArray, valueOfElement) ) $.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。 其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。 下面举个例子: var mem = ['a','b','c']; var returnvalue = $.each(mem, function(index) { alert(index);… Read More

Javascript: 程序员装X必备—19个JS简写技巧,让你写代码速度翻倍!!

代码精炼是每个有追求的程序所向往的,本文总结了19个JavaScript的简写技术,其中包括三元操作符、短路求值简写方式、声明变量简写方法等等,希望对你有帮助。 1.三元操作符当想写if…else语句时,使用三元操作符来代替。 简写: 也可以嵌套if语句: 2.短路求值简写方式当给一个变量分配另一个值时,想确定源始值不是null,undefined或空值。可以写撰写一个多重条件的if语句。 或者可以使用短路求值方法: 3.声明变量简写方法 简写 4.if存在条件简写方法 简写: 只有likeJavaScript是真值时,二者语句才相等 如果判断值不是真值,则可以这样: 简写 5.JavaScript循环简写方法 简写 也可以使用Array.forEach: 6.短路评价给一个变量分配的值是通过判断其值是否为null或undefined,则可以: 简写 7.十进制指数当需要写数字带有很多零时(如10000000),可以采用指数(1e7)来代替这个数字: 简写… Read More

jQuery: 如何编写 jQuery 插件

译自 jQuery Plugins / Authoring   创建插件 看来 jQuery 你已经用得很爽了,想学习如何自己编写插件。非常好,这篇文档正适合你。用插件和方法来扩展 jQuery 非常强大,把最聪明的功能封装到插件中可以为你及团队节省大量开发时间。 开始 要编写一个 jQuery 插件,需要为 jQuery.fn 对象增加一个新的函数属性,属性名就是插件的名字 jQuery.fn.myPlugin =… Read More

添加holiday假日到fullcalendar ,Add Holiday Calendars to Full Calendar

如果你使用fullcalendar,添加holiday假日的方法如下: googleCalendarApiKey : 'PUT-YOUR-GOOGLE-API-HERE', // google api key eventSources: [ {url:'https://www.google.com/calendar/feeds/en.usa#holiday@group.v.calendar.google.com/public/basic',cache:true}, // us holiday {url:'https://www.google.com/calendar/feeds/zh.china#holiday@group.v.calendar.google.com/public/basic',cache:true}, // china holiday //'https://www.google.com/calendar/feeds/en.christian#holiday@group.v.calendar.google.com/public/basic', //… Read More

改造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 += this.view.buildGotoAnchorHtml(date,… Read More