зеркало из https://github.com/mozilla/gecko-dev.git
Adding grid examples. Not in build.
This commit is contained in:
Родитель
704f5f5fc1
Коммит
25c9c2166b
|
@ -0,0 +1,40 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox>
|
||||
<grid style="border: 2px inset gray;" id="grid">
|
||||
<columns>
|
||||
<column style="border: 10px inset red;"/>
|
||||
<column/>
|
||||
<column style="border: 10px inset red;"/>
|
||||
</columns>
|
||||
|
||||
<rows style="font-size: 20pt;">
|
||||
<row>
|
||||
<text value="Cell 1 "/>
|
||||
<text value="Cell 2 "/>
|
||||
<text value="Cell 3 "/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="Cell 4 "/>
|
||||
<text value="Cell 5 " style="border: 10px inset red;"/>
|
||||
<text value="Cell 6 "/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="Cell 7 "/>
|
||||
<text value="Cell 8 "/>
|
||||
<text value="Cell 9 "/>
|
||||
</row>
|
||||
|
||||
</rows>
|
||||
</grid>
|
||||
</hbox>
|
||||
</window>
|
|
@ -0,0 +1,52 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox>
|
||||
<grid style="border: 2px inset gray;" id="grid">
|
||||
<columns style="border: 0px solid blue">
|
||||
<column/>
|
||||
<column/>
|
||||
<column/>
|
||||
</columns>
|
||||
|
||||
<rows style="font-size: 40pt; border: 15px inset blue">
|
||||
<row>
|
||||
<text value="Cell(1)"/>
|
||||
<text value="Cell(2)"/>
|
||||
<text value="Cell(3)"/>
|
||||
</row>
|
||||
<rows style="border: 10px inset green">
|
||||
<row>
|
||||
<text value="Cell(1)"/>
|
||||
<text value="Cell(2)"/>
|
||||
<text value="Cell(3)"/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="Cell(4)"/>
|
||||
<text value="Cell(5)"/>
|
||||
<text value="Cell(6)"/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="Cell(7)"/>
|
||||
<text value="Cell(8)"/>
|
||||
<text value="Cell(9)"/>
|
||||
</row>
|
||||
|
||||
</rows>
|
||||
<row>
|
||||
<text value="Cell(7)"/>
|
||||
<text value="Cell(8)"/>
|
||||
<text value="Cell(9)"/>
|
||||
</row>
|
||||
</rows>
|
||||
</grid>
|
||||
</hbox>
|
||||
</window>
|
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
<?xml-stylesheet href="gridsample.css" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox>
|
||||
<grid style="border: 2px inset gray;" id="grid">
|
||||
<columns>
|
||||
<column style="border: 10px solid red;"/>
|
||||
<column/>
|
||||
<column/>
|
||||
</columns>
|
||||
|
||||
<rows style="font-size: 40pt;">
|
||||
<row style="border: 10px solid red;">
|
||||
<text value="Cell 1 "/>
|
||||
<text value="Cell 2 "/>
|
||||
<text value="Cell 3 "/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="Cell 4 "/>
|
||||
<text value="Cell 5 "/>
|
||||
<text value="Cell 6 "/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="Cell 7 "/>
|
||||
<text value="Cell 8 "/>
|
||||
<text value="Cell 9 "/>
|
||||
</row>
|
||||
|
||||
</rows>
|
||||
</grid>
|
||||
</hbox>
|
||||
</window>
|
|
@ -0,0 +1,54 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox>
|
||||
<grid style="border: 2px inset gray;" id="grid">
|
||||
<columns>
|
||||
<column/>
|
||||
<columns style="border: 10px solid red">
|
||||
<column/>
|
||||
</columns>
|
||||
<column/>
|
||||
</columns>
|
||||
|
||||
<rows style="font-size: 24pt">
|
||||
<row>
|
||||
<text value="Cell(1)"/>
|
||||
<text value="Cell(2)"/>
|
||||
<text value="Cell(3)"/>
|
||||
</row>
|
||||
<rows style="border: 10px solid green">
|
||||
<row>
|
||||
<text value="Cell(1)"/>
|
||||
<text value="Cell(2)"/>
|
||||
<text value="Cell(3)"/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="Cell(4)"/>
|
||||
<text value="Cell(5)"/>
|
||||
<text value="Cell(6)"/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="Cell(7)"/>
|
||||
<text value="Cell(8)"/>
|
||||
<text value="Cell(9)"/>
|
||||
</row>
|
||||
|
||||
</rows>
|
||||
<row>
|
||||
<text value="Cell(7)"/>
|
||||
<text value="Cell(8)"/>
|
||||
<text value="Cell(9)"/>
|
||||
</row>
|
||||
</rows>
|
||||
</grid>
|
||||
</hbox>
|
||||
</window>
|
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
<?xml-stylesheet href="gridsample.css" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox>
|
||||
<grid style="border: 2px inset gray;" id="grid">
|
||||
<columns>
|
||||
<column style="border: 10px inset red; margin: 10px; "/>
|
||||
<column/>
|
||||
<column/>
|
||||
</columns>
|
||||
|
||||
<rows style="font-size: 40pt;">
|
||||
<row style="border: 5px solid green">
|
||||
<text value="Cell 1"/>
|
||||
<text value="Cell 2"/>
|
||||
<text value="Cell 3"/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="Cell 4"/>
|
||||
<text value="Cell 5"/>
|
||||
<text value="Cell 6"/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="Cell 7"/>
|
||||
<text value="Cell 8"/>
|
||||
<text value="Cell 9"/>
|
||||
</row>
|
||||
|
||||
</rows>
|
||||
</grid>
|
||||
</hbox>
|
||||
</window>
|
|
@ -0,0 +1,64 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical" style="border: 2px solid green"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<script>
|
||||
|
||||
function collapseTag(id)
|
||||
{
|
||||
var row = window.document.getElementById(id);
|
||||
row.setAttribute("collapsed","true");
|
||||
}
|
||||
|
||||
function uncollapseTag(id)
|
||||
{
|
||||
var row = window.document.getElementById(id);
|
||||
row.setAttribute("collapsed","false");
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<hbox>
|
||||
<grid style="border: 2px solid red;" id="grid">
|
||||
<columns id="columns1">
|
||||
<column id="column1"/>
|
||||
<column id="column2"/>
|
||||
<column id="column3"/>
|
||||
</columns>
|
||||
|
||||
<rows id="rows1" style="font-size: 24pt">
|
||||
<row id="row1">
|
||||
<text value="cell1"/>
|
||||
<text value="cell2"/>
|
||||
<text value="cell3"/>
|
||||
</row>
|
||||
<row id="row2">
|
||||
<text value="cell4"/>
|
||||
<text value="cell5"/>
|
||||
<text value="cell6"/>
|
||||
</row>
|
||||
<row id="row3">
|
||||
<text value="cell7"/>
|
||||
<text value="cell8"/>
|
||||
<text value="cell9"/>
|
||||
</row>
|
||||
</rows>
|
||||
</grid>
|
||||
</hbox>
|
||||
<hbox>
|
||||
<button label="collapse row 2" oncommand="collapseTag('row2');"/>
|
||||
<button label="uncollapse row 2" oncommand="uncollapseTag('row2');"/>
|
||||
<button label="collapse column 2" oncommand="collapseTag('column2');"/>
|
||||
<button label="uncollapse column 2" oncommand="uncollapseTag('column2');"/>
|
||||
|
||||
</hbox>
|
||||
|
||||
</window>
|
|
@ -0,0 +1,30 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical" style="border: 2px solid green"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<hbox>
|
||||
<grid style="border: 2px solid red;">
|
||||
<columns>
|
||||
<column/>
|
||||
<description style="border: 10px inset gray">
|
||||
hello
|
||||
</description>
|
||||
<column/>
|
||||
</columns>
|
||||
|
||||
<rows>
|
||||
<row>
|
||||
<text style="font-size: 40px" value="foo1"/>
|
||||
<text style="font-size: 40px" value="foo2"/>
|
||||
</row>
|
||||
</rows>
|
||||
</grid>
|
||||
<spacer flex="1" style="background-color: white"/>
|
||||
</hbox>
|
||||
</window>
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical" style="border: 2px solid green"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox>
|
||||
<grid style="width: 100px; border: 2px solid red;">
|
||||
<rows>
|
||||
<row style="font-size: 40px">
|
||||
<text value="foo1"/>
|
||||
<text value="foo2"/>
|
||||
</row>
|
||||
<description>
|
||||
this is some html in the row this should wrap if it is big enough.
|
||||
</description>
|
||||
<row style="font-size: 40px">
|
||||
<text value="foo3"/>
|
||||
<text value="foo4"/>
|
||||
</row>
|
||||
|
||||
</rows>
|
||||
</grid>
|
||||
<spacer flex="1" style="background-color: white"/>
|
||||
</hbox>
|
||||
|
||||
|
||||
</window>
|
|
@ -0,0 +1,367 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
<?xml-stylesheet href="gridsample.css" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||||
onload="start()">
|
||||
|
||||
<script>
|
||||
|
||||
var selected;
|
||||
var count = 0;
|
||||
|
||||
function isCell(box)
|
||||
{
|
||||
if (box.localName == "row" ||
|
||||
box.localName == "column" ||
|
||||
box.localName == "rows" ||
|
||||
box.localName == "columns" ||
|
||||
box.localName == "grid")
|
||||
return false;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function start()
|
||||
{
|
||||
selectIt(window.document.getElementById("rows"));
|
||||
}
|
||||
|
||||
function selectIt(box)
|
||||
{
|
||||
if (!box)
|
||||
return;
|
||||
|
||||
var a = box.getAttribute("selected");
|
||||
if (a != "true") {
|
||||
box.setAttribute("selected","true");
|
||||
if (selected)
|
||||
selected.setAttribute("selected","false");
|
||||
|
||||
selected = box;
|
||||
}
|
||||
}
|
||||
|
||||
function addCellSelectionHandle(box)
|
||||
{
|
||||
box.setAttribute("oncommand", "selectIt(this);");
|
||||
}
|
||||
|
||||
function addRowColumnSelectionHandle(box)
|
||||
{
|
||||
box.setAttribute("onclick", "selectIt(this);");
|
||||
}
|
||||
|
||||
function createButton(str)
|
||||
{
|
||||
var b = document.createElement("button");
|
||||
b.setAttribute("label", str+count);
|
||||
count++;
|
||||
addCellSelectionHandle(b);
|
||||
return b;
|
||||
}
|
||||
|
||||
function createRow()
|
||||
{
|
||||
var b = document.createElement("row");
|
||||
b.setAttribute("dynamic","true");
|
||||
|
||||
addRowColumnSelectionHandle(b);
|
||||
return b;
|
||||
}
|
||||
|
||||
function createColumn()
|
||||
{
|
||||
var b = document.createElement("column");
|
||||
b.setAttribute("dynamic","true");
|
||||
addRowColumnSelectionHandle(b);
|
||||
return b;
|
||||
}
|
||||
|
||||
function createText(str)
|
||||
{
|
||||
var text = document.createElement("text");
|
||||
text.setAttribute("value", str+count);
|
||||
count++;
|
||||
text.setAttribute("style", "font-size: 40pt");
|
||||
addCellSelectionHandle(text);
|
||||
return text;
|
||||
}
|
||||
|
||||
function appendElement(element, prepend)
|
||||
{
|
||||
if (!selected)
|
||||
return;
|
||||
|
||||
setUserAttribute(element);
|
||||
|
||||
if (selected.localName == "rows")
|
||||
appendRow(false);
|
||||
else if (selected.localName == "columns")
|
||||
appendColumn(false);
|
||||
|
||||
if (selected.localName == "row" || selected.localName == "column" ) { // is row or column
|
||||
selected.appendChild(element);
|
||||
} else {
|
||||
var parent = selected.parentNode;
|
||||
if (prepend)
|
||||
parent.insertBefore(element, selected);
|
||||
else {
|
||||
var next = selected.nextSibling;
|
||||
if (next)
|
||||
parent.insertBefore(element,next);
|
||||
else
|
||||
parent.appendChild(element);
|
||||
}
|
||||
}
|
||||
|
||||
selectIt(element);
|
||||
}
|
||||
|
||||
function getRows(box)
|
||||
{
|
||||
return window.document.getElementById("rows");
|
||||
}
|
||||
|
||||
function getColumns(box)
|
||||
{
|
||||
return window.document.getElementById("columns");
|
||||
}
|
||||
|
||||
function setUserAttribute(element)
|
||||
{
|
||||
var attributeBox = document.getElementById("attributebox");
|
||||
var valueBox = document.getElementById("valuebox");
|
||||
var attribute = attributeBox.value;
|
||||
var value = valueBox.value;
|
||||
if (attribute != "")
|
||||
element.setAttribute(attribute,value);
|
||||
}
|
||||
|
||||
function appendRowColumn(rowColumn, prepend)
|
||||
{
|
||||
if (!selected)
|
||||
return;
|
||||
|
||||
setUserAttribute(rowColumn);
|
||||
|
||||
var row = rowColumn;
|
||||
|
||||
// first see what we are adding.
|
||||
|
||||
if (isCell(selected)) { // if cell then select row/column
|
||||
selectIt(selected.parentNode);
|
||||
}
|
||||
|
||||
if (selected.localName == "row" || selected.localName == "rows")
|
||||
if (row.localName == "column") {
|
||||
selectIt(getColumns(selected));
|
||||
dump("Selecting the column")
|
||||
dump("Selected="+selected.localName);
|
||||
}
|
||||
|
||||
if (selected.localName == "column" || selected.localName == "columns")
|
||||
if (row.localName == "row")
|
||||
selectIt(getRows(selected));
|
||||
|
||||
if (selected.localName == "rows" || selected.localName == "columns" )
|
||||
{ // if rows its easy
|
||||
selected.appendChild(row);
|
||||
} else {
|
||||
var parent = selected.parentNode;
|
||||
if (prepend)
|
||||
parent.insertBefore(row, selected);
|
||||
else {
|
||||
var next = selected.nextSibling;
|
||||
if (next)
|
||||
parent.insertBefore(row,next);
|
||||
else
|
||||
parent.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
selectIt(row);
|
||||
}
|
||||
|
||||
function appendRow(prepend)
|
||||
{
|
||||
var row = createRow();
|
||||
appendRowColumn(row,prepend);
|
||||
}
|
||||
|
||||
|
||||
function appendColumn(prepend)
|
||||
{
|
||||
var column = createColumn();
|
||||
appendRowColumn(column,prepend);
|
||||
}
|
||||
|
||||
|
||||
function selectRows()
|
||||
{
|
||||
var rows = getRows();
|
||||
if (rows.firstChild)
|
||||
selectIt(rows.firstChild);
|
||||
else
|
||||
selectIt(rows);
|
||||
}
|
||||
|
||||
|
||||
function selectColumns()
|
||||
{
|
||||
var columns = getColumns();
|
||||
if (columns.firstChild)
|
||||
selectIt(columns.firstChild);
|
||||
else
|
||||
selectIt(columns);
|
||||
}
|
||||
|
||||
function nextElement()
|
||||
{
|
||||
if (!selected)
|
||||
return;
|
||||
|
||||
selectIt(selected.nextSibling);
|
||||
}
|
||||
|
||||
function previousElement()
|
||||
{
|
||||
if (!selected)
|
||||
return;
|
||||
|
||||
selectIt(selected.previousSibling);
|
||||
}
|
||||
|
||||
function selectRow()
|
||||
{
|
||||
if (!selected)
|
||||
return;
|
||||
|
||||
if (selected.localName == "row")
|
||||
return;
|
||||
|
||||
if (isCell(selected)) {
|
||||
if (selected.parentNode.localName == "row")
|
||||
selectIt(selected.parentNode);
|
||||
}
|
||||
}
|
||||
|
||||
function selectColumn()
|
||||
{
|
||||
if (!selected)
|
||||
return;
|
||||
|
||||
if (selected.localName == "column")
|
||||
return;
|
||||
|
||||
if (isCell(selected)) {
|
||||
if (selected.parentNode.localName == "column")
|
||||
selectIt(selected.parentNode);
|
||||
}
|
||||
}
|
||||
|
||||
function collapseGrid()
|
||||
{
|
||||
var grid = document.getElementById("grid");
|
||||
var collapsed = grid.getAttribute("collapsed");
|
||||
|
||||
if (collapsed == "")
|
||||
grid.setAttribute("collapsed","true");
|
||||
else
|
||||
grid.setAttribute("collapsed","");
|
||||
|
||||
}
|
||||
|
||||
function collapseElement()
|
||||
{
|
||||
if (selected) {
|
||||
var collapsed = selected.getAttribute("collapsed");
|
||||
|
||||
if (collapsed == "")
|
||||
selected.setAttribute("collapsed","true");
|
||||
else
|
||||
selected.setAttribute("collapsed","");
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<hbox flex="1" style="border: 2px inset gray; overflow: auto">
|
||||
<vbox flex="1">
|
||||
<hbox>
|
||||
<grid id="grid" style="border: 2px solid red;">
|
||||
<columns id="columns">
|
||||
</columns>
|
||||
|
||||
<rows start="true" id="rows">
|
||||
</rows>
|
||||
</grid>
|
||||
<spacer flex="1"/>
|
||||
</hbox>
|
||||
<spacer flex="1"/>
|
||||
</vbox>
|
||||
</hbox>
|
||||
|
||||
<grid style="background-color: blue">
|
||||
<columns>
|
||||
<column flex="1"/>
|
||||
<column flex="1"/>
|
||||
<column flex="1"/>
|
||||
<column flex="1"/>
|
||||
</columns>
|
||||
<rows>
|
||||
|
||||
<row>
|
||||
<button label="append row" oncommand="appendRow(false);"/>
|
||||
<button label="prepend row" oncommand="appendRow(true);"/>
|
||||
|
||||
<button label="append column" oncommand="appendColumn(false);"/>
|
||||
<button label="prepend column" oncommand="appendColumn(true);"/>
|
||||
</row>
|
||||
|
||||
<row>
|
||||
|
||||
<button label="append button" oncommand="appendElement(createButton('button'),false);"/>
|
||||
<button label="prepend button" oncommand="appendElement(createButton('button'),true);"/>
|
||||
|
||||
<button label="append text" oncommand="appendElement(createText('text'),false);"/>
|
||||
<button label="prepend text" oncommand="appendElement(createText('text'),true);"/>
|
||||
|
||||
</row>
|
||||
|
||||
<row>
|
||||
|
||||
<button label="select rows" oncommand="selectRows()"/>
|
||||
<button label="select columns" oncommand="selectColumns()"/>
|
||||
|
||||
<button label="next" oncommand="nextElement()"/>
|
||||
<button label="previous" oncommand="previousElement()"/>
|
||||
|
||||
</row>
|
||||
|
||||
<hbox valign="middle" autostretch="never">
|
||||
<button label="collapse/uncollapse grid" flex="1" oncommand="collapseGrid()"/>
|
||||
<button label="collapse/uncollapse element" flex="1" oncommand="collapseElement()"/>
|
||||
</hbox>
|
||||
|
||||
|
||||
|
||||
<hbox>
|
||||
|
||||
<text value="attribute"/>
|
||||
<textbox id="attributebox" value="" flex="1"/>
|
||||
<text value="value"/>
|
||||
<textbox id="valuebox" value="" flex="2"/>
|
||||
</hbox>
|
||||
|
||||
|
||||
</rows>
|
||||
</grid>
|
||||
|
||||
</window>
|
|
@ -0,0 +1,44 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
<?xml-stylesheet href="gridsample.css" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox>
|
||||
<grid style="border: 2px inset gray;" flex="1">
|
||||
<columns>
|
||||
<columns style="border: 10px solid red" flex="1">
|
||||
<column flex="2"/>
|
||||
<column flex="1"/>
|
||||
</columns>
|
||||
<column flex="1"/>
|
||||
</columns>
|
||||
|
||||
<rows style="font-size: 20pt">
|
||||
<rows>
|
||||
<row>
|
||||
<text class="yellow" value="CellA"/>
|
||||
<text class="yellow" value="CellAB"/>
|
||||
<text class="yellow" value="CellABC"/>
|
||||
</row>
|
||||
<row>
|
||||
<text class="yellow" value="CellA"/>
|
||||
<text class="yellow" value="CellAB"/>
|
||||
<text class="yellow" value="CellABC"/>
|
||||
</row>
|
||||
</rows>
|
||||
<row>
|
||||
<text class="yellow" value="CellA"/>
|
||||
<text class="yellow" value="CellAB"/>
|
||||
<text class="yellow" value="CellABC"/>
|
||||
</row>
|
||||
</rows>
|
||||
</grid>
|
||||
</hbox>
|
||||
</window>
|
|
@ -0,0 +1,39 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical" style="border: 2px solid green"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<script>
|
||||
function start()
|
||||
{
|
||||
var row = document.getElementById("row");
|
||||
var text = document.createElement("text");
|
||||
text.setAttribute("value", "foo");
|
||||
row.appendChild(text);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<hbox>
|
||||
<grid style="border: 2px solid red;" id="grid">
|
||||
<columns>
|
||||
</columns>
|
||||
|
||||
<rows>
|
||||
<row id="row">
|
||||
<button label="value"/>
|
||||
</row>
|
||||
</rows>
|
||||
</grid>
|
||||
<spacer flex="1" style="background-color: white"/>
|
||||
</hbox>
|
||||
|
||||
<button label="insert" oncommand="start()"/>
|
||||
|
||||
</window>
|
|
@ -0,0 +1,79 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
<?xml-stylesheet href="gridsample.css" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical" style="border: 2px solid green"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<script>
|
||||
function flip(child)
|
||||
{
|
||||
var jump = child.getAttribute("jumpy");
|
||||
if (jump != "true")
|
||||
child.setAttribute("jumpy","true");
|
||||
else
|
||||
child.setAttribute("jumpy","false");
|
||||
}
|
||||
|
||||
</script>
|
||||
<hbox>
|
||||
<grid style="border: 2px solid yellow;">
|
||||
<columns>
|
||||
</columns>
|
||||
|
||||
<rows>
|
||||
<row>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
<button label="button" class="jumpy"/>
|
||||
</row>
|
||||
|
||||
</rows>
|
||||
</grid>
|
||||
<spacer style="border: 2px solid white;" flex="1"/>
|
||||
</hbox>
|
||||
<spacer style="border: 2px solid white;" flex="1"/>
|
||||
|
||||
</window>
|
|
@ -0,0 +1,45 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox flex="1">
|
||||
<grid style="border: 2px solid red" flex="1">
|
||||
|
||||
<columns>
|
||||
<column flex="1"/>
|
||||
<column flex="1"/>
|
||||
<column flex="1"/>
|
||||
</columns>
|
||||
|
||||
<rows>
|
||||
<row>
|
||||
<text value="out1"/>
|
||||
<text value="out2"/>
|
||||
<text value="out3"/>
|
||||
</row>
|
||||
|
||||
<rows flex="1" style="border: 10px inset yellow; font-size: 20pt">
|
||||
<row>
|
||||
<text value="in1"/>
|
||||
<text value="in2"/>
|
||||
<text value="in3"/>
|
||||
</row>
|
||||
<row>
|
||||
<text value="in4"/>
|
||||
<text value="in5"/>
|
||||
<text value="in5"/>
|
||||
</row>
|
||||
</rows>
|
||||
|
||||
</rows>
|
||||
|
||||
</grid>
|
||||
</hbox>
|
||||
</window>
|
|
@ -0,0 +1,38 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical" style="border: 2px solid green"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox>
|
||||
<grid style="border: 2px solid red;">
|
||||
<columns>
|
||||
<column/>
|
||||
<column/>
|
||||
</columns>
|
||||
|
||||
<rows>
|
||||
<row style="font-size: 40px">
|
||||
<text value="foo1"/>
|
||||
<text value="foo2"/>
|
||||
</row>
|
||||
<box width="50" style="border:5px inset grey">
|
||||
<text value="hello there. This spans"/>
|
||||
</box>
|
||||
<row style="font-size: 40px" >
|
||||
<text value="foo1"/>
|
||||
<text value="foo2"/>
|
||||
</row>
|
||||
|
||||
</rows>
|
||||
</grid>
|
||||
<spacer flex="1" style="background-color: white"/>
|
||||
</hbox>
|
||||
|
||||
|
||||
</window>
|
|
@ -0,0 +1,77 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox flex="1">
|
||||
<grid style="border: 2px solid red" flex="1">
|
||||
|
||||
<rows>
|
||||
<row flex="1"/>
|
||||
<row flex="1"/>
|
||||
<row flex="1"/>
|
||||
</rows>
|
||||
<columns>
|
||||
|
||||
<column>
|
||||
<button label="left"/>
|
||||
<button label="left"/>
|
||||
<button label="left"/>
|
||||
</column>
|
||||
|
||||
<columns flex="1" style="min-width: 1px; overflow: auto; background-color: green">
|
||||
<column>
|
||||
<button label="cell1"/>
|
||||
<button label="cell1"/>
|
||||
<button label="cell1"/>
|
||||
</column>
|
||||
<column>
|
||||
<button label="cell2"/>
|
||||
<button label="cell2"/>
|
||||
<button label="cell2"/>
|
||||
</column>
|
||||
<column>
|
||||
<button label="cell3"/>
|
||||
<button label="cell3"/>
|
||||
<button label="cell3"/>
|
||||
</column>
|
||||
<column>
|
||||
<button label="cell4"/>
|
||||
<button label="cell4"/>
|
||||
<button label="cell4"/>
|
||||
</column>
|
||||
<column>
|
||||
<button label="cell5"/>
|
||||
<button label="cell5"/>
|
||||
<button label="cell5"/>
|
||||
</column>
|
||||
<column>
|
||||
<button label="cell6"/>
|
||||
<button label="cell6"/>
|
||||
<button label="cell6"/>
|
||||
</column>
|
||||
<column>
|
||||
<button label="cell7"/>
|
||||
<button label="cell7"/>
|
||||
<button label="cell7"/>
|
||||
</column>
|
||||
</columns>
|
||||
<column>
|
||||
<button label="right"/>
|
||||
<button label="right"/>
|
||||
<button label="right"/>
|
||||
</column>
|
||||
|
||||
</columns>
|
||||
|
||||
</grid>
|
||||
<spacer width="100"/>
|
||||
</hbox>
|
||||
<spacer height="100"/>
|
||||
</window>
|
|
@ -0,0 +1,77 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox flex="1">
|
||||
<grid style="border: 2px solid red" flex="1">
|
||||
|
||||
<columns>
|
||||
<column flex="1"/>
|
||||
<column flex="1"/>
|
||||
<column flex="1"/>
|
||||
</columns>
|
||||
|
||||
<rows>
|
||||
<row>
|
||||
<button label="left"/>
|
||||
<button label="left"/>
|
||||
<button label="left"/>
|
||||
</row>
|
||||
|
||||
<rows flex="1" style="border: 10px inset gray; overflow: auto; background-color: green">
|
||||
<row>
|
||||
<button label="cell1"/>
|
||||
<button label="cell1"/>
|
||||
<button label="cell1"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="cell2"/>
|
||||
<button label="cell2"/>
|
||||
<button label="cell2"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="cell3"/>
|
||||
<button label="cell3"/>
|
||||
<button label="cell3"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="cell4"/>
|
||||
<button label="cell4"/>
|
||||
<button label="cell4"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="cell5"/>
|
||||
<button label="cell5"/>
|
||||
<button label="cell5"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="cell6"/>
|
||||
<button label="cell6"/>
|
||||
<button label="cell6"/>
|
||||
</row>
|
||||
<row>
|
||||
<button label="cell7"/>
|
||||
<button label="cell7"/>
|
||||
<button label="cell7"/>
|
||||
</row>
|
||||
</rows>
|
||||
<row>
|
||||
<button label="right"/>
|
||||
<button label="right"/>
|
||||
<button label="right"/>
|
||||
</row>
|
||||
|
||||
</rows>
|
||||
|
||||
</grid>
|
||||
<spacer width="100"/>
|
||||
</hbox>
|
||||
<spacer height="100"/>
|
||||
</window>
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
|
||||
<window orient="vertical" style="border: 2px solid green"
|
||||
xmlns:html="http://www.w3.org/TR/REC-html40"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox>
|
||||
<grid style="border: 2px solid red;">
|
||||
<columns>
|
||||
<column style="min-width: 1px"/>
|
||||
<splitter/>
|
||||
<column style="min-width: 1px"/>
|
||||
</columns>
|
||||
|
||||
<rows>
|
||||
<row>
|
||||
<text style="font-size: 40px" value="foo1"/>
|
||||
<text style="font-size: 40px" value="foo2"/>
|
||||
</row>
|
||||
<label value="this is some text. This is longer"/>
|
||||
<row>
|
||||
<text style="font-size: 40px" value="foo1"/>
|
||||
<text style="font-size: 40px" value="foo2"/>
|
||||
</row>
|
||||
|
||||
</rows>
|
||||
</grid>
|
||||
<spacer flex="1" style="background-color: white"/>
|
||||
</hbox>
|
||||
|
||||
|
||||
</window>
|
Загрузка…
Ссылка в новой задаче