给HTMLLayout 添加状态栏

wznjsy · 发表于 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页面即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="image/main.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="js/aardio.js"></script>
</head>
<body>
<style type="text/css">
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 50px;} /* 必须和 #footer 高度一样*/
#footer {position: relative;
margin-top: -50px; /* 高度的负值 */
height: 50px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
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.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
</style>
<body>
<div id="wrap">
<div id="main">
所有HTML页面请放置于res目录下.
如果res目录设为内嵌资源,则发布时无需修改任何代码自动生成独立EXE文件。
并在head节点链接"res/js/aardio.js"(更改为页面相对路径),例如在本页添加如下代码：
<strong style=" text-decoration:underline"><script type="text/javascript" src="js/aardio.js"></script> </strong>
aardio.js的作用是在所有html文件载入时,根据路径自动载入相应的用户库
例如 "/res/main/html" 加载时自动调用external.loadServer()接口函数,加载 <strong style=" text-decoration:underline">server.main.aardio</strong>,
在页面退出时,自动调用 <strong style=" text-decoration:underline">server.main().onUnload()</strong> 函数(如果定义了该函数).
aardio.js 同时定义了 console.log() 函数,用于在javascript输出调试信息到控制台
在任意javascript中都可以使用 <strong style=" text-decoration:underline">external.config.配置文件名.配置字段名</strong> 直接读写
配置文件, 配置文件将会自动创建并自动保存
<span style="font-size:9pt;">推荐的文件存储位置:</span>
<blockquote style="margin-top:0px; padding-top:0px; padding-left:20pt; margin-left:0px;">
<div style="margin-top:3px">将所有图片放在/res/image目录下,并按用途建立子目录,
与图片相关的CSS文件放在相同目录下. </div>
<div style="margin-top:3px">jQuery请置于以下位置: "/res/js/jQuery/jQuery-1.6.1.min.js"，
所有js文件请置于res/js目录下 </div>
</blockquote>
</div>
</div>
<div id="footer">
这里就是状态栏
</div>
</body>
</body>
</html>

复制代码

wynn_li · 发表于 2012-9-19 01:33:39

沙发~帮顶，谢谢分享...

编程 · 发表于 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指定顶部位置，你可以轻松的将节点放在任何地方，不需要写一大堆代码

look · 发表于 2012-9-19 07:30:48

感谢分享

JacenHe · 发表于 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();

		自动登录	找回密码
密码			注册会员

给HTMLLayout 添加状态栏

评分

点评