~~~
.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()|獲取元素的內容最小/最大寬高.|
