分类: WEB前端 JS

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

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

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

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

示例代码：

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

分类: 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函数,设置点击

分类: 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

分类: 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方法也要滞后。一般来说，大家都知道

分类: 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里面的事件监听执行了多次，导致页面表现异常。例如如下代码就会导致执行两次：

分类: 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操作，也可以添加全局的监听方法，如：

分类: WEB前端 JS

标签: join 行内js slice

分类: Java WEB前端

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

1、前言

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

2、城市

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

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

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

分类: 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

分类: Java WEB前端 JS

标签: CKEditor syntaxhighlighter 转义 正则表达式

本文主要描述syntaxhighlighter在结合ckeditor使用时代码块转义方面的问题。

在进行正则表达式选取代码转义时，本文提供了后台java方法以及前台js方法，借此正好可以对比正则表达式中java与js的不同。