分类 "前端技术" 的存档.

描述

前端技术：html、css、ajax、javascript等

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

2010年6月19日 咖啡兔
{ 5 条评论 }

一、概述

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

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

二、分析源码

阅读更多…

Popularity: 20%

jQuery, 个人作品, 前端技术 ,

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

2010年5月20日 咖啡兔
{ 没有评论 }

从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 控件，演示，示例


MochaUI

MochaUI 是 MooTools Javascript 框架 与 ExplorerCanvas 的一个备受欢迎的扩展，可以用来快速创建 Web 应用，Web 桌面，网站，饰件，独立 Windows，Modal 对话框等等。

MochaUI 主页与下载
MochaUI 控件，演示，示例

中文编译来源：锐商企 业CMS 网站内容管理系统 官方网站
Sigma Ajax UI Builder
SigmaVisual 是一套基于 Web 的，所见即所得的 AJAX UI 创建工具，包含超过40个不见，如 Tab，对话框，树形图，时间线等，基于 JavaScript 和 PHP。

Sigma Ajax UI Builder 主页和下载
Sigma Ajax UI Builder 控件，演示和示例


JxLib based MooTools

JxLib 是一个基于 MooTools 的 JavaScript UI 框架，包含多数 Web 程序都需要的基本空间，如按钮，Tab，菜单，树形结构，对话框等等。JxLib 还支持换肤功能。

JxLib 主页与下载
JxLib 控件，演示与示例


Dijit – The Dojo Toolkit

Dijit 基于 Dojo，也是学习 Dojo 扩展的一个好起点。可以用来创建非常漂亮的 Web 2.0 GUI。支持多语种，甚至支持不同语种的文字书写方向以及本地化数字，日期等等。

Dijit 主页，下载
Dijit 控件，演示，示例


jQuery TOOLS

jQuery Tools 是一个非常轻量（2.5kb）的常用 UI 库，支持以下 jQuery 对象，Tabs, 工具提示，滚动条，层，表单以及 Flash 嵌套。

jQuery TOOLS 主页与下载
jQuery TOOLS 控件，演示，示例


jQuery UI

jQuery UI 基于 jQuery，包含 3 个大类，饰件，一些内置的 UI 对象；效果，对各种网页对象施加动画效果（如爆炸效果）；鼠标交互，如拖放操作。

jQuery UI 首页与下载
jQuery UI 控件，演示与示例


Prototype UI

Prototype UI 基于 Prototype 与 Script.aculo.us，包括多个模块（旋转木马，Modal 窗口，阴影，右键菜单等），每个模块可以单独安装使用。

Prototype UI 主页与下载
Prototype UI 控件，演示与示例


Jitsu

Jitsu 功能包括 XML 标记，页面编译，动画引擎，Ajax 以及运行时检测等等，它的 Ajax 功能使消费级 Web 应用的创建变得非常简单，支持客户端数据绑定，还可以将页面编译成 JavaScript，Jitsu 在 Firefox 和 IE 中运行最佳。

Jitsu 主页与下载
Jitsu 控件，演示与示例


Qutensil
Qutensil 仍在开发中，但其路线图已经显示出某些引人注目的东西，基于 Prototype 与 Scriptaculous ，包含消息，调色板，滑动条，工具提示，可拖放窗口以及警告，确认，提示等窗口。

Qutensil 主页，下载
Qutensil 控件，演示，示例


Script.aculo.us
script.aculo.us 是一个备受欢迎的 UI 工具集，基于 Prototype 框架， 提供了诸如视觉效果，UI 控件以及面向 DOM 的工具。

Script.aculo.us 首页与下载


Alloy UI
AlloyUI 是一套功能丰富的 UI 框架，基于 YUI 3，部分基于 YUI 2，包含一套丰富的（超过60）UI 部件，如图片库，对话框，树形结构，面板，自动完成，按钮，日历控件，工具条等。

Alloy UI 首页和下载
Alloy UI 控件，演示与示例


iUI: iPhone UI 框架

IUI 包含一套 JavaScript 库，CSS 式样表及图片，是一个轻量级 iPhone UI 库，包含 iPhone 风格导航菜单，设备方向，iPhone 风格切换等功能，可以为你的 Web 程序带来 iPhone 般的体验。

iUI 主页与下载
XUI

XUI 是一个用于移动 Web 应用的轻量，极简，高度模块化的框架。它之所以非常轻量的原因是，它只支持移动浏览器，所有跨浏览器支持的代码都被剥离。它面向一线移动 Web 浏览器，如 Webkit，Fennec 以及 Opera，并有意将来对移动 IE 和黑莓提供支持。

XUI 首页，下载
Yahoo! YUI Library

Yahoo! YUI Library 可谓所有 Web UI 之父，可靠，功能丰富，目前已经发展到第 3 版。它拥有一个很庞大的开发团队，推出了非常丰富的功能，就功能而言，无可匹敌。

YUI Library 主页与下载
YUI2 入门
YUI3 入门
YUI3 控件，演示与示例

