HTMLayout中的 theme url

编程 · 发表于 2012-6-3 21:46:35

theme url 用于获取系统主题相应的控件图片,
格式为 "theme:控件名称-状态", 在css中也可以使用,例如

option > text:hover { background-image:url(theme:list-view-item-hover); }

复制代码

下面是HTMLayout自带的范例:

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;right=599;text="aardio Form" )
winform.add(  )
/*}}*/

import web.layout;
import web.layout.behavior.tabs;
import web.layout.behavior.shellIcon;
import web.layout.behavior.lightBoxDialog;
import web.layout.behavior.grid;
import web.layout.behavior.sortableGrid

var wbLayout = web.layout(winform);

wbLayout.html = /*********
<html>
<head><style>

/*listitemicon*/
option img {
  margin:2px;
  min-width:20px;
  min-height:20px;
  foreground-repeat:no-repeat;
  vertical-align:middle;
}
option img[stretch] {
  foreground-repeat:stretch;
  width:20px;
  height:20px;
}

widget {
  width:max-intrinsic;
  height:100%%;
}

div {
  padding:10px;
  width:100%%;
  height:100%%;
}

.header { background-color:threedface; padding:4px; margin:0; }

@media screen && composition-supported {
  /* these work only if Aero DWM is in effect */
  option { background-color:transparent; background-repeat:stretch; color:windowtext; }
  widget:focus option:checked { background-image:url(theme:list-view-item-selected); }
  option:hover { background-image:url(theme:list-view-item-hover); }
  option:checked { background-image:url(theme:list-view-item-selected-not-focus); }
  option:checked:hover { background-image:url(theme:list-view-item-selected-hover); }
  em#is-aero { assigned!: self:value = "Yep!"; }
}
</style>
</head>
<body style="flow:horizontal">

