JQuery UI---不错的选择！

最近自己在做的一个项目，名称:TShark V0.6, UI部分主要使用JQuery UI实现。
主要技术:JDK + Spring + Hibernate + JQuery + JQuery UI + JqGrid + FusionCharts
By the way:后台ORM部分使用了SpringSide的部分代码（这里感谢一下）

主要功能：
支持i18:目前只提供 English and Chinese
支持Theme更换：基于JQuery UI
提供多种系统风格：详见下图
提供了部分基础通用管理功能：用户、角色、权限、资源、菜单、工具栏。。。

Demo URL:http://do.jhost.cn/cnnetiger/system/login.html    空间是免费的速度可能有些慢（但还是要感谢一下，毕竟免费的JSP空间太少了），大家将就着看吧。

目前还存在很多问题,所以版本为0.6，待版本升到1.0后，如果有人需要，将会开源,为了保证数据的完整性，目前暂时屏蔽了数据更新操作
目前只在FireFox下做过仔细测试，所以建议使用FireFox，顺便再鄙视一下IE，你不是一般的烂...
部分代码样例

user list

<ts:toolbar />
<!--Table Search-->
<page:applyDecorator name="search">
	<page:param name="formId">roleTable_Search</page:param>
	<table class="table_search_form"><tr>
		<th><fmt:message key="label.role.name"/>:</td>
		<td>
			<input type="text" name="filter_LIKES_name"	id="filter_LIKE_name">
		</td>
		<td>
			<ts:button name="search" onClick="doSearch('roleTable_Search');"/>
			<ts:button name="reset" onClick="doReset('roleTable_Search');"/>
		</td>
		</tr>
	</table>
</page:applyDecorator>
<!--Table list-->
<ts:table id="roleTable" url="/system/role/getlistData.html" sortName="name" rowNum="20" title="label.role.list" rowNumbers="true"  ondblClickRow="viewRoleDetail">
	<ts:row>
		<ts:column display="ID" align="center" property="id" sort="string" name="id" width="20" hidden="true"/>
		<ts:column display="label.role.name" align="center" property="name" name="name" sort="string" width="20" />
		<ts:column display="label.role.description" align="center" property="description" sortable="false" name="description" width="20" />
	</ts:row>
</ts:table>

user form

<form id="userModel" method="post" name="userModel" onSubmit="return false;"> 
	<form:hidden path="userModel.id" />
	<table class="table_form">
		<tr>
			<th>*<fmt:message key="label.user.code"/>:</th>
			<td><form:input path="userModel.code" size="30"/></td>
			<th>*<fmt:message key="label.user.name"/>:</th>
			<td><form:input path="userModel.name" size="30"/></td>
		</tr>
		<tr>
			<th><fmt:message key="label.user.phone"/>:</th>
			<td><form:input path="userModel.phone" size="30"/></td>
			<th><fmt:message key="label.user.mobilePhone"/>:</th>
			<td><form:input path="userModel.mobilePhone" size="30"/></td>
		</tr>
       <tr>
			<th><fmt:message key="label.user.email"/>:</th>
			<td><form:input path="userModel.email" size="30"/></td>
			<th>*<fmt:message key="label.user.group"/>:</th>
			<td>
			<form:select path="userModel.group.id">
				<form:option value=""><fmt:message key="label.group.prompt"/></form:option>
				<form:options items="${allGroups}" itemValue="id"  itemLabel="name"/>
			</form:select>
			</td>
		</tr>
	   <tr>
			<th><fmt:message key="label.user.memo"/>:</th>
			<td colspan="3"><form:textarea path="userModel.memo" rows="3" cols="84"/></td>
		</tr>
		<tr>
		<td colspan="4">
			<fieldset class="multi-select-panel" style="margin:0;">
				<legend><fmt:message key="label.role.authorization"/></legend>
					<ul id="userRoles">
						<c:forEach var="item" items="${allRoles}" varStatus="s">
							<li class="ts-checkbox">
								<INPUT type="checkbox" id="role_${item.id}" value="${item.id}" <c:if test="${item.hasAuth == true}">checked</c:if>><label for="role_${item.id}">${item.name}</label>
							</li>
						</c:forEach>
					</ul>
			</fieldset>
		</td>
		</tr>
  </table>
	<table class="table_toolbar">
		<TR>
			<TD><ts:button name="save" onClick="doSave('/system/user/save.html','userModel');"/></TD>
			<TD><ts:button name="reset" onClick="doReset('userModel');"/></TD>
			<TD><ts:button name="return"/></TD>
		</TR>
	</table>
