分类: WEB前端

jquery.zclip生成的flash坐标位置不对

发表于2年前(Jun 5, 2016 9:05:02 AM)  阅读 914  评论 0

分类: WEB前端 JS

标签: jquery.zclip ZeroClipboard 操作剪贴板 offsetParent scrollTop scrollLeft

出于安全的考虑,浏览器对代码操作的内容有所限制,像不允许不经用户同意就下载文件到本地,不经用户确定就进入全屏状态,不经用户点击就操作剪贴板等。今天要讲的内容就是关于操作剪贴板的。

由于各浏览器对操作剪贴板的支持不一致,有的甚至不支持操作剪贴板,如果要写一个通用的操作剪贴板的代码,几乎是不可能的事。现在比较完善的一个方案是采用flash的方式,ZeroClipboard就是用来解决跨浏览器操作剪贴板兼容的问题,jquery.zclip是其jquery插件的封装。

ZeroClipboard的原理就是将要点击的按钮,替换成一个透明的flash,然后用户点击按钮的时候,实际上是点击的flash文件,这时flash操作剪贴板完成复制功能,因为flash的跨浏览器特性,使得这一功能也不受浏览器类型影响。当然,前提是要装有flash插件。

示例代码:

            $(".op-link").zclip({
......

给Bootstrap Tags Input加上只读功能

发表于2年前(May 25, 2016 2:29:54 PM)  阅读 5035  评论 1

分类: WEB前端 JS

标签: Bootstrap-Tags-Input 标签云

Bootstrap Tags Input是一款针对Bootstrap UI的jquery插件,主要提供标签输入功能。它可以让用户很方便的创建标签,移除标签等:

但是Bootstrap Tags Input所有的标签都自带移除按钮,如果我们想隐藏移除按钮,像很多博客都有的标签云功能,即让标签变成不可编辑,会发现Bootstrap Tags Input并不支持。当然,用Bootstrap自带的label控件很容易就实现这样的功能,笔者这里主要介绍如果修改Bootstrap Tags Input插件,让它支持只读功能。

先贴出修改后的代码bootstrap-tagsinput.js:

/**
 * 2016-05-25
 *  增加allowEdit配置项,设置是否可以编辑tag
 *  增加allowClick配置项,添加了tagClick class,增加了手型鼠标样式
 *  增加onTagClick函数,设置点击
......

使用requirejs引入jqGrid插件

发表于2年前(May 23, 2016 9:30:01 AM)  阅读 1195  评论 0

分类: WEB前端 JS

标签: requirejs jqGrid grid.base jqGrid.locale

jqGrid是一个显示表格的jquery插件,除了能分页显示数据,还能进行过滤,行内编辑等等,几乎一切你能想到的功能,功能多,必然就庞大,其实我们经常使用的只是其中几个功能而已,所以很多人可能更愿意使用更加简单地表格控件。

requirejs是现今比较流行的js模块化的工具,可是使js按需加载,合并等一系列优化操作。

jqGrid官方文档中并没有说明如何使用requirejs引入jqGrid,只说明了传统的引入方式,简单来说就是下面几步:

<link rel="stylesheet" type="text/css" media="screen" href="path_to_ui_css_file/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="t
......

js变量,方法作用域的几个误区

发表于2年前(May 16, 2016 9:45:05 AM)  阅读 808  评论 0

分类: WEB前端 JS

标签: .ready 变量作用域 ajax.load

最近几个以前前端接触较少的同事在开发过程中经常碰到页面js找不到方法定义的类似错误,这都是因为页面js代码太多,各种回调,页面之间相互load,把自己绕晕了,不知道该如何写代码了,其实说到根本是没搞清楚js变量,方法定义的作用范围,下面笔者对容易出错的几个地方说明一下。

1、document ready方法

现在不管是传统项目还是互联网项目,jquery几乎成了必不可少的插件,jquery使用最多的除了各种选择器,估计可能要算document.ready方法了。笔者在08年接触jquery,真正用熟是几年后了,当初的理解跟现在理解有些不同,不知道当时理解有误还是大家都是那么用的。最初,笔者会在head里面将jquery引入,然后会在body前添加document.ready方法,形成了固有的编码习惯。后来,了解到性能优化相关的知识,也知道行业基本都是head引入css,body结束前引入js,不过对于jquery到底何时引入,还是要看具体情况的,如果在body结束前引入,势必要将document.ready方法也要滞后。一般来说,大家都知道

......

jquery load页面导致js重复加载

发表于2年前(May 11, 2016 1:03:36 PM)  阅读 2405  评论 0

分类: WEB前端 JS

标签: 缓存 jquery load js重复加载 事件重复监听 事件监听多次 ajaxSetup cache

1、问题发生场景:

主页包含两个div,div1,div2,div1采用jquery load了page1,div2采用jquery load了page2,page1与page2业务类似,共用一个js,主页可能同时显示page1和page2,这时发现js重复加载了。

2、问题分析:

打开chrome,查看network,在load page1时js后面自动加上了?_1462934775039参数,数字应该是时间戳,紧接着load page2时,js又load了一次,同样带了一个时间戳,和之前时间戳不一样。

首先,js后面带了时间参数是避免使用缓存,看来jquery load方法是默认给js不缓存。其次不管js是否是缓存,加载两次,里面的内容都会执行两次,如果是同名方法定义,后面的方法会覆盖前面的方法,如果是事件监听,则会出现添加多次的情况,这样就会有问题,其实发现这个问题就是因为笔者js里面的事件监听执行了多次,导致页面表现异常。例如如下代码就会导致执行两次:

......

bootstrap模态窗口modal使用remote加载数据的缓存问题

发表于2年前(May 10, 2016 9:16:51 AM)  阅读 6294  评论 0

分类: WEB前端 JS

标签: bootstrap modal remote 缓存 removeData show.bs.modal hidden.bs.modal

模态窗口是很常用的控件,经常用来装载复杂的表单,bootstrap提供的modal模态弹窗提供了data-remote属性,用来指定远程加载的页面。但是该功能有个问题,如果该弹窗实例已经运行一次,则不会加载远程url的内容了,也就是说,如果您使用他加载一个动态表单,加载一次以后,除非刷新页面,再次弹窗依然是上次加载的内容。这个问题也许并不一定是bug,可能作者就是为了性能考虑,特意做的缓存,如果能配置是否缓存就更加完美了。

为了解决缓存问题,有几下几种方案:

1、移除绑定数据

在打开modal之前(show.bs.modal)或者关闭modal之后(hidden.bs.modal)移除之前绑定的数据,可以单独针对一个modal操作,也可以添加全局的监听方法,如:

......

城市、行业、职位数据收录

发表于2年前(Mar 30, 2016 4:42:52 PM)  阅读 459  评论 0

分类: Java WEB前端

标签: 城市 行业 职位 招聘 数据抓取

1、前言

系统中选择城市是很常见的一个功能,而选择行业和职位是一个招聘网站最基本的功能,这几个功能一般不是几个下拉列表进行联动,就是弹出一个大面板进行选择,不管前台怎么展示,我们首先需要最基础的数据,本文就是来解决这几个基础数据列表怎么获取。

2、城市

城市在这里正确的表达方式应该是行政区划,这个行政区划代码在国家统计局网站上是有的。http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/​

打开最新的《最新县及县以上行政区划代码(截止2014年10月31日)》,可以看到我国行政区划分以及编码,细看可以发现,行政编码共6位数字,每两位为一个标识,分为省市区三级。直接复制网页内容,存在本地,再用程序稍微处理或者入库就可以作为数据源使用了(注意:编码与名称之间包含全角的空格,处理时需要注意)。

在国家统计局网站上还可以

......

颜色选择器jquery.colorpicker.js

发表于3年前(Oct 4, 2015 9:06:39 AM)  阅读 724  评论 0

分类: WEB前端 JS

标签: colorpicker

颜色选择器一般在OA,编辑处理类型的软件上常见,一般cs架构的框架都有内置的,但WEB方面就没有了。网上有很多封装了的颜色选择器,笔者感觉这个还不错,简单,源码就100多行,改起来容易,而且界面效果也跟传统使用习惯一致。先上一张运行效果图:

一般来说是够用的了,还可以直接输入颜色十六进制值。

下载地址:http://blog.cangzhitao.com/upload/2015/10/4/ColorPicker.zip

这个是网上原版,其中有几点要注意的地方,如果使用的jquery版本是1.9或者以上,jquery是没有live方法的了,如果您下的源码里面使用的live绑定方法,就会报错,需要改成bind或者on,on是官方推荐的方法。其次,如果碰到页面遮盖问题,请修改源码中的颜色层colorpanel该div的z-ind

......