分类: WEB前端 > JS

给Bootstrap Tags Input加上只读功能

发表于2年前(May 25, 2016 2:29:54 PM)  阅读 4403  评论 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)  阅读 1007  评论 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)  阅读 699  评论 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)  阅读 2031  评论 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)  阅读 5954  评论 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操作,也可以添加全局的监听方法,如:

......

颜色选择器jquery.colorpicker.js

发表于2年前(Oct 4, 2015 9:06:39 AM)  阅读 623  评论 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

......

获得高度,兼容IE,FF,Chrome

发表于3年前(Dec 24, 2014 2:37:40 PM)  阅读 811  评论 0

分类: WEB前端 JS

标签: 高度

在前台碰到一个问题,需要获得整个页面有多高,即document的高度,JQuery中提供了$(document).height()方法来获得document的高度,但在测试兼容性时,发现Chrome浏览器不兼容,获得的高度为当前浏览器可见的文档高度,并不是我想要的,然后网上查资料,找到下面信息:

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.b

......

artTemplate学习笔记

发表于3年前(Dec 24, 2014 1:04:53 PM)  阅读 1294  评论 0

分类: WEB前端 JS

标签: artTemplate js模板引擎

artTemplate是腾讯开发的js模板引擎,以前有一段时间搞前台时,一直为前台跟后台分离很是头疼,当时自己尝试用js操作json对象去填充数据,一定程度上还是解决了一些问题。前两天偶然看到一篇artTemplate的软文吧,感觉还不错,于是空闲时间就准备玩玩artTemplate。

artTemplate的标准解释读者自己去网上找,笔者所认为的artTemplate就是把用js代码使用json数据渲染html模板(这里是html模板还是js模板看个人理解了)。举个例子,我们经常在jsp页面中迭代遍历一个集合,以展现数据,这时这个jsp页面就既包含了html代码,又包含了java代码,这就使后台开发者拿到静态页面后还具有一定的工作量。使用js模板引擎,美工开发页面时,就只要定义需要什么样的数据,然后把数据用js模板引擎语言去迭代展现(这里美工就需要多学一种js模板引擎语言),而后台开发者只需要写个服务提供对应的数据,将数据替换即可。

网上现在关于artTemplate的资料还不是很多,大部分都还是GitHub提供的例子,这篇博文主要就是记

......