<widget type="select">
  <option><img src="theme:button-normal">button-normal</option>
  <option><img src="theme:button-hover">button-hover</option>
  <option><img src="theme:button-pressed">button-pressed</option>
  <option><img src="theme:button-disabled">button-disabled</option>
  <option><img src="theme:button-defaulted">button-defaulted</option>
  <option><img src="theme:radio-normal">radio-normal</option>
  <option><img src="theme:radio-hover">radio-hover</option>
  <option><img src="theme:radio-pressed">radio-pressed</option>
  <option><img src="theme:radio-disabled">radio-disabled</option>
  <option><img src="theme:radio-checked-normal">radio-checked-normal</option>
  <option><img src="theme:radio-checked-hover">radio-checked-hover</option>
  <option><img src="theme:radio-checked-pressed">radio-checked-pressed</option>
  <option><img src="theme:radio-checked-disabled">radio-checked-disabled</option>
  <option><img src="theme:check-normal">check-normal</option>
  <option><img src="theme:check-hover">check-hover</option>
  <option><img src="theme:check-pressed">check-pressed</option>
  <option><img src="theme:check-disabled">check-disabled</option>
  <option><img src="theme:check-checked-normal">check-checked-normal</option>
  <option><img src="theme:check-checked-hover">check-checked-hover</option>
  <option><img src="theme:check-checked-pressed">check-checked-pressed</option>
  <option><img src="theme:check-checked-disabled">check-checked-disabled</option>
  <option><img src="theme:check-mixed-normal">check-mixed-normal</option>
  <option><img src="theme:check-mixed-hover">check-mixed-hover</option>
  <option><img src="theme:check-mixed-pressed">check-mixed-pressed</option>
  <option><img src="theme:check-mixed-disabled">check-mixed-disabled</option>
  <option><img src="theme:groupbox-normal">groupbox-normal</option>
  <option><img src="theme:groupbox-disabled">groupbox-disabled</option>
  <option><img src="theme:edit-normal">edit-normal</option>
  <option><img src="theme:edit-hot">edit-hot</option>
  <option><img src="theme:edit-selected">edit-selected</option>
  <option><img src="theme:edit-disabled">edit-disabled</option>
  <option><img src="theme:edit-focused">edit-focused</option>
  <option><img src="theme:edit-read-only">edit-read-only</option>
  <option><img src="theme:edit-assist">edit-assist</option>
  <option><img src="theme:v-scrollbar-minus-normal">v-scrollbar-minus-normal</option>
  <option><img src="theme:v-scrollbar-minus-hover">v-scrollbar-minus-hover</option>
  <option><img src="theme:v-scrollbar-minus-pressed">v-scrollbar-minus-pressed</option>
  <option><img src="theme:v-scrollbar-minus-disabled">v-scrollbar-minus-disabled</option>
  <option><img src="theme:v-scrollbar-plus-normal">v-scrollbar-plus-normal</option>
  <option><img src="theme:v-scrollbar-plus-hover">v-scrollbar-plus-hover</option>
  <option><img src="theme:v-scrollbar-plus-pressed">v-scrollbar-plus-pressed</option>
  <option><img src="theme:v-scrollbar-plus-disabled">v-scrollbar-plus-disabled</option>
  <option><img src="theme:v-scrollbar-base">v-scrollbar-base</option>
  <option><img src="theme:v-scrollbar-page-minus-normal">v-scrollbar-page-minus-normal</option>
  <option><img src="theme:v-scrollbar-page-minus-hover">v-scrollbar-page-minus-hover</option>
  <option><img src="theme:v-scrollbar-page-minus-pressed">v-scrollbar-page-minus-pressed</option>
  <option><img src="theme:v-scrollbar-page-minus-disabled">v-scrollbar-page-minus-disabled</option>
  <option><img src="theme:v-scrollbar-page-plus-normal">v-scrollbar-page-plus-normal</option>
  <option><img src="theme:v-scrollbar-page-plus-hover">v-scrollbar-page-plus-hover</option>
  <option><img src="theme:v-scrollbar-page-plus-pressed">v-scrollbar-page-plus-pressed</option>
  <option><img src="theme:v-scrollbar-page-plus-disabled">v-scrollbar-page-plus-disabled</option>
  <option><img src="theme:h-scrollbar-minus-normal">h-scrollbar-minus-normal</option>
  <option><img src="theme:h-scrollbar-minus-hover">h-scrollbar-minus-hover</option>
  <option><img src="theme:h-scrollbar-minus-pressed">h-scrollbar-minus-pressed</option>
  <option><img src="theme:h-scrollbar-minus-disabled">h-scrollbar-minus-disabled</option>
  <option><img src="theme:h-scrollbar-plus-normal">h-scrollbar-plus-normal</option>
  <option><img src="theme:h-scrollbar-plus-hover">h-scrollbar-plus-hover</option>
  <option><img src="theme:h-scrollbar-plus-pressed">h-scrollbar-plus-pressed</option>
  <option><img src="theme:h-scrollbar-plus-disabled">h-scrollbar-plus-disabled</option>
  <option><img src="theme:h-scrollbar-base">h-scrollbar-base</option>
  <option><img src="theme:h-scrollbar-page-minus-normal">h-scrollbar-page-minus-normal</option>
  <option><img src="theme:h-scrollbar-page-minus-hover">h-scrollbar-page-minus-hover</option>
  <option><img src="theme:h-scrollbar-page-minus-pressed">h-scrollbar-page-minus-pressed</option>
  <option><img src="theme:h-scrollbar-page-minus-disabled">h-scrollbar-page-minus-disabled</option>
  <option><img src="theme:h-scrollbar-page-plus-normal">h-scrollbar-page-plus-normal</option>
  <option><img src="theme:h-scrollbar-page-plus-hover">h-scrollbar-page-plus-hover</option>
  <option><img src="theme:h-scrollbar-page-plus-pressed">h-scrollbar-page-plus-pressed</option>
  <option><img src="theme:h-scrollbar-page-plus-disabled">h-scrollbar-page-plus-disabled</option>

  <option><img src="theme:tree-view-glyph-closed">tree-view-glyph-closed</option>
  <option><img src="theme:tree-view-glyph-open">tree-view-glyph-open</option>

  <option><img src="theme:list-view-item-normal" stretch>list-view-item-normal</option>
  <option><img src="theme:list-view-item-hover"  stretch>list-view-item-hover</option>
  <option><img src="theme:list-view-item-selected"  stretch>list-view-item-selected</option>
  <option><img src="theme:list-view-item-selected-not-focus" stretch>list-view-item-selected-not-focus</option>
  <option><img src="theme:list-view-item-disabled" stretch>list-view-item-disabled</option>
  <option><img src="theme:list-view-item-selected-hover" stretch>list-view-item-selected-hover</option>

  <option><img src="theme:combobox-button-normal">combobox-button-normal</option>
  <option><img src="theme:combobox-button-hover">combobox-button-hover</option>
  <option><img src="theme:combobox-button-pressed">combobox-button-pressed</option>
  <option><img src="theme:combobox-button-disabled">combobox-button-disabled</option>

  <option><img src="theme:tab-item-normal">tab-item-normal</option>
  <option><img src="theme:tab-item-hover">tab-item-hover</option>
  <option><img src="theme:tab-item-selected">tab-item-selected</option>
  <option><img src="theme:tab-item-disabled">tab-item-disabled</option>
  <option><img src="theme:tab-item-focused">tab-item-focused</option>

  <option><img src="theme:tab-item-leftmost-normal">tab-item-leftmost-normal</option>
  <option><img src="theme:tab-item-leftmost-hover">tab-item-leftmost-hover</option>
  <option><img src="theme:tab-item-leftmost-selected">tab-item-leftmost-selected</option>
  <option><img src="theme:tab-item-leftmost-disabled">tab-item-leftmost-disabled</option>
  <option><img src="theme:tab-item-leftmost-focused">tab-item-leftmost-focused</option>

  <option><img src="theme:tab-item-rightmost-normal">tab-item-rightmost-normal</option>
  <option><img src="theme:tab-item-rightmost-hover">tab-item-rightmost-hover</option>
  <option><img src="theme:tab-item-rightmost-selected">tab-item-rightmost-selected</option>
  <option><img src="theme:tab-item-rightmost-disabled">tab-item-rightmost-disabled</option>
  <option><img src="theme:tab-item-rightmost-focused">tab-item-rightmost-focused</option>

  <option><img src="theme:tab-panel">tab-panel</option>
  <option><img src="theme:h-spin-plus-normal">h-spin-plus-normal</option>
  <option><img src="theme:h-spin-plus-hover">h-spin-plus-hover</option>
  <option><img src="theme:h-spin-plus-pressed">h-spin-plus-pressed</option>
  <option><img src="theme:h-spin-plus-disabled">h-spin-plus-disabled</option>
  <option><img src="theme:h-spin-minus-normal">h-spin-minus-normal</option>
  <option><img src="theme:h-spin-minus-hover">h-spin-minus-hover</option>
  <option><img src="theme:h-spin-minus-pressed">h-spin-minus-pressed</option>
  <option><img src="theme:h-spin-minus-disabled">h-spin-minus-disabled</option>
  <option><img src="theme:v-spin-plus-normal">v-spin-plus-normal</option>
  <option><img src="theme:v-spin-plus-hover">v-spin-plus-hover</option>
  <option><img src="theme:v-spin-plus-pressed">v-spin-plus-pressed</option>
  <option><img src="theme:v-spin-plus-disabled">v-spin-plus-disabled</option>
  <option><img src="theme:v-spin-minus-normal">v-spin-minus-normal</option>
  <option><img src="theme:v-spin-minus-hover">v-spin-minus-hover</option>
  <option><img src="theme:v-spin-minus-pressed">v-spin-minus-pressed</option>
  <option><img src="theme:v-spin-minus-disabled">v-spin-minus-disabled</option>
  <option><img src="theme:v-progress-back">v-progress-back</option>
  <option><img src="theme:v-progress-chunk">v-progress-chunk</option>
  <option><img src="theme:h-progress-back">h-progress-back</option>
  <option><img src="theme:h-progress-chunk">h-progress-chunk</option>
  <option><img src="theme:h-trackbar-back">h-trackbar-back</option>
  <option><img src="theme:v-trackbar-back">v-trackbar-back</option>
  <option><img src="theme:h-trackbar-thumb-normal">h-trackbar-thumb-normal</option>
  <option><img src="theme:h-trackbar-thumb-hover">h-trackbar-thumb-hover</option>
  <option><img src="theme:h-trackbar-thumb-pressed">h-trackbar-thumb-pressed</option>
  <option><img src="theme:h-trackbar-thumb-focus">h-trackbar-thumb-focus</option>
  <option><img src="theme:h-trackbar-thumb-disabled">h-trackbar-thumb-disabled</option>
  <option><img src="theme:v-trackbar-thumb-normal">v-trackbar-thumb-normal</option>
  <option><img src="theme:v-trackbar-thumb-hover">v-trackbar-thumb-hover</option>
  <option><img src="theme:v-trackbar-thumb-pressed">v-trackbar-thumb-pressed</option>
  <option><img src="theme:v-trackbar-thumb-focus">v-trackbar-thumb-focus</option>
  <option><img src="theme:v-trackbar-thumb-disabled">v-trackbar-thumb-disabled</option>
  <option><img src="theme:h-trackbar-thumb-down-normal">h-trackbar-thumb-down-normal</option>
  <option><img src="theme:h-trackbar-thumb-down-hover">h-trackbar-thumb-down-hover</option>
  <option><img src="theme:h-trackbar-thumb-down-pressed">h-trackbar-thumb-down-pressed</option>
  <option><img src="theme:h-trackbar-thumb-down-disabled">h-trackbar-thumb-down-disabled</option>
  <option><img src="theme:h-trackbar-thumb-up-normal">h-trackbar-thumb-up-normal</option>
  <option><img src="theme:h-trackbar-thumb-up-hover">h-trackbar-thumb-up-hover</option>
  <option><img src="theme:h-trackbar-thumb-up-pressed">h-trackbar-thumb-up-pressed</option>
  <option><img src="theme:h-trackbar-thumb-up-disabled">h-trackbar-thumb-up-disabled</option>
  <option><img src="theme:v-trackbar-thumb-left-normal">v-trackbar-thumb-left-normal</option>
  <option><img src="theme:v-trackbar-thumb-left-hover">v-trackbar-thumb-left-hover</option>
  <option><img src="theme:v-trackbar-thumb-left-pressed">v-trackbar-thumb-left-pressed</option>
  <option><img src="theme:v-trackbar-thumb-left-disabled">v-trackbar-thumb-left-disabled</option>
  <option><img src="theme:v-trackbar-thumb-right-normal">v-trackbar-thumb-right-normal</option>
  <option><img src="theme:v-trackbar-thumb-right-hover">v-trackbar-thumb-right-hover</option>
  <option><img src="theme:v-trackbar-thumb-right-pressed">v-trackbar-thumb-right-pressed</option>
  <option><img src="theme:v-trackbar-thumb-right-disabled">v-trackbar-thumb-right-disabled</option>
