Rexsee应用的菜单、标签栏和按钮栏实现

j8900610

　　Rexsee本身是一个开源的Web开发平台，官方是这样定义的，个人理解为框架，或是工具包，可采用HTML+JS进行开发。。理论上没有特别需要下载的东西，熟悉手册里提供的扩展函数就行了。可以在线查看，或到社区下载手册apk，直接在手机上可以直接运行：http://www.rexsee.com/

　　这里不再介绍手册里的东西，只是就UI设计方面分享一下经验，直接使用Rexsee提供的标签栏和按钮栏等相关控件。不熟悉手册的tx建议先自行编写几个小程序上手

　　demo的截图示意

　　图1：http://www.rexsee.com/imagecache/bbs/11-10-09/1318129301.png

　　上图所显示的3个带渐变色的部分就是我们所说的外部UI，那么现在大家看到的就是标签栏，至于我们刚才提到的按钮栏，和标签栏的用法一直，唯一的区别就是按钮栏的按钮是不支持任何样式的，所以我们如果需要制作图片按钮之类的话，会用标签栏去代替按钮栏。

　　那么现在我们看到的，就是3个标签栏。

　　一般我们常用的就这3种，第一种就是最上面的标签栏；那么它起到的是一个标题栏的作用。点击是没有任何反应的；这样的标签栏一般是永驻而且不变的，所以我们在编写其菜单对象的时候，只需要把url的参数设为空值就好了。

　　代码段1：varnormalStyle="background-color:#7b7b7b+#000000/0;width:fillparent;height:fillparent;weight:1;white-space:normal;border-width:0;padding:210310;font-size:16;color:#FFFFFF;icon-visibility:visible;";

　　varpressedStyle="background-color:#ccffcc;";

　　varnormalStyle2="background-color:#8FA7C9+#3A639B/0;height:fillparent;width:120;icon-width:fillparent;icon-height:fillparent;icon-visibility:visible;border-width:0000;";

　　varpressedStyle2="";

　　varnormalStyle3="background-color:#c5dbe6+#71a2c0/0;border-width:0000;icon-visibility:hidden;color:#000000;font-size:12;width:53";

　　varpressedStyle3="background-color:#71a2c0+#c5dbe6/7;";

　　代码段2：

　　rexseeMenu.create("topBar1","bar-position:top;height:70;width:fillparent;background-color:#8FA7C9+#3A639B/0;border-width:0;");

　　varnormalStyle2="background-color:#8FA7C9+#3A639B/0;height:fillparent;width:120;icon-width:fillparent;icon-height:fillparent;icon-visibility:visible;border-width:0000;";

　　varpressedStyle2="";

　　rexseeMenu.addItem("topBar1","","icon-url:"+rexseeStorage.getRoot()+"/dao/images/JHLOGO.png;"+normalStyle2,pressedStyle2,"");

　　rexseeTabBars.create("topBar1");

　　第二种即中间的标签栏，纯文字的导航标签/按钮。这中标签栏编写起来比较简单，只需要将样式设定为全局变量然后集体应用即可。至于样式中渐变色的编写方法，相信大家都应该已经知道了吧——#颜色1+#颜色2+……+#颜色N/渐变方向(0-7)。

　　代码段3：

　　rexseeMenu.create("topBar2","bar-position:top;height:35;width:fillparent;background-color:#c5dbe6+#71a2c0/0;border-width:0;");

　　varnormalStyle3="background-color:#c5dbe6+#71a2c0/0;border-width:0000;icon-visibility:hidden;color:#000000;font-size:12;width:53";

　　varpressedStyle3="background-color:#71a2c0+#c5dbe6/7;";

　　rexseeMenu.addItem("topBar2","javascript:alert(1)","label:北京;"+normalStyle3,pressedStyle3,"");

　　rexseeMenu.addItem("topBar2","javascript:alert(1)","label:要闻;"+normalStyle3,pressedStyle3,"");

　　rexseeMenu.addItem("topBar2","javascript:alert(1)","label:时评;"+normalStyle3,pressedStyle3,"");

　　rexseeMenu.addItem("topBar2","javascript:alert(1)","label:国内;"+normalStyle3,pressedStyle3,"");

　　rexseeMenu.addItem("topBar2","javascript:alert(1)","label:国际;"+normalStyle3,pressedStyle3,"");

　　rexseeMenu.addItem("topBar2","javascript:alert(1)","label:社会;"+normalStyle3,pressedStyle3,"");

　　rexseeTabBars.create("topBar2");

　　第三种则是最下面的标签栏，图文并存的标签栏如果是类似于这样的标签栏——即多项的图文并存标签栏，在编写样式的时候我们一般不需要对图标的宽高进行设定,当然如果你的本身图片不是特别特别小的话。但如果是像第一种标签栏那样只有一个比较大的图标的话，那么我们一般需要设定图标的宽高，那么基本上用fillparent来设定就可以了。

　　代码段4：

　　rexseeMenu.create("botomBar","bar-position:bottom;height:70;width:fillparent;background-color:#7b7b7b+#000000/0;border-width:0;fading-edge-length:60;fading-edge-color:#444444;");

　　rexseeMenu.addItem("botomBar","rexsee:reload","label:刷新;icon-url:"+rexseeStorage.getRoot()+"/dao/images/icon_refresh.png;"+normalStyle,pressedStyle,"");

　　rexseeMenu.addItem("botomBar","javascript:alert('副刊')","icon-url:"+rexseeStorage.getRoot()+"/dao/images/icon_assistant.png;label:副刊;"+normalStyle,pressedStyle,"");

　　rexseeMenu.addItem("botomBar","javascript:alert('影像')","label:影像;icon-url:"+rexseeStorage.getRoot()+"/dao/images/icon_company.png;"+normalStyle,pressedStyle,"");

　　rexseeMenu.addItem("botomBar","javascript:alert('设置')","label:设置;icon-url:"+rexseeStorage.getRoot()+"/dao/images/icon_set.png;"+normalStyle,pressedStyle,"");

　　rexseeMenu.addItem("botomBar","rexsee:quit","label:退出;icon-url:"+rexseeStorage.getRoot()+"/dao/images/icon_out.png;"+normalStyle,pressedStyle,"");

　　rexseeTabBars.create("botomBar");

　　对于图标来说，我们用icon-visibility参数来控制其显示与否，icon-url来指向其位置。默认情况下icon-visibility的值是visible，所以一般大家只需要直接指明url就可以了。这里需要注意的是url只能是绝对路径,如果想实现类似绝对路径的便捷的话就需要用JS编写一点逻辑性的东西了,在本地的话需要读取本地的路径，在网络的话则抓去url地址。

　　如果想根据页面内容的不同去改变外部URL的话，有以下几种做法，对于需要更换整个标签栏的，那么我们需要先创建好2个菜单对象，然后在不同的页面去移除之前的标签栏，创建需要的标签栏；对于只需要更换标签栏内的标签的，我们只需要在一开始把所有标签都创建好，然后根据其ID（即url）来控制其隐藏和显示就可以了。因为移除和创建标签会有一个短暂的延迟过程，不建议这么去做。

　　一般来说，建议大家使用初始化页面，在里面把一切外部UI，所需要的菜单和标签都创建好。

　　

348131342

LZ求源码，分享分享吧~~

348131342

试了一下，在rexsee的项目中心力找新闻test这个应用吧，复制不了具体链接，在社区找找吧