-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
270 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
以width作为例子 | ||
|
||
类型 | 下限 | 建议 | 上限 | ||
----|--------------|--------------|---------- | ||
CSS | min-width | width| max-width | ||
LUI | limited-width| fitting-width| max-width | ||
|
||
|
||
CSS的属性会覆写LUI属性对应值,并且处于高优先级。即: | ||
- 如果指定了CSS属性,那么写入对应的LUI属性,再标记处于CSS状态 | ||
- 如果没有指定CSS属性,那么LUI属性会按照相应的规则处理 | ||
- 可以通过`style`或者直接的属性进行CSS属性设置 | ||
|
||
```cpp | ||
case BKDR_MINWIDTH: | ||
// minwidth | ||
m_oStyle.limited.width = value.ToFloat(); | ||
m_oStyle.overflow_sizestyled.min_width = true; | ||
break; | ||
case BKDR_MINHEIGHT: | ||
// minheight | ||
m_oStyle.limited.height = value.ToFloat(); | ||
m_oStyle.overflow_sizestyled.min_height = true; | ||
break; | ||
``` | ||
|
||
一个最简单的例子就是图像`<image>`,建议宽度就是使用图片的宽度,下限宽度可以考虑`0`或者`1`。 | ||
|
||
复杂点的例子就是箱型布局`<box>`。LongUI中,使用对应滚动条(这里就是水平滚动条)的`<box>`下限宽度会调整到`0`,建议宽度依然是有效子控件建议宽度(以及边框什么的)累加。如果没有使用滚动条则两值相同。 | ||
|
||
而一旦使用CSS值,则以设置值为准。 | ||
|
||
正常控件大小应该介于建议值与最大值之间,特殊情况会处于最小值与建议值之间。而这种特殊情况`<box>`处理方式有点违背常理——`flex`越大的值反而最小,可以理解为以建议值作为起点,`flex`作为伸缩参数,越大的伸得越大,缩得也越大。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# LongUI Special | ||
|
||
## HiDPI Support |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<?xml version="1.0"?> | ||
|
||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> | ||
|
||
<window id="example-window" title="Example 4.1.1" | ||
xmlns:html="http://www.w3.org/1999/xhtml" | ||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> | ||
<stack> | ||
<label value="Shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15px"/> | ||
<label value="Shadowed" style="color: red; font-size: 15px;"/> | ||
</stack> | ||
|
||
|
||
</window> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<?xml version="1.0"?> | ||
|
||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> | ||
|
||
<window id="example-window" title="Example 4.1.2" | ||
xmlns:html="http://www.w3.org/1999/xhtml" | ||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> | ||
<stack style="background-color: #C0C0C0"> | ||
<label value="Disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/> | ||
<label value="Disabled" style="color: grey;"/> | ||
</stack> | ||
|
||
|
||
</window> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<?xml version="1.0"?> | ||
|
||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> | ||
|
||
<window id="example-window" title="Example 4.1.3" | ||
xmlns:html="http://www.w3.org/1999/xhtml" | ||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> | ||
<deck selectedIndex="2"> | ||
<label value="This is the first page"/> | ||
<button label="This is the second page"/> | ||
<box> | ||
<label value="This is the third page"/> | ||
<button label="This is also the third page"/> | ||
</box> | ||
</deck> | ||
|
||
|
||
</window> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<?xml version="1.0"?> | ||
|
||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> | ||
|
||
<window id="example-window" title="Example 4.3.1" | ||
xmlns:html="http://www.w3.org/1999/xhtml" | ||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> | ||
<tabbox> | ||
<tabs> | ||
<tab label="Mail"/> | ||
<tab label="News"/> | ||
</tabs> | ||
<tabpanels> | ||
<tabpanel id="mailtab"> | ||
<checkbox label="Automatically check for mail"/> | ||
</tabpanel> | ||
<tabpanel id="newstab"> | ||
<button label="Clear News Buffer"/> | ||
</tabpanel> | ||
</tabpanels> | ||
</tabbox> | ||
|
||
|
||
</window> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
<?xml version="1.0"?> | ||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> | ||
|
||
<window | ||
id="findfile-window" | ||
title="Find Files" | ||
orient="horizontal" | ||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> | ||
|
||
<vbox flex="1"> | ||
|
||
<tabbox> | ||
<tabs> | ||
<tab label="Search" selected="true"/> | ||
<tab label="Options"/> | ||
</tabs> | ||
|
||
<tabpanels> | ||
<tabpanel id="searchpanel" orient="vertical"> | ||
|
||
|
||
<label value="Enter your search criteria below and select the Find button to begin the search."/> | ||
|
||
<spacer style="height: 10px"/> | ||
|
||
<groupbox orient="horizontal"> | ||
<caption label="Search Criteria"/> | ||
<menulist id="searchtype"> | ||
<menupopup> | ||
<menuitem label="Name"/> | ||
<menuitem label="Size"/> | ||
<menuitem label="Date Modified"/> | ||
</menupopup> | ||
</menulist> | ||
<spacer style="width: 10px;"/> | ||
<menulist id="searchmode"> | ||
<menupopup> | ||
<menuitem label="Is"/> | ||
<menuitem label="Is Not"/> | ||
</menupopup> | ||
</menulist> | ||
<spacer style="width: 10px;"/> | ||
<textbox id="find-text" flex="1" style="min-width: 15em;"/> | ||
</groupbox> | ||
</tabpanel> | ||
<tabpanel id="optionspanel" orient="vertical"> | ||
<checkbox id="casecheck" label="Case Sensitive Search"/> | ||
<checkbox id="wordscheck" label="Match Entire Filename"/> | ||
</tabpanel> | ||
|
||
</tabpanels> | ||
</tabbox> | ||
|
||
<spacer style="height: 10px"/> | ||
|
||
<hbox> | ||
<progressmeter value="50%" style="margin: 4px;"/> | ||
<spacer flex="1"/> | ||
<button id="find-button" label="Find" default="true"/> | ||
<button id="cancel-button" label="Cancel"/> | ||
</hbox> | ||
|
||
</vbox> | ||
|
||
</window> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
It is common in preference dialogs for tabbed pages to appear. We'll find out how to create them here. | ||
|
||
# Tabboxes | ||
|
||
Tabboxes are typically used in an application in the preferences window. A series of tabs appears across the top of a window. The user can click each tab to see a different set of options. It is useful in cases when you have more options than will fit in one screen. | ||
|
||
XUL provides a method to create such dialogs. It involves five new elements, which are described briefly here and in more detail below. | ||
|
||
- [tabbox](./tabbox.md) The outer box that contains the tabs along the top and the tab pages themselves. | ||
- [tabs](./tabs.md) The inner box that contains the individual tabs. In other words, this is the row of tabs. | ||
- [tab](./tab.md) A specific tab. Clicking on the tab brings the tab page to the front. | ||
- [tabpanels](./tabpanels.md) The container for the pages. | ||
- [tabpanel](./tabpanels.md) The body of a single page. You would place the content for a page within this element. The first tabpanel corresponds to the first tab, the second tabpanel corresponds to the second tab and so on. | ||
|
||
The `tabbox` is the outer element. It consists of two children, a `tabs` element which contains the row of tabs and a `tabpanels` elements which contains the tabbed pages. | ||
|
||
Shown below is the general syntax of a tabbox: | ||
|
||
```xml | ||
<tabbox id="tablist"> | ||
<tabs> | ||
<!-- tab elements go here --> | ||
</tabs> | ||
<tabpanels> | ||
<!-- tabpanel elements go here --> | ||
</tabpanels> | ||
</tabbox> | ||
``` | ||
|
||
The `tab` elements are placed inside a `tabs` element, which is much like a regular box. The `tabs` element itself has been placed inside a `tabbox`. The `tabbox` also contains a `tabpanels` element which will appear below the `tabs` due to the vertical orientation on the whole tabbox. | ||
|
||
There is really nothing special about the tab elements that make them different than boxes. Like boxes, tabs can contain any element. The difference is that the tabs render slightly differently and only one tab panel's contents are visible at once, much like a `deck`. | ||
|
||
The contents of the individual tab pages should go inside each `tabpanel` element. They do not go in the `tab` elements, as that is where the contents of the tabs along the top go. | ||
|
||
Each `tabpanel` element becomes a page on the tabbed display. The first panel corresponds to the first tab, the second panel corresponds to the second tab, and so on. There is a one-to-one relationship between the `tab` and `tabpanel` elements. | ||
|
||
When determining the size of the `tabbox`, the size of the largest page is used. That means that if there are ten textboxes on one tab page and only one on another, the tab page will be sized to fit the one with the ten on it as this takes up more room. The area taken up by the tab area does not change when the user switches to a new tab page. | ||
|
||
# Tabbox example | ||
|
||
- Example 1 | ||
- | ||
|
||
# REF | ||
|
||
- [XUL-Tabboxes](https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/Tutorial/Tabboxes) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.