JX: jQuery的布局管理器

来源：http://www.ourjs.cn  原文： http://www.ourjs.cn/show.php?id=698

 

   JX项目地址：http://jx.myofiz.com/ ，它的作者是Santosh Rajan，他说他的这个作品是“jQuery的一个面向对象形式的扩展”（众所周知，jQuery确实不像Mootools那样‘面向对象’）。

   这个基于JavaScript的布局管理器的特性如下：

• 很小，在压缩条件下，它只有8K大小
• 真的是一个面向对象的jQuery扩展！！！
• 可以通过嵌套实现复杂的布局
• 可以通过对象继承来实现扩展
• 只可惜目前该代码的浏览器兼容性问题未完全解决，IE6下显示会有问题

看看如下代码有何感想？

JAVASCRIPT:

1.  
2. $ (document ). ready ( function ( ) {
3.     var viewport = new JX. Viewport ( {
4.         css: {padding: '0px', margin: '0px' },
5.         items: [ {
6.             height: 50,
7.             css: {backgroundColor: '#aaaaaa', padding: '20px' },
8.             text: $ ( '#north' ). text ( ),
9.             fitWidth: true
10.         }, {
11.             jxtype: 'columncontainer',
12.             fitHeight: true,
13.             items: [ {
14.                 text: $ ( '#east' ). text ( ),
15.                 width: 150,
16.                 css: {backgroundColor: '#cccccc', padding: '20px' },
17.                 fitHeight: true
18.             }, {
19.                 text: $ ( '#center' ). text ( ),
20.                 fitWidth: true,
21.                 css: {backgroundColor: '#eeeeee', padding: '20px', overflow: 'hidden' },
22.                 fitHeight: true
23.             }, {
24.                 text: $ ( '#west' ). text ( ),
25.                 width: 150,
26.                 css: {backgroundColor: '#cccccc', padding: '20px' },
27.                 fitHeight: true
28.             } ]
29.         }, {
30.             height: 50,
31.             css: {backgroundColor: '#aaaaaa', padding: '20px' },
32.             text: $ ( '#south' ). text ( ),
33.             fitWidth: true
34.         } ]
35.     } );
36. } );
37.  

   真的是一个对象吧？而且，用过ExtJS的朋友肯定会发现这段代码很有Ext的风格，而且用法跟ExtJS的布局管理器用法也相近。相信JX的作者也是大受ExtJS的影响吧。

   JX出来后，国外的网友提到了很多问题，如果网页使用该布局管理器的话，对JavaScript的依赖性太强，以致禁用JavaScript或出现小bug就足以让网页完全变形。而且需要这样布局的就只有Web App了。

   大家又有些什么看法呢？