分类:
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的不同。