import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;text="实战CSS选择器 - 创建弹出菜单";right=599 )
winform.add( )
/*}}*/
import web.layout;
wbLayout = web.layout( winform )
wbLayout.html = /**
点这里弹出菜单
- 打开
- 新建
- Web应用程序
- HTMLayout应用程序
- 保存
- 另存为
**/
wbLayout.css = /**
/* button节点,有一个type属性并且他的值等于 "menu" */
button[type="menu"] {
behavior:button popup-menu;
width:83px;
height:13px;
/*
在CSSS!脚本中可以使用CSS选择器语法,
注意 self.$("menu") 是错误的写法,正确写法应去掉引号
assigned!事件在CSS应用到节点时触发.
*/
assigned!:
self.$(menu)->@(ele)ele::text-align = "left"; //设定所有菜单节点文本左对齐
}
/* 当你按下按钮弹出菜单,菜单的状态就变为 owns-popup */
button[type="menu"]:owns-popup {
background-image:url(theme:button-pressed);
}
/* 这个是最简单的选择符了,直接匹配所有 menu标签定义的HTML节点 */
menu {
font: system;
behavior:menu; /*这里定义了behavior行为是一个菜单*/
flow: vertical;
display:none;
margin:0;
padding:1px;
max-width:max-intrinsic;
border:1px solid threedshadow;
background-color: window;
color:windowtext;
margin:0 1px;
}
/* 匹配 menu节点下的子节点 menu */
menu menu {
max-width: max-intrinsic;
}
/* 下面匹配 menu 节点下的子节点 li,也就是菜单项 */
menu li {
width:*;
padding-left:24px; /* 左侧留出24像素的空白,用来显示图标 */
padding-right:12px; /* 右键留出12像素的空白,用来显示可能出现的子菜单箭头 */
padding-top:4px;
padding-bottom:4px;
foreground-repeat: no-repeat;
foreground-position: 2px 50%; /*前景图像定位,第一个是横坐标,第二个指定纵坐标*/
color:windowtext;
}
/* 如果menu的子节点也就是菜单项li有一个子节点类型是menu,简单讲就是他有子菜单 */
menu li:has-child-of-type(menu){
foreground-image:url(stock:arrow-right); /* 那就显示一个向右的箭头 */
foreground-repeat: no-repeat;
foreground-position: 100% 50%;
}
/* 逗号指定多个选择器条件, 这里指的是当前菜单项,或鼠标放在上面并且弹出了子菜单的项*/
menu li:hover:owns-popup,
menu li:current {
background-color:highlight;
color:highlighttext;
}
/* 菜单分隔符 */
menu hr {
margin:2px;
}
menu.office,
menu.office menu {
background: url(data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAE8AAABNCAIAAABonq7aAAAAAXNSR0IArs4c6QAA
AARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADxSURBVHhe7dFR
DcAgAAPRMV34F4EDXEwEOXLJjn9K6Rt77+fsrLXmnGcZl26/l95xPNNvHQ5Ei2yJ
VR2Z2TociBbZEqs6MrN1OBAtsiVWdWRm63AgWmRLrOrIzNbhQLTIlljVkZmtw4Fo
kS2xqiMzW4cD0SJbYlVHZrYOB6JFtsSqjsxsHQ5Ei2yJVR2Z2TociBbZEqs6MrN1
OBAtsiVWdWRm63AgWmRLrOrIzNbhQLTIlljVkZmtw4FokS2xqiMzW4cD0SJbYlVH
ZrYOB6JFtsSqjsxsHQ5Ei2yJVR2Z2TociBbZEqs6MrN1OBAt/mX7AbInBpf1Ub24
AAAAAElFTkSuQmCC) expand;
/*
如果 background-repeat为expand, stretch and no-repeat之一,
那么可以使用background-position:指定切图的位置,按上右下左的顺序,,
注意CSS里很多用到四个坐标的属性都遵守这个顺序,从顶部开始顺时针走一圈. 例如 padding,margin等.
*/
background-position: 0 0 0 24; //在图片左侧切出24个像素的切片固定,其他部位平铺
}
**/
//使用CSS选择器得到body节点,这类似调用 CSSS!脚本里的全局函数 $1("body")
var body = wbLayout.querySelector("body")
//这类似 调用 CSSS!脚本里的节点 成员函数 body.$1()
var ltEle = body.querySelector("menu li:has-child-of-type(menu)");//在aardio中使用CSS选择器
ltEle.style.color = "red"; //在aardio 中修改节点CSS属性
//使用 with语句创建临时名字空间,批量修改节点属性
with body.querySelector("button").style {
right = 10; //按扭放在右面右侧,右边距为10像素
top = 10; //按钮放在页面顶部,顶边距为10像素
position = "absolute"; //绝对定位
}
//在aardio中使用CSS选择器
var menu = body.querySelector("menu");
//在aardio中监听节点事件
menu.onMenuItemClick = function (ltTarget,ltEle,reason,behaviorParams) {
winform.msgbox("你点了:" + ltTarget.innerText );
return true;
}
menu.attachEventHandler();//开始监听节点事件
winform.show()
win.loopMessage();