Web前端
文章平均质量分 56
炼气散人
等儿子高考后,或许会回来
展开
-
Tab页用CSS3实现
本文学习自下面的一篇文章,但是做了修改。http://www.shejidaren.com/examples/css3-target/css3-target.html将Tab按钮变成了两个,并且移动到了上方。为了移动到上方,增加了一个包含了两个tab内容,两个tab内容采用绝对定位,而tabbody采用了相对定位,这样刚好位于和两个tab按钮之下。html代码如下: HT原创 2012-02-20 22:25:52 · 4285 阅读 · 0 评论 -
动态填充html select tag的options
用AMD模块写了一额select.js,用来帮助我动态创建options,并选中其中一个。调用代码参考例子: var s5 = this.select.create(); s5.bind("s5"); s5.addOption(0, "GMT+0"); s5.addOption(1, "GMT-8"); s5.addOp原创 2013-06-21 23:09:58 · 4403 阅读 · 0 评论 -
bootstrap css选择不同的宽度
刚开始使用bootstrap css开源项目。遇到一个问题,默认的input 宽度太大,需要找小一点的。其实只需要在input tag中选用预定义的较小的宽度即可。比如:input-small是预定义的一种类别,在bootstrap.css文件中有一组这样的类别:.input-mini { width: 60px;}.input-small { width: 90px;}.in原创 2013-06-22 19:02:19 · 8791 阅读 · 0 评论 -
复用jquery的ajax调用模块
每次都写一堆.ajax,真的很麻烦。因此封装在一个模块中比较好。第一,ajax调用出错时,自动弹出错误对话框,对话框使用的artDialog。第二,提供基本的post,get简单调用方式。参数有限,适合就好。第三,支持中英文。下面是我的代码,大家可以自己扩充:(function (window, document, undefined) { "use strict"; window.ajaxC原创 2012-12-15 19:04:08 · 5026 阅读 · 0 评论 -
用dojo checkstyle扫描代码
dojo checkstyle工具就在dojo sdk目录下,在util/checkstyle目录下有一个checkstyle.sh脚本。注意,其实检查代码的文件是checkstyleUtil.js,如果需要定制其中的规则,直接修改该文件即可。运行checkstyle.sh命令时,默认当前目录是sdk的顶层目录,而不是checkstyle.sh脚本所在目录。因此使用命令的时候如果用相对目录要小心:原创 2013-10-28 16:29:25 · 3101 阅读 · 0 评论 -
jshint 安装使用
首先要安装nodjs, 参考另一篇文章: Ubuntu 编译安装node.js然后运行npm install jshint -g之后在要扫描的目录下运行命令jshint . >> jshint_result.txt这样扫描结果都写到jshint_result.txt的文件。相比Jslint那么严格的规则,其实很多我都觉得是个人偏好问题,jshint更加合理。原创 2013-10-29 15:36:02 · 7670 阅读 · 4 评论 -
install dojo build system
dojo build system 可以用来扫描,优化JavaScript代码和CSS代码,并最小化。用于部署优化等等。首先要按装nodejs,不在本文描述。之后下载dojo toolkit sdk : http://download.dojotoolkit.org/release-1.9.1/dojo-release-1.9.1-src.tar.gz解压后放在~/work目录下,已经可以用了。查原创 2013-10-23 17:06:29 · 3680 阅读 · 0 评论 -
用flexigrid实现分页显示 一
flexigrid的深度定制,演示如何实现分页功能,适合JavaScript老手原创 2013-08-11 11:12:04 · 7437 阅读 · 0 评论 -
用flexigrid实现分页显示 二
一个可以重用UI的felxigrid 分页实现原创 2013-11-02 11:44:03 · 4767 阅读 · 3 评论 -
timepicker 支持中文
timepicker是一个jquery ui date的插件,可以支持选择时间和分钟。本文讨论如何支持中文,通过检查代码可以看到: /* * Timepicker manager. * Use the singleton instance of this class, $.timepicker, to interact with the time picker. * Settings fo原创 2013-11-04 14:08:04 · 7011 阅读 · 0 评论 -
使用jquery maskedinput插件
有时候HTML input tag中要设置固定的输入形式,这里介绍一个方便的辅助工具:http://plugins.jquery.com/maskedinput/下载最新版本1.3.1的jquery.maskedinput.min.js文件,以AMD方式加载:/*global window, document */require.config({ paths: { "jquery":原创 2013-11-09 16:45:19 · 5333 阅读 · 0 评论 -
Raphael hover事件使用
解决Raphael的hover参数传递的问题。原创 2013-10-26 14:27:17 · 4364 阅读 · 0 评论 -
多次注册事件会导致一个事件被触发多次
一个JavaScript逻辑,会自动绑定函数到按钮的click事件,但是这段代码会反复注册事件。这样依赖onNext函数会在点击一次按钮的时候多次触发。这是JQuery内部没有判断是否绑定多次,怀疑其内部用了数组保存事件函数,而且没有去重。下面的代码预防了这个问题。解决方案很简单。 if (!this.hasPageBarEvents) { $(".pNext").on("click"原创 2013-08-10 20:59:05 · 6381 阅读 · 0 评论 -
如何清空flexigrid
flexigrid的重新配置原创 2014-01-02 22:32:20 · 3406 阅读 · 0 评论 -
artDialogv6和jQuery 2.x以及RequireJS配合使用
用RequireJS加载artDialog最新版本原创 2014-01-29 19:49:24 · 5373 阅读 · 0 评论 -
JSON中双引号的轮回
1. 如果JSON对象中有属性是包含双引号的,比如{"description": "25""}如果转换成字符串形式,将自动加上反斜线,变为"25\"", 然后传递给REST API,保存到MongoDB中。此时如果使用MongoDB的shell显示该数据,为"25\"", 正确。void string_to_json_string(std::string const& str, std::stri原创 2014-03-03 16:45:18 · 5840 阅读 · 0 评论 -
jquery.artDialog在requireJS中使用遇到的加载顺序问题
jquery.artDialog估计没有支持AMD规范,所以当使用requireJS和AMD的模块化方法时,一开时没有碰到问题。后来在慢速网络环境下,发现jquery还没有完全加载完成,artDialog已经加载完并报错,导致总是要重新刷一次页面。requireJS提供的解决方案叫做shim, 参考文档:http://requirejs.org/docs/api.html#config-shim反原创 2013-02-23 14:18:50 · 7476 阅读 · 0 评论 -
用RequireJS编写JavaScript模块
模块化编写JavaScript,在web前端程序不断扩大的时候,是一个很好的重构技术。下面的例子有两个模块,artDialog模块依赖jquery和jquery.artDialog库,提供了弹出错误对话框的功能。require.config({ paths: { "jquery": "../thirdParty/jquery-1.8.0.min", "jquery.artDialog":原创 2012-12-17 22:01:14 · 3851 阅读 · 3 评论 -
JavaScript用匿名闭包封装模块
下面的代码是我的测试代码,注释很重要:/*global window,jQuery,validate_email,masterUI,$,rest*//** Enable ECMAScript "strict" operation for this function. See more:原创 2012-11-27 16:37:17 · 3091 阅读 · 0 评论 -
捕捉鼠标的移动
原文:http://www.webreference.com/programming/javascript/mk/column2/index.html参考这一节:Capturing Mouse Movement以下是意译:document.onmousemove = mouseMove;function mouseMove(ev){ ev = ev || window.ev翻译 2012-07-05 23:16:25 · 3683 阅读 · 1 评论 -
JavaScript拖拽图片一
本文演示如何将一张图片用鼠标拖拽到某个位置。先看html代码: drag demo <div id="icon1" onmousedown="mouseDown(event)" style="left:1px; top: 1px; position: absolute;"> 注意,必须在style中指定三个属性:原创 2012-07-09 19:17:01 · 8061 阅读 · 0 评论 -
JavaScript拖拽图片三
现在来解决兼容性问题。首先测试IE6,不通过。:(网上流传的IE不支持事件函数的event参数,改用window.event。经过测试,我的IE6 sp3是支持event参数的。所以类似代码var ev = e || window.event并不需要。但是IE并不支持从div对象中获取currentTarget,而是支持srcElement。所以下面的代码修改一下:function mouseD原创 2012-07-11 21:10:21 · 2715 阅读 · 0 评论 -
JavaScript拖拽图片四
现在用Firefox最新版本13.0测试,不work,图片会自动回到原位。安装firebug扩展后调试一下。到console窗口点击enable后,错误信息是:window.event is undefined.Firefox不支持window.event,因此所有用到event的地方要类似这样写:function mouseDown(e) { 'use strict'; e = e || w原创 2012-07-12 23:12:35 · 2910 阅读 · 0 评论 -
Flexigrid例子一: 添加数据但不绑定server-side请求
这里我解释一下我的术语--将flexigrid绑定到server-side请求你们会从互联网上发现有很多例子,它们都使用了url属性,就像这样:$("#displays").flexigrid( { url: 'load_all_displays', method:'POST', dataType: 'json', width: 400, height: 420, col原创 2012-08-25 15:42:11 · 5315 阅读 · 8 评论 -
Flexigrid例子二: 原位编辑器
有时候,我们想要编辑flexigrid里的数据。一个原位编辑器是需要的,现在不需要再弹出一个对话框了。这里我会展示如何做到这点。我使用了jquery-in-place-editor库。请参考官方站点:http://code.google.com/p/jquery-in-place-editor/step1: 在定义flexigrid模型的时候,添加一个函数来处理flexigrid的列$(docum原创 2012-08-26 11:03:09 · 5434 阅读 · 0 评论 -
flexigrid 获取选中的行
首先设置flexigrid为单选模式: $("#subUsers").flexigrid( { dataType: 'json', width: 237, height: 267, singleSelect: true, colModel : [ {hide: '_id', name: 'id', width: 158, sortable:原创 2012-10-18 21:47:20 · 7969 阅读 · 0 评论 -
flexigrid 编程实现选中checkbox
原理是1.遍历flexigrid产生的table对象,2.根据一定的规则(取决于业务需求)查找到某行的某列值就是要匹配的值,然后返回input对象3.对该input对象调用attr('chceked','checked')方法,设置为勾选状态。例子代码: //return input jquery object if the power.name is found in one row //ot原创 2012-10-21 12:47:59 · 3811 阅读 · 0 评论 -
flexigrid 添加checkbox
先来一张图,看看添加了checkbox的界面是怎么样的?flexigrid本质上用的是html的table元素,添加checkbox实际上就是每个tr里面添加一个td, td里面有一个div, div里面包含了input type=checkbox 这样的标记。在JavaScript添加很简单:首先我定义了一个config函数,创建了三个列: config : function (descript原创 2012-10-20 17:41:53 · 6748 阅读 · 2 评论 -
flexigrid 编程实现选中行
哦,这个其实很简单。因为选中行仅仅是一个tr上设置了class='trSelected' 。 setFirstSelected : function (grid) { grid.children('tbody').eq(0).children('tr').eq(0).attr("class","trSelected"); },上面的函数接收参数grid, grid代表flexgrid对象。通原创 2012-10-21 10:21:53 · 4193 阅读 · 0 评论 -
flexigrid checkbox选择事件
紧接上一篇,有了checkbox,用户自然会点击,一种做法是等用户选择完成后,用一个保存按钮来检查出所有被选项,然后执行保存的操作。不过我这里的方法更加即时,任何一个checkbox点击后,都会触发一次事件函数。这里用到前面的单击行事件的技巧: $("#powers tbody tr td").click(accounts.selectPower);上面的代码注册了selectPower为fle原创 2012-10-20 18:10:18 · 5324 阅读 · 2 评论 -
Disable div 的办法
由于div没有disabled属性,因此不能简单的通过设置disabled属性达到效果。通常div中包含了用于输入的tag,比如文本框,选择框,按钮等。因此问题转化为disabled div中的input tag.这就很简单了。通过JQuery 选择器 将div下的所有的input进行属性设置,添加或者删除disabled属性。参考下面我的例子代码: disablePowerConfig: fun原创 2012-11-15 19:57:05 · 34173 阅读 · 1 评论 -
flexigrid 添加行选择事件
假定我有一个html table元素,与之对应的有一个flexigrid,同时该flexigird支持单选,禁用多选。现在要添加一个事件函数,使得当点击任一行的时候会被调用。加入我的table元素的id是subUsers,现在定义事件函数,代码如下: selectAccount : function () { //do something. alert('Hi :)'); },现在将上面原创 2012-10-20 14:50:25 · 7189 阅读 · 12 评论 -
RequireJS管理js文件依赖示例
在使用RequireJS管理依赖之前,需要在html页面上手动引入一堆js文件,要注意依赖顺序。这倒没什么,最关键的是我认为html文件中搞这么多东西显得凌乱不堪,而且会影响web美工的工作。现在看看RequireJS带来的整洁的特点:下面有个html页面: configuration 最有一个script语句引入了require.js文件,并且在d原创 2012-12-13 16:02:47 · 6089 阅读 · 0 评论 -
flexigrid的处理函数使用闭包传递this对象
很多时候,process函数都需要获得this对象,然后调用一些方法。下面举个例子: config : function (groupName, description, deviceNumber, del) { var ob = this; $("#groups").flexigrid( { dataType: 'json', width: 870原创 2014-09-03 22:22:31 · 2411 阅读 · 0 评论