jquery html多选框选中,HTMLayout CSS选择器语法详解

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();