今天介绍一个jQuery渐变发光效果的导航菜单，这是一个简单的通过jQuery控制opacity实现的导航菜单。
在线演示 源码下载
下面和大家分享一下具体的实现过程。
HTML标签结构:
2 <li >
3 <a href="#">菜单一<span>菜单一</span></a>
4 </li>
5 <li>
6 <a href="#">菜单二<span>菜单二</span></a>
7 </li>
8 <li>
9 <a href="#">菜单三<span>菜单三</span></a>
10 </li>
11 <li>
12 <a href="#">菜单四<span>菜单四</span></a>
13 </li>
14 </ul>
CSS样式：
li的样式：
/*块状模式显示，并使其水平平铺显示*/
display:block;
float: left;
/*宽高是背景图片的*/
width: 111px;
height: 50px;
/*设置文字垂直水平居中*/
line-height: 50px;
text-align: center;
font-weight: bold;
font-size: 18px;
list-style-type:none;
}
初始看到的a的样式：
/*这里是我们背景图片*/
background-image: url("/blog_article/images/bg-sprite-topmenu.png");
background-repeat: no-repeat;
/*设置position属性是为了里面的span能够以a为基准进行定位*/
position: relative;
display: block;
/*我们不使用纯黑色*/
color: #292724;
text-decoration:none;
}
hover后看到的span的样式：
/*这里是我们背景图片*/
background-image: url("/blog_article/images/bg-sprite-topmenu.png");
background-repeat: no-repeat;
/*设置块模式显示，并制定宽高和a的宽高一样，和绝对位置，这是为了使其和a里面的文字重合显示*/
display: block;
height: 50px;
width: 111px;
text-align: center;
position: absolute;
top: 0;
left: 0;
color:#FFE2BB;
}
用sprite技术定位，a和span各种状态的样式：
欢迎大家转载，转载请注明出处！
希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！
今天出去跟哥们喝酒，回来的有些晚，急急忙忙写完这篇笔记，如果有错的地方还请大家多多指正，谢谢！
昨天介绍了easyui的基本使用与easyloader方式加载框架，今天来说说他们的原理以及panel框架的使用：
easyui可以直接html的方式，写一个类，型如 的方式，就可以直接加载出easyui的样式，究其原因，是因为parser的存在，我们打开下的easyui代码，里面有个plugins文件夹，里面有文件：jquery.parser.js ；这个JS文件里面就是以 的方式加载各种sasyui框架样式的，当然里面是循环渲染的；代码如下：
2 }, plugins: ["draggable", "droppable", "resizable", "pagination", "linkbutton", "menu", "menubutton", "splitbutton", "progressbar", "tree", "combobox", "combotree", "combogrid", "numberbox", "validatebox", "searchbox", "numberspinner", "timespinner", "calendar", "datebox", "datetimebox", "slider", "layout", "panel", "datagrid", "propertygrid", "treegrid", "tabs", "accordion", "window", "dialog"],
parse: function (_2) {
3 var aa = [];
4 for (var i = 0; i < $.parser.plugins.length; i++) {
5 var _3 = $.parser.plugins[i];
6 var r = $(".easyui-" + _3, _2);
7 if (r.length) {
8 if (r[_3]) {
9 r[_3]();
10 } else {
11 aa.push({ name: _3, jq: r });
12 }
13 }
14 }
再有就是easyloader的加载方式，在其easyloader.js文件中，有其加载各个框架组件的方法（以dialog为例）：
2 js: "jquery.dialog.js", //加载dialog的js文件
3 css: "dialog.css", //加载dialog的css样式文件
4 dependencies: ["linkbutton", "window"]//因为dialog需要window和linkbutton样式，所以这里关联着这两个框架组件
5 }
2 window.using = easyloader.load;
3 if (window.jQuery) {
4 jQuery(function () {
5 easyloader.load("parser", function () {
6 jQuery.parser.parse();
7 });
8 });
panel框架的用法：
2 $(function () {
3 $('#p').panel({
4 width: 500,
5 height: 150,
6 title: 'My Panel', //控制面板名标题
7 iconCls: 'icon-add', //控制面板标题旁边的图片 由icon.css文件得来
8 tools: [{//
9 iconCls: 'icon-add', //右上角图标及点击触发事件
10 handler: function () { alert('new') }
11 }, {
12 iconCls:
easyUI与选择WebUI
作者：sagahu@163.com，2013-03-25，太原
关键字：easyUI, 选择WebUI
一、前言
当今网上有了很多的WebUI库，也有很多的网页开发使用这些成套控件而得到了良好的表现与极高的生产效率，正有着很多以前缺乏Web控件积累的程序员/团队/公司在选用并定制最合适自己的WebUI套件。本人使用easyUI为例，向大家介绍自己在选用WebUI库时的一些感受。
说到WebUI库，不得不提到这样一种程序结构：
如图，我们关注其中的UI前端与UI后端2个东西，它们是什么呢？以我的mySagasoft™ WebMIS技术架构为例，我给用户显示的网页都是.html网页，里面只有：html/css/javascript三样成分；而在Web服务器上有着无任何界面元素的.aspx页提供数据服务（也可用.ashx代替）；当前者某个局部需要动态数据时，通过javascript/Ajax与后者通信，获得数据来更新哪个局部。这就是说，我把UI拆分成了2层，前面显示给用户的纯静态网页称为UI前端，后面提供数据服务的称为UI后端，中间用Ajax把2者联系起来。其实这种程序结构早在ASP、JSP时代就已经被大牛们总结出来了。这样有着显著的好处：这样便利了UI前端静态效果的设计与UI后端数据服务的独立实现，只需要程序员继续修改2者的通信。特别是对于很多苦恼于ASP.NET程序员与网页美工因服务端控件扯皮事件的软件公司带来了福音。
成套WebUI库技术与产品的出现，给了业内把UI前端与UI后端分层的程序结构提供了强大的支持。可以发现越来越多的公司或者团队正在或者已经选用了适合自己的套件库，逐渐远离微软服务端控件的封装，减少对许多所谓微软新技术的迷信。
二、纵览easyUI框架
（一）按钮与菜单
链接按钮，这是管理软件页面上使用频率最高的；有其它样式，可禁用/启用。
这3个依次是菜单、按钮菜单、下拉菜单。看起来很漂亮，但是如果浏览器禁用脚本的话，哪个效果是惨不忍睹，所以这就使得它们在使用时有局限性：绝不适合用在哪些企业网站首页上！其实在B/S型企业管理软件中我也不多使用。
（二）各种窗口
图示是一个消息提示框，它的消息提示框分为：普通信息、错误、警告、问询、确认、输入提示、进度、右下角显示等等，比较齐全。
其弹出模态对话框也很漂亮，控制也比较详细。普通窗口与对话框类似。
（三）GRID、TREE、TREEGRID3个一样不少
我们作数据呈现时，对于批量数据最常用、最需要的就是Grid、Tree、TreeGrid三样，微软开发工具多年来总是只提供很简陋的前2者。这个控件包3者都提供了，还都比较好用。
这个Grid控件可用鼠标来调整列宽，下面与右面的滚动条也是ASP.NET的标准GridView没有的。个人觉得这是当今B/S企业管理软件GRID必须具有的！
显然这个Tree比ASP.NET的标准好看，也支持单选与复选控制，如果还觉得不好用，可以用国人的自豪——zTree——代替了它。
太多的项目中需要TREEGRID，所以尽量避免单独找一个与其它控件不配套的。
还有个PropertyGrid，用的不多，也不太好用，不说它了。
对于这一套控件包里的GRID与TREEGRID，在数据编辑时最常使用方式是：选择一条记录，弹出这条记录的对话框或者跳转到这条记录的边界页面去操作，完了就单独更新这条记录。这种方式很简单，这套控件支持的很好。另一种方式是直接在控件里编辑多条记录、多个单元格的数据，然后批量提交。这种方式比前一种复杂多了，这套控件也支持，但是本人并没有去深入的体验，所以不能对这方面下什么结论。
（四）窗口上的小控件也很齐全
这套控件包支持非常方便的拖动、改变尺寸、进度条、搜索框、分页、动态加载等等，还有灵活的日期时间选择框，真是精致、齐全、匠心独具！
（五）齐全的组合下拉框
在微软的开发工具里历来没有这些下拉框控件：ComboGrid、ComboTree、ComboTreeGrid等等。但是实际开发中这些都需要，这套控件包就提供了前2者，好像能配置出第3种，记不清了。但是没有这些的控件包你必须另外再配！
（六）不错的布局实现
这是其缺省的主界面布局，特别适合B/S型企业管理软件。它把页面分成上、下、左、右、中5块，可选自己的布局方式。其实每一区域都是一个相对独立的“面板”，支持鼠标拖动调整尺寸与隐藏/显示。支持在“面板”内布局。支持选项卡式布局，虽然这样很费资源。
套件包里还提供了一个很不错的手风琴式菜单控件。
从图上可以看出，这个“面板”支持很多详细的控制，如隐藏/显示/最大化/最小化等，非常具有实用性。
（七）可选的Form元素
自从有了Ajax，动态页面编程时对Form的以来就逐渐弱化，甚至可以不用Form。虽然如此，这套控件包还是提供了这方面的一些功能。
本人就不太使用Form，这一方面我主要使用其数据验证，更确切点说，是使用其友好的数据不合法提示！
（八）HTTP请求与数据绑定
当前大多数JQuery标准控件具有通过url直接请求后端服务的机制，这样可以在URL后面附带上少量简单数据。而这套控件在此基础上支持定义post/get方式，支持请求中附带参数。我认为很有必要支持带参数的POST请求，这样才能附带较大数据量，也提高了安全性。
大多数JQuery标准控件通过url请求返回的json数据而直接绑定到了控件上。这种情况下，后端数据格式与前端控件要求的数据格式之间的转换，只能是放在后端，理论上会增加后端的负载。但实际应用中，难免需要把数据格式转换工作放在客户端浏览器javascript里，就是说不希望直接绑定，是后端数据反馈回本地进行处理后再绑定到控件上。例如，后端返回bool值1/0要在前端用checkbox显示，或者弥补一些服务端对象/Json转换在日期时间类型上的不足，或者就是为了把计算负载转移到客户端等情况。总结就是数据返回与绑定之间允许再插入干预操作。这套控件在这一点上就做的比较好。例如DataGrid控件除了url/参数直接请求/绑定方式，还有后期绑定数据的方法，参看下面的代码：
function loadPage(pageNumber, pageSize) {
addCookie("RolePageSize", pageSize, 7);
var where = getWhere();
var url = "../MisBaseV2_Behind/RoleManager.aspx";
var data = { "ReqKey": "GetListPage", "pageSize": pageSize, "pageIndex": pageNumber,
"where": where, "orderBy": "Id asc"
};
$.ajax({
type: "POST", url: url, data: data, dataType: "json",
success: function (result) {
if (!handleMyAjaxResult(result))
return;
var chk0 = "<input type='checkbox' disabled='disabled' />";
var chk1 = "<input type='checkbox' disabled='disabled' checked='checked' />";
$.each(result.Data.rows, funct