分类存档: 前端技术

jQuery UI及其插件在企业环境的应用总结

一、博文背景

使用jQuery差不多3年了,开始只是简单的应用,后来发现了官网开发的jQuery UI;从去年的一个项目开始使用jQuery UI作为主要的UI插件,选择jQuery UI的主要原因是因为需要使用jqGrid这个插件,而这个插件又使用了jQuery UI的主题;再者jQuery UI提供主题的自定义,这样对于一些喜欢不同风格的客户来说就比较容易切换自己喜欢的主题了。
写这篇博文的想法就是因为基于jQuery UI开发了两套系统,并且都运行正常,而且客户的反应也不错,所以整理以下和大家分享我的经验,同时也和正在使用的童鞋交流,希望起到抛砖引玉的作用。

二、jQuery UI基础

官网http://jqueryui.com/
演示http://jqueryui.com/demos/
下载http://jqueryui.com/download
在线主题自定义http://jqueryui.com/themeroller/

在我们的系统中主要使用了Dialog、Tab、Button、Autocomplete等功能,下面会对于使用过程中遇到的问题进行列举:
继续阅读 »

原创文章,转载请注明: 转载自what is the RIA? just it…||咖啡兔

本文链接地址: jQuery UI及其插件在企业环境的应用总结

咖啡兔

一只咖啡兔,热爱开源,喜欢追踪、研究新技术,向往背包游…… 讲究效率,坚信:“工欲善其事必先利其器” 使用Linux(Ubuntu),基于Java和jQuery开发企业RIA应用

More Posts - Website

jquery.validate插件remote规则相同值不验证的问题解决办法

一、由来说明

使用jquery.validate插件的remote规则来验证一组参数是否重复,我的需求不像其他应用一样只验证一个字段是否重复,而是要依赖其他的几个字段来组合判断,所以jquery.validate就有点水土不服了。

二、环境说明

jQuery validation版本号: jQuery validation plug-in 1.7
$Id: jquery.validate.js 6403 2009-06-17 14:27:16Z joern.zaefferer $

三、实例说明

验证规则功能说明(图一)

见左图,要保证[会员等级]和[积分来源]的联合唯一,类似于数据库的联合主键。

验证代码片段:
继续阅读 »

原创文章,转载请注明: 转载自what is the RIA? just it…||咖啡兔

本文链接地址: jquery.validate插件remote规则相同值不验证的问题解决办法

咖啡兔

一只咖啡兔,热爱开源,喜欢追踪、研究新技术,向往背包游…… 讲究效率,坚信:“工欲善其事必先利其器” 使用Linux(Ubuntu),基于Java和jQuery开发企业RIA应用

More Posts - Website

城市级联选择插件jquery.area2select闪亮登场(前后台设计)

公司的一个二期项目需要使用地区信息的级联选择功能,因为本来有数据库设计所以就根据数据库设计构建了本次要发布的插件:jquery.area2select,算是真正意义上的第一个jQuery插件吧。
插件的开发目的一是为了公司的项目试用,另外一个就是把各种我平常开发积累的东西分享给大家,也就是我创建的wsria项目。

一、文档以及API

如果看着累直接点击这里,在新窗口打开。

二、配套演示地址

因为是和后台配合使用,所以专门搭建了一个部署在tomcat上的演示程序;
演示地址:http://kafeitu.gicp.net:10000/demo,进入页面后在左侧的“地区信息”栏目中。
继续阅读 »

原创文章,转载请注明: 转载自what is the RIA? just it…||咖啡兔

本文链接地址: 城市级联选择插件jquery.area2select闪亮登场(前后台设计)

咖啡兔

一只咖啡兔,热爱开源,喜欢追踪、研究新技术,向往背包游…… 讲究效率,坚信:“工欲善其事必先利其器” 使用Linux(Ubuntu),基于Java和jQuery开发企业RIA应用

More Posts - Website

利用JavaScript获取窗口/Body的宽度和高度(让jqGrid自适应窗口大小)

项目中使用了easy-uijqGrid,我使用easy-ui的layout布局,然后用jqGrid显示数据列表,easyu-ui在改变窗口大小的时候可以自适应,而jqGrid要加一些盐了,所以用到了获取窗口大小的几个参数,这样就可以根据窗口大小改变的时候改变jqGrid的高度和宽度,从网站找的别人写的例子:

演示地址:http://demo.wsria.com/window/window-all-size.html