Popularity: 16%

前端技术, 转载 , , , , ,

jqGrid查询中文乱码问题解决办法

2010年4月23日 咖啡兔
{ 没有评论 }

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 共 119 次

下载：jquery.jqGrid.min.3.6.4.js 共 100 次

下载：jquery.jqGrid.pack.3.6.4.js 共 76 次

Popularity: 25%

jQuery, 前端技术, 解决方案 ,

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

2010年3月19日 咖啡兔
{ 没有评论 }

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

Popularity: 28%

jQuery, 前端技术, 教程

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

2010年3月2日 咖啡兔
{ 4 条评论 }

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

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

阅读更多…

Popularity: 21%

前端技术 , ,

Sexy Buttons（Web 按钮[图标]素材）

2010年2月10日 咖啡兔
{ 1 条评论 }

这个 ZIP 压缩包包含了 1500 个各种颜色，各种尺寸的图标，还提供相应的 CSS/HTML?框架来实现 Web 按钮，支持所有主流浏览器。

下载：Sexy Buttons.zip 共 218 次

Popularity: 9%

前端技术 , ,

推荐：基于jQuery开发仿Google Calendar(jQuery Week Calendar)

2010年1月12日 咖啡兔
{ 2 条评论 }
jQuery Week Calendar

jQuery Week Calendar

在open-open上发现的，试了一下很不错，对于日常开发中对计划安排或者对操作性要求较高的可以使用这个插件

目前开发的一个系统正好需要这样的功能所以推荐给大家

官网：http://www.redredred.com.au/projects/jquery-week-calendar/

Live Demo

The following live demonstration? has a basic calendar with a few events in it. It demonstrates most of the major functionality by triggering events that are displayed as messages in the top right hand corner of the screen.? More demos will? come soon…

Demo 1 (Basic)

  • Demo 1 shows basic calendar functionality. Calendar Events are supplied as a local javascript array. All triggered events are displayed as messages, calendar events in the past are shaded gray using the eventRender callback.

Demo 2 (Multi data-source and dynamic config options)

  • Demo 2 allows you to select from two different data sources. These are both local javascript objects but could just as easily have come from a remote server. The data returned includes an ‘options’ property which overrides the default calendar options for ‘timeslotHeight’ and ‘timeslotsPerHour’.

Demo 3 (Create / update / delete using jquery UI)

  • This demo shows the use of jquery ui modal dialog for creating, updating and deleting events. It also demonstrates the use of
    • Staggered overlapping events
    • Querying the calendar for valid timeslots for a date to populate calendar event form select fields
    • Limited display of timeslots based on business hours

Popularity: 19%

jQuery, 前端技术 ,

推荐：2009 年度最佳 jQuery 插件

2009年12月12日 咖啡兔
{ 2 条评论 }

jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。

拉洋片
在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。
AnythingSlider
jquery plugins
阅读更多…

Popularity: 8%

jQuery, 前端技术 , ,

推荐：正则表达式口诀及教程

2009年11月3日 咖啡兔
{ 4 条评论 }

由 Knightby 撰写 　http://www.knightby.net/regular-expressions-formula-and-tutorial-recommended.html
转载自：http://bbs.php.cn/thread-20557-1-15.html
正则其实也势利，削尖头来把钱揣； （指开始符号^和结尾符号$）
特殊符号认不了，弄个倒杠来引路； （指\. \*等特殊符号）
倒杠后面跟小w， 数字字母来表示； （\w跟数字字母;\d跟数字）
倒杠后面跟小d， 只有数字来表示；
倒杠后面跟小a， 报警符号嘀一声；
倒杠后面跟小b， 单词分界或退格；
倒杠后面跟小t， 制表符号很明了；
倒杠后面跟小r， 回车符号知道了；
倒杠后面跟小s， 空格符号很重要；
小写跟罢跟大写，多得实在不得了；
倒杠后面跟大W， 字母数字靠边站；
倒杠后面跟大S， 空白也就靠边站；
倒杠后面跟大D， 数字从此靠边站；
倒框后面跟大B， 不含开头和结尾；
阅读更多…

Popularity: 32%

前端技术, 后台技术 , ,

[推荐]改进的提示插件-jQuery.hiAlerts.1.0

2009年7月27日 咖啡兔
{ 1 条评论 }

引用此版本修改者的话：

由于工作上需要，在jquery.Alerts基础上改进的一个插件，现在有提示框，确认框，输入框，弹出提示层，顶部浮动提示层5个效果，我重命名他为hiAlerts，hi表示招呼的意思，这个可能还要修改添加一些效果，所以暂定为1.0版吧

演示：http://www.cssrain.cn/demo/jquery.hiAlerts.1.0/demo.html

下载：jquery.hiAlerts.1.0.rar 共 398 次

之前用过一些类似的插件，感觉这个做的很简洁、实用，所以推荐给大家

Popularity: 4%

jQuery, 前端技术, 转载 , , ,
Page 1 of 3123