<p class="header">rebar images:</p>
  <option><img src="theme:rebar-band">rebar-band</option>
  <option><img src="theme:rebar-h-gripper">rebar-h-gripper</option>
  <option><img src="theme:rebar-v-gripper">rebar-v-gripper</option>
  <option><img src="theme:rebar-h-shevron-normal">rebar-h-shevron-normal</option>
  <option><img src="theme:rebar-h-shevron-hover">rebar-h-shevron-hover</option>
  <option><img src="theme:rebar-h-shevron-pressed">rebar-h-shevron-pressed</option>
  <option><img src="theme:rebar-v-shevron-normal">rebar-v-shevron-normal</option>
  <option><img src="theme:rebar-v-shevron-hover">rebar-v-shevron-hover</option>
  <option><img src="theme:rebar-v-shevron-pressed">rebar-v-shevron-pressed</option>
<p class="header">toolbar images:</p>
  <option><img src="theme:toolbar-button-normal">toolbar-button-normal</option>
  <option><img src="theme:toolbar-button-hover">toolbar-button-hover</option>
  <option><img src="theme:toolbar-button-disabled">toolbar-button-disabled</option>
  <option><img src="theme:toolbar-button-checked">toolbar-button-checked</option>
  <option><img src="theme:toolbar-button-pressed">toolbar-button-pressed</option>
  <option><img src="theme:toolbar-button-checked-hover">toolbar-button-checked-hover</option>
  <option><img src="theme:toolbar-split-button-normal">toolbar-split-button-normal</option>
  <option><img src="theme:toolbar-split-button-hover">toolbar-split-button-hover</option>
  <option><img src="theme:toolbar-split-button-disabled">toolbar-split-button-disabled</option>
  <option><img src="theme:toolbar-split-button-checked">toolbar-split-button-checked</option>
  <option><img src="theme:toolbar-split-button-checked-hover">toolbar-split-button-checked-hover</option>
  <option><img src="theme:toolbar-split-dd-button-normal">toolbar-split-dd-button-normal</option>
  <option><img src="theme:toolbar-split-dd-button-hover">toolbar-split-dd-button-hover</option>
  <option><img src="theme:toolbar-split-dd-button-disabled">toolbar-split-dd-button-disabled</option>
  <option><img src="theme:toolbar-split-dd-button-checked">toolbar-split-dd-button-checked</option>
  <option><img src="theme:toolbar-split-dd-button-checked-hover">toolbar-split-dd-button-checked-hover</option>
  <option><img src="theme:toolbar-h-splitter" style="width:16px; ">toolbar-h-splitter</option>
  <option><img src="theme:toolbar-v-splitter" style="height:16px">toolbar-v-splitter</option>

  <option><img src="theme:column-header-normal" style="width:16px; ">column-header-normal</option>
  <option><img src="theme:column-header-hover" style="width:16px; ">column-header-hover</option>
  <option><img src="theme:column-header-pressed" style="width:16px; ">column-header-pressed</option>