可以试着改变窗口大小然后点击“尺寸调试”按钮。
下面分享一下easy-ui的layout布局中把jqGrid列表页面嵌入到iframe的大小例子
继续阅读 »

原创文章,转载请注明: 转载自what is the RIA? just it…||咖啡兔

本文链接地址: 利用JavaScript获取窗口/Body的宽度和高度(让jqGrid自适应窗口大小)

咖啡兔

一只咖啡兔,热爱开源,喜欢追踪、研究新技术,向往背包游…… 讲究效率,坚信:“工欲善其事必先利其器” 使用Linux(Ubuntu),基于Java和jQuery开发企业RIA应用

More Posts - Website

推荐精选3枚jQuery遮罩插件

第一枚:Fancybox

  • 点评:简介实用,麻雀虽小五脏俱全;有详细的说明文档
  • 体积pack版本只有14K,算是比较小的
  • 网址http://fancybox.net/
  • 功能
    单行、自动设置大小、Ajax和Iframe加载方式、Flash、不存在图片和URL提示、图片画廊
    支持 Esc关闭、散入淡出

第二枚:FaceBox

第三枚:ColorBox

原创文章,转载请注明: 转载自what is the RIA? just it…||咖啡兔

本文链接地址: 推荐精选3枚jQuery遮罩插件

咖啡兔

一只咖啡兔,热爱开源,喜欢追踪、研究新技术,向往背包游…… 讲究效率,坚信:“工欲善其事必先利其器” 使用Linux(Ubuntu),基于Java和jQuery开发企业RIA应用

More Posts - Website

为jstree添加双击事件切换[展开/收缩]功能

一、概述

jstree是一个基于jQuery开发的优秀树插件,能够快速生成美观实用的树;目前项目中使用了这个插件遇到了一点问题,以前使用simpletree的时候可以双击父节点[展开/收缩]子节点,但是好像jstree没有提供这个功能,所以只有自己开发了。

使用的版本号:jsTree 1.0-rc1
没有添加双击功能时:http://www.wsria.com/demo/jstree/jstreeNormal.html

二、分析源码

继续阅读 »

原创文章,转载请注明: 转载自what is the RIA? just it…||咖啡兔

本文链接地址: 为jstree添加双击事件切换[展开/收缩]功能

咖啡兔

一只咖啡兔,热爱开源,喜欢追踪、研究新技术,向往背包游…… 讲究效率,坚信:“工欲善其事必先利其器” 使用Linux(Ubuntu),基于Java和jQuery开发企业RIA应用

More Posts - Website

[转][推荐]15 个 JavaScript Web UI 库

从cnbeta.com看到的,分享给大家;原文:http://www.cnbeta.com/articles/111512.htm

几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面。本文介绍了 15 个非常强大的 JavaScript Web UI 库,非常适合各种各种规模的富 Web 应用的开发。 LivePipe
LivePipe UI 基于 Prototype Javascript 框架,包含了一整套 经严格测试并高度可扩展的 UI 控件,拥有很好的文档,在不支持 JavaScript 的环境中,可以无缝降级使用。包括 Tab, 窗体,文本框,多选框,评分控件,进度条,滚动条,右键菜单等多种控件。

LivePipe 首页与下载
LivePipe 演示与示例


UKI

UKI 是一套简单的 JavaScript UI 工具集,用于快速创建桌面风格的 Web 应用。包含的控件从滑动条,到分栏视图,不一而足。熟悉 jQuery 的开发者会发现这个工具很容易上手,非常简洁,无需安装框架,不依赖 CSS 引用。

UKI 主页与下载
UKI 控件,演示,示例


继续阅读 »

原创文章,转载请注明: 转载what is the RIA? just it…||咖啡兔

本文链接地址: [转][推荐]15 个 JavaScript Web UI 库

咖啡兔

一只咖啡兔,热爱开源,喜欢追踪、研究新技术,向往背包游…… 讲究效率,坚信:“工欲善其事必先利其器” 使用Linux(Ubuntu),基于Java和jQuery开发企业RIA应用

More Posts - Website

jqGrid查询中文乱码问题解决办法(2011-11-11)

终极解决办法-2011-11-11

之前是通过修改源码的方式解决乱码问题,但是只能解决一部分问题而且不利于升级,@嘴大饿急的意见我实验了一下比较完美,设置所有的ajax请求都使用post请求就可以了,具体代码:

$.jgrid.ajaxOptions.type = 'post';

上面的这段代码可以在项目的common.js中设置,这样所有的jqgrid的ajax请求都是用post发送,远离乱码……清净了!
哎呀,今天又是一个好日子,百年一遇的六一……

