aardio 官方社区

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
查看: 19410|回复: 4

给HTMLLayout 添加状态栏

[复制链接]

47

主题

131

回帖

1167

积分

荣誉会员

积分
1167
发表于 2012-9-19 01:31:53 | 显示全部楼层 |阅读模式
本帖最后由 wznjsy 于 2012-9-19 02:18 编辑

准备尝试HTMLLAYOUT的RIBBON 界面,觉得什么都好,就是缺少一个绝对居于底部的状态栏,然后找了个代码,合成了个,无论窗口是否最大化,状态栏始终是在底部。分享下。把代码粘贴替换RIBBON 模版的res/main.html页面即可。
状态栏没有添加任何润色,需要修改的同学直接给#footer 写CSS 代码美化即可。

代码出处:
http://www.cssstickyfooter.com/
HTML 代码:
http://www.cssstickyfooter.com/html-code.html
CSS代码:
http://www.cssstickyfooter.com/style.css

代码讲解:
有兴趣的同学可以多看看:http://www.blueidea.com/tech/web/2009/6451.asp ,代码有点不同,但是道理应该是相同的吧?反正我自己是一点没有看。

特别强调:
如果要修改状态栏的高度:请修改一下三个高度的值:
#main {overflow:auto;
        padding-bottom: 50px;}  /* 必须和 #footer 高度一样*/

#footer {position: relative;
        margin-top: -50px; /* 高度的负值 */
        height: 50px;
        clear:both;}



代码如下:把代码粘贴替换RIBBON 模版的res/main.html页面即可。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title></title>
  6. <link href="image/main.css" type="text/css" rel="Stylesheet" />
  7. <script type="text/javascript" src="js/aardio.js"></script>
  8. </head>
  9. <body>

  10. <style type="text/css">
  11. /*  
  12. Sticky Footer Solution
  13. by Steve Hatcher
  14. http://stever.ca
  15. http://www.cssstickyfooter.com
  16. */

  17. * {margin:0;padding:0;}

  18. /* must declare 0 margins on everything, also for main layout components use padding, not
  19. vertical margins (top and bottom) to add spacing, else those margins get added to total height
  20. and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

  21. html, body {height: 100%;}

  22. #wrap {min-height: 100%;}

  23. #main {overflow:auto;
  24.         padding-bottom: 50px;}  /* 必须和 #footer 高度一样*/

  25. #footer {position: relative;
  26.         margin-top: -50px; /* 高度的负值 */
  27.         height: 50px;
  28.         clear:both;}

  29. /*Opera Fix*/
  30. body:before {/* thanks to Maleika (Kohoutec)*/
  31. content:"";
  32. height:100%;
  33. float:left;
  34. width:0;
  35. margin-top:-32767px;/* thank you Erik J - negate effect of float*/
  36. }

  37. /* IMPORTANT

  38. You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

  39. <!--[if !IE 7]>
  40.         <style type="text/css">
  41.                 #wrap {display:table;height:100%}
  42.         </style>
  43. <![endif]-->

  44. */
  45. </style>        
  46. <body>

  47. <div id="wrap">
  48.         <div id="main">
  49.                 所有HTML页面请放置于res目录下.

  50.                 如果res目录设为内嵌资源,则发布时无需修改任何代码自动生成独立EXE文件。

  51.                 并在head节点链接"res/js/aardio.js"(更改为页面相对路径),例如在本页添加如下代码:

  52.                 <strong  style=" text-decoration:underline"><script type="text/javascript" src="js/aardio.js"></script> </strong>

  53.                

  54.                 aardio.js的作用是在所有html文件载入时,根据路径自动载入相应的用户库

  55.                 例如 "/res/main/html" 加载时 自动调用external.loadServer()接口函数,加载 <strong  style=" text-decoration:underline">server.main.aardio</strong>,

  56.                 在页面退出时,自动调用 <strong  style=" text-decoration:underline">server.main().onUnload()</strong> 函数(如果定义了该函数).

  57.                

  58.                 aardio.js 同时定义了 console.log() 函数,用于在javascript输出调试信息到控制台

  59.                

  60.                 在任意javascript中都可以使用 <strong style=" text-decoration:underline">external.config.配置文件名.配置字段名</strong> 直接读写

  61.                 配置文件, 配置文件将会自动创建并自动保存

  62.                

  63.                 <span style="font-size:9pt;">推荐的文件存储位置:</span>
  64.                 <blockquote style="margin-top:0px; padding-top:0px; padding-left:20pt; margin-left:0px;">
  65.                 <div style="margin-top:3px">将所有图片放在/res/image目录下,并按用途建立子目录,

  66.                 与图片相关的CSS文件放在相同目录下. </div>
  67.                 <div style="margin-top:3px">jQuery请置于以下位置: "/res/js/jQuery/jQuery-1.6.1.min.js",

  68.                 所有js文件请置于res/js目录下 </div>
  69.                 </blockquote>
  70.         </div>
  71. </div>
  72. <div id="footer">
  73. 这里就是状态栏
  74. </div>
  75.                         



  76. </body>
  77. </body>
  78. </html>
