~~~
.item {
hover-on! :
ele = $1( input.url ) ,
ele:empty == true ?
(self.value = "empty") #
(self.value = "filled"),
ele:hover = true,
self::width = ele.box-content-width(),
self.$(.icon) -> @(ele) ele::background = "#CCC"
;
}
~~~
这里的代码通过 .box-content-width() 函数获取元素当前的内容宽度.
元素有以下方法可供调用:
|方法|说明|
| -- | -- |
|ele.start-timer(500)|开始触发元素的 timer! 事件.参数为间隔的毫秒数.<br>调用 ele.stop-timer() 或return cancel; 可以结束触发.|
|ele.stop-timer()|停止触发 timer! 事件.|
|ele.scroll-to-view()|滚动页面, 保证元素可见.|
|ele.box-type-what()|这是个组合函数, 通过不同的 type 和 what 取值, 可以组合出多个函数.<br>**type 可取值:**<br>·margin - 元素的 margin 框<br>·border - 元素的边框<br>·padding - 元素的padding 框<br>·content - 元素的内容框(内容的外轮廓).<br>·inner - 元素的内部框<br>**what 可取值:**<br>·left - 框的左坐标<br>· right - 框的右坐标<br>·top - 框的上坐标<br>·bottom - 框的下坐标<br>·width - 框的宽度<br>·height - 框的高度|
|ele.x-what()<br>ele.y-what()|获取元素的相对x,y坐标.<br>what的取值可以是:<br>· parent - 相对于父元素的坐标值<br>· root - 相对于根元素(<html>)的坐标值<br>· view - 相对于当前窗口视图(window)的坐标值;<br>· screen - 元素在屏幕上的绝对坐标|
|ele.start-animation()|开始元素动画.<br>触发动画事件 animation-start! 和 animation-step! 在 return cancel 时触发 animation-end! 事件.|
|ele.text-width("string")|返回以当前元素样式显示时, 输入字符串 "string" 的宽度(以像素计算)|
|ele.min-intrinsic-width()<br>ele.max-intrinsic-width()<br>ele.min-intrinsic-height()<br>ele.max-intrinsic-height()|获取元素的内容最小/最大宽高.|
