搜索
查看: 6358|回复: 1

[教程] HTMLayout 非标准HTML标记 <include>, <widget> <popup>

  [复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
发表于 2012-6-8 11:37:54 | 显示全部楼层 |阅读模式
<include>
此标记允许你将一个外部HTML文件作为HTML代码片段包含到当前文档,有两种用法:

<include src="HTML片段文件URL" />  

<include src="HTML片段文件URL" >
    当读取外部文件失败时,可以显示这里的备选内容
</include>

下面是一个简单的示范:
doument-base.html 文件内容如下:
  1. <html>
  2.   <body>
  3.     示范文件
  4.     <include src="document-fragment.html">
  5.     <em> 杯具! 打开 document-fragment.html 失败!</em>
  6.   </include>
  7.   </body>
  8. </html>
复制代码
document-fragment.html 内容如下:

  1. <P><p>这是HTML代码片段.</p>
  2. <p>在这里你可以使用HTML代码</p></P>
复制代码
那么HTMLayout加载doument-base.html以后最终呈现的HTML如下

  1. <P><html>
  2.   <body>
  3.     示范文件
  4.     <p>这是HTML代码片段.</p>
  5.     <p>在这里你可以使用HTML代码</p>
  6.     <em> 杯具! 打开 document-fragment.html 失败!</em>
  7.   </include>
  8.   </body>
  9. </html></P>
复制代码
在被包含的文件中,当前路径是包含他的文件所在目录.
也就是相对路径是相对于HTMLayout当前打开的页面,而不是被包含的文件.
储如href链接属性,图片src属性,嵌入HTML的CSS样式等都遵守此规则.

<widget>
该标记是类似于 <input> <select> 的内联块标记.
<widget> 基本类似 <input>,区别是可以扩展type属性,
除了可以使用标准库的类型 (input 节点可以使用的类型,例如: text, checkbox, radio, 等等. )

type 属性也可以定义为下面的值:
<widget type="select"> - 列表框;
<widget type="dropdown-select"> - 下拉列表;
<widget type="textarea"> - 文本框;
<widget type="htmlarea"> - HTML控件.
<widget> 必须与闭合标记 </widget> 配对使用.

根据HTML规范,input节点会被包含在一个匿名的文本容器中,例如:
<anonymous-text-container><input …/></anonymous-text-container>
而widget则不会这么做, 这样使用%或%%时计算相对高度时不会导致不必要的混淆.

另外 widget  也可以用于实现自定义控件,在aardio中
为 widget 节点对象声明cls,id等属性即可创建自定义控件,参考:
http://bbs.aardio.com/thread-5509-1-2.html

<popup>
该标记是block样式显示的块标记( 类似<div> ),
用于定义可在页面上弹出显示的节点, 默认的popup是隐藏不显示的.
一个常用的功能是使用<popup> 显示复杂些的工具提示(tooltips)

下面是一个简单的aardio范例:

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;text="HTMLayout popup 工具提示";right=599 )
winform.add(  )
/*}}*/

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

wbLayout.html =
/**
<p titleid="my-html-title">把鼠标放在这里别动哦, 然后可以看到提示</p>
<popup id="my-html-title">
  这是一个 <em>示范</em>:<br/>
可以使用html的工具提示tooltip
</popup>
**/


winform.show()
win.loopMessage();

参考:http://www.terrainformatica.com/htmlayout/tags.whtm

回复

使用道具 举报

65

主题

952

帖子

5033

积分

荣誉会员

Rank: 8Rank: 8

积分
5033
发表于 2012-6-8 12:05:03 | 显示全部楼层

现在我们论坛绝对是国内最专业的htmlayout交流论坛.. {:lol}

现在我们论坛绝对是国内最专业的htmlayout交流论坛..
aaa
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2020-11-29 15:48 , Processed in 0.078125 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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