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.js及jquery-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();
		}
	}
}

doc.asXML()返回一个XML字符串：

1
2
3
4
5
6
7
8

< ?xml version="1.0" encoding="UTF-8"?>
<root>
<xm>
<dd>1111111111</dd>
<xmfr>222222222</xmfr>
<jsdw>23333333333333</jsdw>
</xm>
</root>

继续阅读…Continue reading…

{ 1 comment } { Tags: , , }
Page 1 of 212