在仪表盘的任务增多同时，列表页的百分比圆环或圆饼也随之增多，于是顺手在仪表盘的基础上，封装了一个小小的jquery插件（jq-canvaspercent.js），暂且版本1.0吧，到以后业务的变化在对其进行功能拓展；暂时性用于页面中有多处百分比圆环的效果处理，还是不错的。 jq-canvaspercent.js代码比较简单，以下直接给出插件代码和几张截图：/* * canvaspercent 0.1 * Copyright：HeavyShell * Date: 2016-06-27 * 利用canvas绘图实现百分...
使用v-for绑定列表时，有时候需要绑定如select2之类的jQuery插件。 需要在Vue根据数组内容生成dom元素之后，去找到该dom元素，然后 $().xxx绑定jQuery插件。 之前使用Vue.nextTick方法，在一次dom更新以后执行延迟回调，渲染jQuery插件。 然而这并不是一种很好的方式，有时候难以确定dom元素更新是否是我们需要关注的那个。 在列表中渲染Jquery插件的正确姿势，是使用自定义指令。自定义指令提供了一些钩子函数，可以准确的监听到...
上一节随笔中，我们已经知道了关于jQuery插件ImgAreaSelect基本的知识；那么现在看一下实例： 首先，要知道我们应该实现什么功能？ （1）图片能够实现上传预览功能 （2）拖拽裁剪图片，使其能够显示裁剪后的区域 （3）显示要裁剪区域的坐标 其次，该如何引用该插件呢？ 那就具体看一下吧！ 第一步：先将样式和文件包引入（根据你自己的位置引入）<!--引入imgareaselect的css样式--> <link rel="stylesheet" type="text/css" hre...
关于ImgAreaSelect, 是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，如图片拖曳、图片编辑等~~来具体看一下 1、先下载imgAreaSelect插件 下载地址： 英文：http://odyniec.net/projects/imgareaselect/ 中文：http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html 在头部引用： <link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default...
一、有请jquery.guide.js 网站上线或者改版的时候，常常会做一个操作向导，告诉用户一些重要操作到了哪里，或者什么地方隐藏了什么好玩的东西，等等，虽然我都是直接关掉的，或者快速跳过，但是对有部分用户而言还是很有用的。 这种提示比较好的交互效果是采用镂空的半透明遮罩，视觉重点一目了然，类似这样： 我在去年的时候曾经写了一篇文章，名为“ 腾讯微云黑色遮罩引导蒙版更好的CSS实现方式 ”，介绍如何使用单标签，实现类似...
select2是一款jQuery插件，是普通form表单select组件的升级版。 可以定制搜索、远程数据集（Remote data，本篇主要介绍点）、无限滚动（数据分页功能，这一点很妙）、还有很多高端的参数设置（有需要的下次介绍）。 内置了40种国际化语言，不过这里我们只需要用到中文。 同时支持现代和传统浏览器内置，甚至包括惹人不高兴的IE8。 那么，现在让我们开始一段select2的奇幻之旅吧！ 一、惊艳的效果，来一睹为快吧本地实战结果二、导入...
本文实例讲述了jQuery插件FusionCharts绘制的2D双柱状图效果。分享给大家供大家参考，具体如下： 1、FusionCharts中的2D双柱状图页面 index.html： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FusionCharts 2D双柱状图</title> <script type="text/javascript" src="jq...
本文实例讲述了jQuery插件FusionCharts绘制的2D条状图效果。分享给大家供大家参考，具体如下： 1、设计思路 （1）了解条状图的一些特性和共性，掌握其特性； （2）根据FusionCharts设计条理，设置静态页面和数据源； （3）引入条状图，设置其属性。 2、设计步骤 （1）设计生成条状图的脚本 $(function(){var bar2D = new FusionCharts( "FusionCharts/Bar2D.swf", "myChartId", "100%", "540", "0" );bar2D.setXMLUrl("bar2D.xml")...
实现的主要功能如下： 1.点击按钮的时候，可以进行倒计时，倒计时自定义。 2.当接收短信失败后，倒计时停止，可点击重新发送短信。 3.点击的元素支持一般标签和input标签。 html代码： <input type="button" class="sameBtn btnCur" value="发送验证码"/> <div class="sameBtn btnCur2">发送验证码</div>css代码： body{padding:100px;text-align: center;} .sameBtn{display: inline-block;font-size:12px;cursor:pointer;width:7...
本文实例讲述了jQuery插件FusionCharts绘制的3D双柱状图效果。分享给大家供大家参考，具体如下： 1、3D双柱状图页面源码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FusionCharts 3D双柱状图</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></...
本文实例讲述了jQuery插件FusionCharts绘制2D双折线图效果。分享给大家供大家参考，具体如下： 1、设计思路 （1）根据双折线图的特性和共性，设计出双折线图； （2）设置数据源XML格式 2、设计步骤 （1）写出双折线引入的图类型和数据源路径 var doubleLine = new FusionCharts( "FusionCharts/MSLine.swf", "doubleLineId", "100%", "540", "0" ); doubleLine.setXMLUrl("doubleLine.xml"); doubleLine.render("doubleLineChart")...
本文实例讲述了jQuery插件FusionCharts绘制2D环饼图效果。分享给大家供大家参考，具体如下： 1、静态页面index.html： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FusionCharts Doughnut2D</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script...
本文实例讲述了jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果。分享给大家供大家参考，具体如下： 1、设计思路 （1）了解组合图的特性以及用法，选用图的类型； （2）设计出两根柱子和两根折线，分开展示。 2、设计步骤 （1）设计页面 index.html： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="...
本文实例讲述了jQuery插件FusionCharts绘制的2D双面积图效果。分享给大家供大家参考，具体如下： 1、页面 index.html： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FusionCharts 2D双面积图</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></scrip...
本文实例讲述了jQuery插件FusionCharts绘制的3D环饼图效果。分享给大家供大家参考，具体如下： 1、index.html页面： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FusionCharts Doughnut3D</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> ...