复制代码

评分

参与人数 1 +200 收起 理由
look + 200 很给力!

查看全部评分

12

主题

164

回帖

1058

积分

四级会员

积分
1058
QQ
发表于 2012-9-19 01:33:39 | 显示全部楼层
沙发~帮顶,谢谢分享...

43

主题

628

回帖

3765

积分

版主

积分
3765
发表于 2012-9-19 06:27:39 | 显示全部楼层
HTMLayout作为一个界面引擎,绝对定位非常方便

#footer{
  position:absolute;
  left:1px;
  right:1px;
  bottom:1px;
  height:20px;
}
这样就可以建立一个状态栏了,很简单。
position:absolute;  指定绝对定位,left指定左侧位置,right指定右侧位置,bottom指定底部的位置,height指定高度。
当然也可以用top指定顶部位置,你可以轻松的将节点放在任何地方,不需要写一大堆代码


点评

同意: 5.0 真棒: 5.0
同意: 5 真棒: 5
你的代码总是如此的精炼!受教了。  发表于 2012-9-19 22:36

75

主题

767

回帖

5045

积分

六级会员

The only one

积分
5045
发表于 2012-9-19 07:30:48 | 显示全部楼层
感谢分享

170

主题

2182

回帖

1万

积分

管理员

积分
13226
发表于 2012-9-19 07:47:52 | 显示全部楼层
在HTMLayout中嵌入webform浏览器,推荐用下面的方法更简单一些。
( 工程范例里的ribbon用的方法不是很好,因为当时web.layout支持的功能还很有限)

//自定义控件
import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=523;parent=...;right=789;border="resizable";text="HTMLayout 自定义控件" )
winform.add(  )
/*}}*/

import web.layout;
var wbLayout = web.layout(winform );

import web.layout.debug;
wbLayout.attachEventHandler( web.layout.debug );

import web.form;
wbLayout.onControlCreated =
function( ltEle,ltCtrl ){
   
var url = ltEle["data-url"];
   
   
if(url){
   
        wb = ..web.form( ltCtrl,0x4
/*_UIFLAG_NO3DBORDER*/, ,true/*securityTrusted*/ )
        wb.go(url)
        
        ltEle.onSize =
function (ltEle) {
            ltCtrl.adjust();
        }
        ltEle.attachEventHandler();
    }
}

//在HTML中引用的控件,需要使用import语句导入aardio
import win.ui.ctrl.static;
import win.ui.ctrl.richedit;
wbLayout.html =
/***
<body>

<span style="font:system">
自定义控件很简单,在input,object,widget三种节点中使用cls属性指定控件类名即可,<br />
可选在data-table属性中使用一个table对象指定控件初始化参数 <br />
</span>

<input cls="richedit" data-table="{ text='控件文本';multiline=true }" id="edit" style="font-size:9pt;width:100%; height:50px;"></object>
<widget cls="static" data-url="http://www.baidu.com" style="width:100%%;height:100%%;"></widget>
widget可以指定相对高度,input,object因为被包含在匿名节点中,无法指定相对高度
</body>
***/


wbLayout.css =
/**
body{
    margin:20px;
    height:100%%;
    font:system;
}
**/


winform.show()
win.loopMessage();
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|aardio.com|aardio 官方社区 ( 皖ICP备09012014号 )

GMT+8, 2024-6-15 15:08 , Processed in 0.064041 second(s), 28 queries .

Powered by Discuz! X3.5

Copyright © 2001-2023 Tencent Cloud.

快速回复 返回顶部 返回列表