搜索
查看: 4026|回复: 2

[教程] HTMLayout中使用 calc() 表达式写CSS属性

  [复制链接]

5

主题

444

帖子

2430

积分

五级会员

Rank: 8Rank: 8

积分
2430
发表于 2014-3-6 13:43:14 | 显示全部楼层 |阅读模式
calc是CSS3中的一个用于在运行时计算属性值的函数,
函数的参数里可以使用表达式,支持 + - * /等算术运行,例如在CSS中指定高度属性可以这样写

  1. div.cls{
  2.     height:calc(100% - 5px);
  3. }
复制代码
要注意 + - * /两边一定要有空格,不能写为 calc(100%-5px); 在标准的content-box盒模型下,如果宽度为100% - 且指定边框边距等可能就会撑破页面,这时候就可以使用 calc函数在运行时计算出自适应的合适宽度。

在HTMLayout中calc还能象CSSS!脚本那样访问DOM节点对象的方法和属性。例如:
[element.]children() - 返回子节点数
[element.]child(n:integer) - 返回子节点,参数为起始于1的数组索引值
[element.]next() - 返回下一个兄弟节点
[element.]previous() - 返回上一个兄弟节点
[element.]parent() - 返回父节点
[element.]text-width("文本内容") - 返回当前节点在当前样节下文本的显示长度
[element.]min-intrinsic-width(), [element.]max-intrinsic-width() - 节点内容的最大宽度
[element.]min-intrinsic-height(), [element.]max-intrinsic-height() -节点内容的最大高度
[element.]system-scrollbar-width(),[element.]system-scrollbar-height() - 系统滚动条的宽度或高度
[element.]system-border-width() - 系统边框宽度
[element.]system-small-icon-width(),[element.]system-small-icon-height() - 系统小图标的显示宽度或高度
[element.]foreground-image-width(),[element.]foreground-image-height() -  当前前景图宽度,高度
[element.]background-image-width(),[element.]background-image-height() -  当前背景图宽度,高度

CSS选择器函数:
element.$( selector ) - 返回所有符合该选择器的节点数组. 选择器中可以使用:root表示当前节点
element.$1( selector ) 同上但返回第一个匹配节点
element.$p( selector ) - 向上查询所有符合选择器的工 :root 表示页面根节点
element.$1p( selector ) -同上但返回每一个匹配节点

一个简单的示例:

  1. div {
  2.     width:calc( min-intrinsic-width() );
  3. }
复制代码
你可能会说,直接写 div { width:min-intrinsic } 不是更简单么?!
calc() 在括号里面不仅仅是可以写简单的函数调用,还支持一些更复杂的表达式,请看一个完整的示例:

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form(text="HTMLayout calc()表达式测试";right=599;bottom=399)
  4. /*}}*/

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

  7. wbLayout.html = /**  
  8. <html #test>
  9. <head>
  10.   <style>
  11.          
  12.         button.with-text {
  13.            border:1px solid red;/*红色边框*/  
  14.            width: calc(
  15.                      max( text-width( self.child(1):value ),text-width( self.child(2):value ) )
  16.            );
  17.         }
  18.         
  19.         button.with-text:checked > text:nth-child(1) {
  20.                 display:none;
  21.         }
  22.         
  23.         button.with-text:not(:checked) > text:nth-child(2) {
  24.                 display:none;
  25.         }   
  26.   </style>  
  27. </head>
  28. <body>
  29.   <button .with-text type="checkbox">
  30.     <text>请勾选复选框试一下效果 </text>
  31.     <text>现在勾选了</text>
  32.   </button>
  33. </body>
  34. </html>
  35. **/

  36. winform.show()
  37. win.loopMessage();

复制代码
注意上面源码中这段CSS代码:
width: calc(
    max( text-width( self.child(1):value ),text-width( self.child(2):value ) )
);

首先使用 self.child(1):value, self.child(2):value 分别取到这两个节点的文本值,
然后使用 text-width(  文本值 ) 分别计算出这两段文本的显示宽度。
最后使用 max( 文本1宽度,文本2宽度 ) 取最大值返回。

calc()表达式仅仅是CSSS!语法的一个子集,并不能支持所有的CSSS!语法( 例如 a ? b # c 即不支持 )
因为CSSS!里的assigned!事件在CSS应用到节点时会立即执行,所以上面的calc() 表达式也可以用等价的CSSS!代码来写,如下:
button.with-text {   
    assigned!:
self::width =  
        max(
self.text-width( self.child(1):value ),self.text-width( self.child(2):value ) )
    ;
}

所以 calc() 实际上是一种缩写的CSSS!的表达式。

参考链接:
http://www.terrainformatica.com/htmlayout/csss!-calc-function.htm

评分

参与人数 2银币 +140 收起 理由
5e365 + 90 很给力!
CP3 + 50 很给力!

查看全部评分

回复

使用道具 举报

2

主题

48

帖子

1192

积分

四级会员

Rank: 6Rank: 6

积分
1192
QQ
发表于 2014-3-6 23:02:35 | 显示全部楼层

感谢神码!!!很给力...

感谢神码!!!很给力...
一曲且为梦中人..
回复

使用道具 举报

11

主题

70

帖子

657

积分

培训班

积分
657
QQ
发表于 2014-3-7 08:31:15 | 显示全部楼层

很强大,又学到新东西了。谢谢神码

很强大,又学到新东西了。谢谢神码
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2018-4-23 08:06 , Processed in 0.109375 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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