jQuery—UI的一些使用记录

By19.Published on八月 21, 2011 21:16. 439 Views .
很差差一般好非常好 (2 次评分, 平均: 4.50 out of 5)
Loading ... Loading ...

相对于jQuery无论是工作还是自己的站点都在经常使用,但是jQuery UI还真没怎么好好接触过,现在UI的最新版本已经是1.8了,就更新速度来说远快于jQuery本身。最近稍微学习了一下,做了几个例子。

就我接触过的很多项目还都是使用EXT做一些WEB方面的富客户端界面及应用(基本都用于业务系统的后台管理),EXT确实很强大,不过缺点也是显而易见。众所周知的就是EXT类库太重,如果系统是内网使用到还好说,放在外网的话光加载速度都是一个很大的问题。如果需要对EXT的体积进行优化,不是对EXT特别了解,优化后也很容易出错。

再有就是对程序员本身来说,这类封装太重的东西使用起来对自己的提高到底是好是坏,调用EXT实例确实简单,随便几句一个很漂亮的页面就出来了(甚至连HTML你都不用会),但真正自己写的代码少之又少,脱离这个环境之后就完全不知道如何下手,导致现在的程序员越来越“低端”,当然做项目就是要讲究效率,这话仁者见仁智者见智吧。

相比较EXT我个人感觉jQuery做的就比较好,体积远小于EXT,并且只提供了相对基础的功能,对比EXT来说开发人员本身还是要写很多其它代码,这也是我比较推崇jQuery的原因。

Computer
window_aside
  Name Link
window_main_loading

进入主题,左边的三个图标就是UI应用的例子之一,jQueryUI主要分为三部分Interactions(交互)、Widgets(组件)、Effects(效果),左边的例子主要用到它Interactions中的Draggable(拖放)Resizable(调整大小)。图标可以拖动,双击之后弹窗显示wordpress的分类链接,弹出的窗口同样可以拖动、调整大小。

例子主要参考了http://desktop.sonspring.com/提供的jQuery桌面。这个桌面示例和EXT的桌面比起来也丝毫不逊色,可以把此例作为学习UI的入门例子。可能当初我把WEB实现桌面界面想复杂了,其实整个例子就主要使用了Draggable和Resizable,甚至连UI的CSS都没有引入(仅自定义了几个draggable和resizable的样式),自己所写的CSS和JS也并不算多。

如果可能需要用到UI所有功能,则直接引入jquery-ui-1.8.14.custom.min.jsjquery-ui-1.8.14.custom.css(包括images文件夹),相比较EXT来说UI的体积已经是相当小了,并且对应CSS修改默认样式也很方便,下面是部分UI功能的简要记录:

继续阅读…Continue reading…

{ 1 comment } { Tags: }

JQUERY和XML

By19.Published on八月 6, 2008 18:11. 51 Views .
很差差一般好非常好 (暂时没有评分)
Loading ... Loading ...

JQUERY.AJAX访问XML的问题.

不是直接.ajax访问.XML后缀的文件,而是访问对数据进行简单的封装了的xml字符串(对于一般复杂结构数据的传输,像查询出的记录)~比如我下面这段用dom4j生成的XML字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Response.setContentType("text/html;charset=UTF-8");
 
PrintWriter writer = Response.getWriter();
String PK_ID = Request.getParameter("selectxmmc");
 
Connection connection = null;
PreparedStatement statementQuery = null;
Document doc = DocumentHelper.createDocument();
 
try {
	connection = DatabaseHelper.getConnection(componentManager);
	statementQuery = connection
			.prepareStatement("select * from oa_sdsl_ss_xm where PK_ID = ?");
	statementQuery.setString(1, PK_ID);
	ResultSet rs = statementQuery.executeQuery();
	Element root = doc.addElement("root");
	while (rs.next()) {
		Element xm = root.addElement("xm");
		Element dd = xm.addElement("dd");
		dd.addText(rs.getString("xmdd"));
		Element xmfr = xm.addElement("xmfr");
		xmfr.addText(rs.getString("xmfr"));
		Element jsdw = xm.addElement("jsdw");
		jsdw.addText(rs.getString("jsdw"));
	}
	rs.close();
 
	statementQuery.close();
	statementQuery = null;
	connection.commit();
	connection.close();
	connection = null;
 
	writer.print(doc.asXML());
	writer.close();
 
} catch (Exception ex) {
	ex.printStackTrace();
	writer.print("error");
	writer.close();
} finally {
	if (statementQuery != null) {
		try {
			statementQuery.close();
		} catch (SQLException ex) {
			ex.printStackTrace();
		}
	}
	if (connection != null) {
		try {
			connection.close();
		} catch (SQLException ex) {
			ex.printStackTrace();
		}
	}
}

继续阅读…Continue reading…

{ 1 comment } { Tags: , , }