历史解决办法

jqGrid是我用过最好的基于jQuery的列表插件,在项目中试用后效果很不错,基于jQuery UI的界面美观并且可以更好皮肤……

花了一天时间实现了增删改和查询功能,但是在查询中文的时候遇到了乱码问题……诡异,说一下情况:

  • 我的开发环境是全站UTF-8,而且有编码Filter;
  • jqGrid版本为:3.6.4

在后台断点调试发现如下特点:

1、新增、编辑没有乱码问题

2、查询中文后台时得到的参数是乱码

然后就考虑了,如果是开发环境问题那肯定全部都有乱码问题,所以问题应该在jqGrid的查询函数里面,最后通过Firebug找到了:

c.find(".ui-search").click(function() {

这一行是查询功能的开始也就是点击“查询”的触发函数

所以根据以往的经验在这里把参数值编码一次就可以了,也就是encodeURIComponent函数具体修改如下:

  1. 找到第6202行
  2. 找到代码
    6201
    6202
    6203
    
    var p = jQuery(this).find("select[name='field'] :selected").val(),
    g = jQuery(this).find("select[name='op'] :selected").val(),
    f = jQuery(this).find("input.vdata,select.vdata :selected").val();
  3. 现在看到这里的3行代码就是查询时获取参数的3个变量,我们要修改的就是这里,最终代码:
    6202
    6203
    6204
    
    var p = encodeURIComponent(jQuery(this).find("select[name='field'] :selected").val()),
    g = encodeURIComponent(jQuery(this).find("select[name='op'] :selected").val()),
    f = encodeURIComponent(jQuery(this).find("input.vdata,select.vdata :selected").val());

到此大功告成

——————————–分割线———————————–

为了方便网友顺便提供本人修改后的jqGrid3.6.4版本的源码,分为3种类型(未压缩、迷你版、压缩版pack)

资源下载:jquery.jqGrid.3.6.4.js 共 361 次

资源下载:jquery.jqGrid.min.3.6.4.js 共 367 次

资源下载:jquery.jqGrid.pack.3.6.4.js 共 285 次

jqGrid3.8版本,更新日期(2010-11-06)

此版本是我修改后一直在项目中运行的,目前没有发现问题,特此公布,仅有min和pack版本
资源下载:jquery.jqGrid.min-3.8.js 共 230 次

资源下载:jquery.jqGrid.pack-3.8.js 共 216 次

原创文章,转载请注明: 转载自what is the RIA? just it…||咖啡兔

本文链接地址: jqGrid查询中文乱码问题解决办法(2011-11-11)

咖啡兔

一只咖啡兔,热爱开源,喜欢追踪、研究新技术,向往背包游…… 讲究效率,坚信:“工欲善其事必先利其器” 使用Linux(Ubuntu),基于Java和jQuery开发企业RIA应用

More Posts - Website

[转][推荐]jqGrid基础学习系列文章

最近项目中使用了jqGrid数据网格插件,看到了网友写的一系列文章分享给大家看

原创文章,转载请注明: 转载自what is the RIA? just it…||咖啡兔

本文链接地址: [转][推荐]jqGrid基础学习系列文章

咖啡兔

一只咖啡兔,热爱开源,喜欢追踪、研究新技术,向往背包游…… 讲究效率,坚信:“工欲善其事必先利其器” 使用Linux(Ubuntu),基于Java和jQuery开发企业RIA应用

More Posts - Website

直逼 Flash 的流畅感:jQuery 运动特效展示

新闻来源:devsnippets.com
围剿 Flash 的不仅有 HTML 5,还有 JavaScript,著名的 JavaScript 框架 jQuery 在运动特效方面已经越来越流畅,有时候你需要点一下右键来确认它不是 Flash。本文介绍了10个非常出色的 jQuery 运动特效,这些效果可以更有效地展示你的内容。

Flash喝西北风去吧,走,看看jQuery多牛X……

继续阅读 »

原创文章,转载请注明: 转载自what is the RIA? just it…||咖啡兔

本文链接地址: 直逼 Flash 的流畅感:jQuery 运动特效展示

无觅相关文章插件,快速提升流量

咖啡兔

一只咖啡兔,热爱开源,喜欢追踪、研究新技术,向往背包游…… 讲究效率,坚信:“工欲善其事必先利其器” 使用Linux(Ubuntu),基于Java和jQuery开发企业RIA应用

More Posts - Website

Page 1 of 41234