</widget>

<div>
  <h1>Theme images available in Sciter and HTMLayout</h1>
  <p>Use with "theme" URL schema for example see source of this document</p>
  <p>Windows Aero detected:<em #is-aero>sorry but no</em>, if Aero is here then list view uses Windows Explorer list styling.</p>
</div>

</body>
</html>

*********/

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

lujjjh · 发表于 2012-6-4 21:10:30

应用：开关控件

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=111;parent=...;text="Switch";right=263;max=false )
winform.add( )
/*}}*/

import web.layout;

var wbLayout = web.layout(winform);

wbLayout.html = /**
<body>
<p>功能选择：</p>
<a type="switch"><em>杀毒软件</em></a>
<a type="switch"><em>防火墙</em></a>
</body>
**/

wbLayout.css = /**
html {
font: system;
}

a[type="switch"] {
padding-right: 20px;
display: inline-block;
behavior: check;
background: url(theme:button-disabled) expand;
}
a[type="switch"] em {
padding: 8px;
display: inline-block;
position: relative;
font-style: normal;
width: max-intrinsic;
text-align: center;
background: url(theme:button-normal) expand;
}
a[type="switch"]:hover em {
background-image: url(theme:button-hover);
}
a[type="switch"]:active em {
background-image: url(theme:button-pressed);
}
a[type="switch"]:checked em {
left: 20px;
transition: left(back-in-out, 200ms);
}
**/

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

