标签为 "JavaScript" 的存档

jquery判断checkbox是否选中

所使用的jquery版本为jquery-1.9.1,浏览器为Chrome

1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase

2.如果使用attr方法获取时,如果当前input中初始化未定义checked属性,则不管当前是否选中,$(“#selectAll”).attr(“checked”)都会返回undefined;
如果当前input中初始化已定义checked属性,则不管是否选中,$(“#selectAll”).attr(“checked”)都会返回checked.

总结,如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr.

javascript需要避免的一些变量

任何一门编程语言都有一些保留字,javascript也不例外,至于有哪些这里就不一一罗列了,随便搜索下就知道了,而且一般情况下我们也不会越雷池的。

不过在开发中遇到了一些比较奇怪的现象,最典型的情况就是明明给某个对象添加了某个方法,但是在调用时就是报错。

这里需要说明的是,定义变量的时候采用了合并的方式,就是说如果之前该变量已经定义过,此处就指向该变量,否则定义为空对象。

请看下面的例子:

拿这段代码在firebug中执行会看到

Error: Cannot modify properties of a WrappedNative

如果改为直接定义变量,则没有问题。

我们直接在firebug中查看sidebar,发现

[xpconnect wrapped (nsISupports, nsISidebar, nsISidebarExternal)] { QueryInterface=QueryInterface(), addPanel=addPanel(), addPersistentPanel=addPersistentPanel(), 更多…}

应该是浏览器使用了这个变量,看来我们只有绕道了。

似乎这样的变量还不止一两个,至于有多少,有没有列表飞尘真的是不晓得了,查了半天也没弄出个所以然来,看来只能靠大家慢慢搜集整理了,希望有一天可以发布一份变量冲突表,以飨读者。

变量名 IE Firefox Chrome
sidebar xpconnect wrapped
top object Window window window

使用javascript实现回车提交表单

在web开发中,表单提交是最普通不过的事情了,也是使用很频繁的一种交互方式,例如我们几乎每天都有遇到的用户登陆。

绝大部分的网站在为用户提供服务时都要求用户进行登陆,这无可厚非,暂时也是必然的选择,否则怎么能为用户提供个性化的服务呢?

闲话又扯了一大堆,说正事吧。登陆既然必不可少,那就登陆呗,不过这里也是有些值得探究的。现在不都提倡用户体验吗,登陆这个事情自然也应该优化一下,其实这个早在很多年前就有了,比如登陆时的记住密码,选中后用户下次访问网站就不必再进行登陆了,不过对于现代人对隐私性的要求及安全性的考虑,有些时候是不太适合做记住密码处理的,这样用户每次必须重新登陆才可。

记得有人说过,能让用户点一下,就不要让用户点两下,我们的上帝时间很宝贵的,也是很懒的哦,呵呵。出于这样的考虑,当用户输入完用户名、密码时,接下来要做的就是点击登陆,可是一般情况下,输入是在键盘上操作的,而要点击“登陆”,需要换手到鼠标,然后移动到登陆按钮上点击才能完成登陆,这样的操作虽然并不是很麻烦,但是本着精益求精的精神,我们应该压榨再压榨,把它榨干为止。

其实很简单啦,用户输入完成,敲下回车就能实现登陆,这样的速度绝对秒杀鼠标点点吧。

这里飞尘要想多了一点,其它的表单也是可以回车提交的,所以这里处理起来有一点需要注意的,填表单的时候,一般情况下浏览器会记录用户曾经输入的内容,如果用户输入相同的内容,之前的历史会下拉显示,这时用户通过键盘方向键可以直接选择内容,回车确定,这里就需要将这样的回车区别开来,否则直接提交表单就不是我们所希望的了。

罗里吧嗦的说了那么多,口都干了,赶紧上点实货吧。众里寻他千百度,暮然回首,代码就在灯火阑珊处。

删除ckeditor中图片

作为富文本编辑器,ckeditor提供了丰富的功能供使用,自然图片上传是比不可缺的。

对于服务端如何配合图片上传不在本文的讨论范围,这个相信搜索一下就不乏大面积的教程文章之类的。

飞尘在这里是遇到这样的功能需要,图片上传之后,需要一个删除功能,可能这样表述的不是很明确。就以一般论坛为例,发过帖子的都应该知道,可以上传附件,附件上传后也可以删除。这里的图片也做类似的处理,即有个图片附件的列表,显示所有已经上传的图片,图片上传后是可以直接插入到当前编辑的内容中的,此时如果在图片附件列表中删除了某个图片,而图片已经被插入到内容中,就会出现不同步的情况,编辑的内容在显示的时候就会引用一张被删除的图片,这是我们不希望看到的。

于是我们希望删除图片附件的同时,将编辑内容中的图片也一并删除,这样就可以保持同步了。

思路大概是这个样子,图片的地址在上传后我们是知道的,这样在删除图片附件时,从编辑内容中查找到该图片节点,并将其删除,看上去好像很简单哦,嗯,的确使得,嘿嘿。

那就不再多啰嗦了,附上一段样例代码吧:

extjs表格展开更多内容

事情是从官方的一个表格的例子开始的。

就是其中第一个名为“Expander Rows in a Collapsible Grid”的表格吸引了飞尘。

通过这个可以展开和折叠的小功能,我们就可以直接在表格中展现更多的内容,而不需要新窗口或者额外的页面。

这么好的方法自然要用到项目中了,找来先有的表格做测试,对比了一下,与官方例子主要的差别就在于这个plugins属性了。

于是直接copy来,修改为自己的数据字段,并加入到原有的grid创建代码中。

意料之中的页面出现错误,直接就不显示表格了,看来这个plugins并不简单啊,呵呵。

又去观察了一下官方例子,发现引用了另外的js:

examples/ux/RowExpander.js?_dc=1323855646488

原来这个不在extjs中,而是extjs的扩展插件。

在自己的extjs文件夹找了下,的确是有这个文件的,那就引用一下好了。

但是问题并没有彻底解决,这次报脚本错误了:

this.view is undefined

官方查到了这个bug,已经在新版本中进行了修正。

http://www.sencha.com/forum/showthread.php?141590-New-bug-in-RowExpander-plugin

http://www.sencha.com/forum/showthread.php?139187-rowexpander-does-not-work

项目启动时使用的extjs是4.0.2a版本,于是去看了下最新的版本,升级到了4.0.7。小版本的升级应该不会有太多变化,于是下载最新版本,替换现有的4.0.2a。把已有的功能过了一遍,没有问题,平滑升级。

关于之前发现的中文本地化一个问题,依然存在,于是手工修改了一下,详细内容就不多说了。

RowExpander的终于正常工作了。

赶快体验一下展开表格的酷炫感受吧。不幸的是又出现了新问题,当表格设置了高度,且加载的数据条目较少,表格不会有滚动条,当有多个记录被展开后,表格中内容的高度就超过了表格设定的高度,但是表格并未出现意料中的滚动条,如图所示:

而对于开始数据就比较多,表格已经有滚动条的情况,展开是没有问题的。

查看了RowExpander.js的源码,其中toggleRow就是展开、折叠时做的一些处理,方法的最后一行

this.view.up(‘gridpanel’).invalidateScroller();

似乎已经对滚动条进行了考虑,没有再继续追查,通过表格对象的getHeight()方法对比了折叠前后的表格高度,发现一样都是创建表格时设置的高度。

借鉴之前的经验,在这个时候再对表格执行一下doLayout(),使其重新渲染,但是没有效果,滚动条依旧没有出现。

经过查阅,refresh可以搞定,增加下面一句:

this.view.up(‘gridpanel’).view.refresh();

再来查看表格,展开时久违的滚动条终于露脸了。

提醒一下,最好保留原始的extjs所有文件,自己修改过的文件,复制一份到项目路径,修改最好添加简单的注释说明。这样以后升级版本时会方便很多。

解决extjs使用chart设置category未定义

本文主要是解决extjs使用chart设置category未定义的问题。

定义一个json对象,注意其中的数据类型都是字符串。

var data = [{
name : ‘Jan’,
value : ’20’
}, {
name : ‘Feb’,
value : ’25’
}];

定义store,此处没有指定数据类型,而这样会带来潜在的问题,后面就可以看到。

var store = Ext.create(‘Ext.data.Store’, {
fields : [‘name’, ‘value’],
data : data
});

创建一个chart,此处设置为category并使用line折线类型。注意此处的数据类型为numeric。

放到Ext.onReady(function() {});里就可以看到效果了。

从图中可以看到,虽然图表画出来了,但是y轴的坐标是错误的。这就是前面data以及store中数据类型与chart中要求的数据不统一造成的。

不是说js若类型吗,但那也是有类型的。所以需要对data或者store中的数据类型进行一下预处理,以满足chart的需要。

store在初始化的时候就提供了数据类型的设置,可以自动完成类型的转换。

var store = Ext.create(‘Ext.data.Store’, {
fields : [{
name : ‘name’,
type : ‘string’
}, {
name : ‘value’,
type : ‘int’
}],
data : data
});

经过这样修改后,如图显示正常了。但是下面的问题才是本文的重点。

假如现在data中只有一条数据:

var data = [{
name : ‘Jan’,
value : ’20’
}];

来看看extjs给我们的效果吧:

天哪,怎么这个样子啊,只有一个点折线自然是没有了,就这一个点也不知道跑到哪里了,似乎在左上角的地方。而且还有一个undefined,真是丑陋无比,在注重用户体验的今天这是无法容忍的。

好吧,那我们自己增加两个端点,让烦人的undefined见鬼去吧。

if (data.length === 1) {
data.push({
name : ‘after’
});
data.splice(0, 0, {
name : ‘before’
});
}

来看看效果,有了点进步,但是依然不理想。端点应该只是体现在x轴的标签上,折线就免了,因为两边不一定也不应该是0,理想的效果是,只显示原来的一个点,不需要有线。

经过了一番摸索,终于找到了解决的办法。对于data中的数据进行处理,将字符串类型的数据转换为数值型。

for (i in data) {
data[i].value = parseInt(data[i].value);
}

对于store依然保持原始的定义方式

var store = Ext.create(‘Ext.data.Store’, {
fields : [‘name’, ‘value’],
data : data
});

最终的效果,这下看上去舒服多了。