</form>
</div>
<v:javascript formName="userModel" staticJavascript="true" />

评论

31 楼 sinoyster 2010-06-04  

很感兴趣，楼主 share一下成果吧，可以的话发一份代码给我
[e-mail], 谢谢

30 楼 zhuhao 2010-06-04  

做的很不错，不过代码能够开放就是最好的了，期待中....,谢谢

29 楼 huangyuanmu 2010-06-04  

蛮不错的，支持楼主！
说不好的同学，自己拿出来个好的给大家看看撒。
我比较关心的是楼主什么时候开源呢？

28 楼 kirk1127 2010-06-04  

组件还不是很完善的，表单中的checkbox及radio都支持的不好，需要自己改动下的

27 楼 haiyupeter 2010-06-04  

通过你的图片，我看到了四个UI。一个是tabLayout和BorderLayout，还有Tree，与及那个Menu，不知道楼主能否统一一整套JQuery的UI样式呢

26 楼 旭少版 2010-06-04  

很不错呢~~

期待 期待

可以共享学习一下吗~

[e-mail]

谢谢~

25 楼 qqqckm 2010-06-04  

分享下源码可以么？

24 楼 YiSingQ 2010-06-04  

是否能够分享下源码呢？

23 楼 witcheryne 2010-06-03  

kjj 写道

witcheryne 写道

看了看感觉不错···
UI部分应该不只用到jquery ui插件吧···
jQuery UI 没有布局组件...

布局是不是用的 Layout 插件？？？

对楼主项目的主题切换很感情兴趣， 能说一下实现原理么？》

摆脱你 google  jquery 有布局的

我知道jquery有布局插件, 我想问问楼主用的是不是那个插件....
并且用的过程中有没什么问题...

我公司项目一直想用jQuery做，只是一直没敢用jQuery来做, 最近在研究YUI2

22 楼 kjj 2010-06-03  

witcheryne 写道

看了看感觉不错···
UI部分应该不只用到jquery ui插件吧···
jQuery UI 没有布局组件...

布局是不是用的 Layout 插件？？？

对楼主项目的主题切换很感情兴趣， 能说一下实现原理么？》

摆脱你 google  jquery 有布局的

21 楼 niumd 2010-06-03  

很不错；称赞一个

20 楼 nj_first 2010-06-03  

做的还不错

19 楼 moses3017 2010-06-03  

楼主的css样式表是重新写的吗？

18 楼 ka520888 2010-06-03  

挺不错..牛啊

17 楼 renwolang521 2010-06-03  

  
我觉的挺好，很多细节还要再雕琢，这个很需要时间。
还准备开源，向楼主学习！

16 楼 ericslegend 2010-06-03  

期待完善版开源

15 楼 fengzl 2010-06-03  

收藏一下等着开源

14 楼 moses3017 2010-06-03  

juqery ui的界面如何自定义呢？比如颜色，大小等

13 楼 cnnetiger 2010-06-03  

witcheryne 写道

看了看感觉不错···
UI部分应该不只用到jquery ui插件吧···
jQuery UI 没有布局组件...

布局是不是用的 Layout 插件？？？

对楼主项目的主题切换很感情兴趣， 能说一下实现原理么？》

主题切换很简单，把jquery-ui的theme放到一个目录下，只要调用以下js
$("link:first").attr("href","<%=rootPath%>/styles/jquery-ui/themes/"+ theme +"/jquery-ui.css");

要保证以下的引用放在css引用的第一位
<link rel="stylesheet" href="<%=rootPath%>/styles/jquery-ui/themes/smoothness/jquery-ui.css" type="text/css" media="all"/>

12 楼 cnnetiger 2010-06-03  

cleanerje 写道

唉……
说实话，这种项目竞争太激烈，做得好利润也不高。

很有道理，但还没想用它来赚钱，原因就像你说一样！