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了。

   大家又有些什么看法呢？

评论

1 楼 haiyupeter 2010-02-04  

跟EXT的风格是完全一样的，嵌套过程也一样，但是有一个问题，那就是其嵌套过程中每一个panel里的内容是如何进行显示的，也是像EXT里使用ContextEl属性吗？或者有别的方法？