lujjjh · 发表于 2012-6-4 21:21:51

应用：edit 中嵌套按钮

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=55;parent=...;text="百度搜索";right=303;max=false )
winform.add(
edit={ bottom=72;text="edit";left=136;top=48;z=1;right=192;hide=1;edge=1;cls="edit" }
)
/*}}*/

import web.layout;

var wbLayout = web.layout(winform);

wbLayout.onButtonClick = function (ltTarget,ltEle,reason,behaviorParams) {
if (ltEle.id = "searchButton") {
winform.msgbox("搜索");
}
}

wbLayout.html = /**
<body>
<div id="search">
<input type="text" id="searchEdit" />
<button id="searchButton">百度一下</button>
</div>
</body>
**/

wbLayout.css = /**
html {
font: system;
}

#search {
padding: 4px;
background: url(theme:edit-normal) expand;
}
#search input[type=text] {
width: 100%%;
height: 100%%;
border: 0;
background: none;
}
#search button {
padding: 8px 8px 8px 28px;
foreground: url(http://www.baidu.com/favicon.ico) 8px 50% no-repeat;
}
**/

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

xauto · 发表于 2012-6-4 21:38:42

真棒、要好好学习下 ...

jyb21 · 发表于 2013-4-13 13:06:51

lujjjh的创意总是那么惊人

		自动登录	找回密码
密码			注册会员