XForms/內聯重複
< XForms
大多數計算機顯示器寬度大於高度。因此，為了利用這一點，您有時希望表單資料向右增長，而不是向下。要做到這一點，您必須新增 CSS 指令以對重複項內的元素使用“內聯”顯示。
CSS 有兩個“顯示”選項
display:block垂直新增新元素，使左邊緣對齊。display:inline是水平放置，其中新的 divs 向右新增，就像新文字被新增到輸入欄位一樣。
新元素被新增到當前行。預設情況下，XForms 使用塊重複。但這可以透過兩個樣式表命令輕鬆更改。
在 FireFox 中，修改重複項屬性的類是 .xf-repeat-item。其他 XForms 播放器可能使用不同的 CSS 元素。
/* Makes the repeated items get added to the right. */
.xf-repeat-item {display:inline;}
/* We MUST put this in to limit the width of the repeated item */
.xf-repeat-item .xf-value {width: 70px;}
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events" >
<head>
<title>Inline Repeat</title>
<link rel="stylesheet" type="text/css" href="local.css" />
<xf:model>
<xf:instance xmlns="" id="grid">
<data>
<cell-label>Cell Label 1</cell-label>
<cell-label>A really long label here</cell-label>
<cell-label>Short</cell-label>
<cell-label>Last</cell-label>
</data>
</xf:instance>
</xf:model>
</head>
<body>
<h1>Inline Repeat</h1>
<xf:repeat nodeset="cell-label">
<div class="cell">
<xf:output ref="." />
</div>
</xf:repeat>
</body>
</html>
/* CSS file for inline repeat */
@namespace xf url("http://www.w3.org/2002/xforms");
body {
font-family: Helvetica, sans-serif;
}
.cell {
display:inline;
height: 30px;
padding: 8px; margin: 4px;
border: 2px solid blue;
background-color: lightblue;
/* the following only works under FireFox */
-moz-border-radius: 1em;
}
xf|output {
text-align: center;
vertical-align: middle;
font-weight: bold;
}
.xf-repeat-item {
display:inline;
}
在上面的示例中，我們注意到每個單元格的寬度由標籤的大小決定。每個單元格可以有不同的標籤。請注意，我們使用 div 為每個單元格建立一個包裝器。單元格包裝器和 .xf-fepeat-item 必須都設定為 display:inline。
您可以巢狀重複組以建立單元格網格。只需使外層重複具有類屬性以調整行高。
<html
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Repeat</title>
<link rel="stylesheet" type="text/css" href="inline-repeat.css" />
<xf:model>
<xf:instance xmlns="" id="grid">
<data>
<row>
<cell-label>Row 1</cell-label>
<cell-label>A really long label here</cell-label>
<cell-label>Short</cell-label>
<cell-label>Last</cell-label>
</row>
<row>
<cell-label>The first cell is the second row has a long label</cell-label>
<cell-label>Row 2 Cell 2</cell-label>
<cell-label>Short</cell-label>
<cell-label>Last Cell</cell-label>
</row>
<row>
<cell-label>Row 3</cell-label>
<cell-label>A really long label here</cell-label>
<cell-label>Short</cell-label>
<cell-label>Last</cell-label>
</row>
<row>
<cell-label>Cell 1</cell-label>
<cell-label>Row 4</cell-label>
<cell-label>Short</cell-label>
<cell-label>The Last Cell of the Last Row</cell-label>
</row>
</data>
</xf:instance>
</xf:model>
</head>
<body>
<h1>Inline Repeat</h1>
<xf:repeat nodeset="row" class="row">
<xf:repeat nodeset="cell-label">
<div class="cell">
<xf:output ref="." />
</div>
</xf:repeat>
</xf:repeat>
</body>
</html>
以下 CSS 將需要用於在每一行上顯示一行。
.row {
display:block;
line-height: 50px;
}
以下示例顯示瞭如何在內層重複之前和之後放置文字。
<html xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XForms Scoreboard</title>
<link rel="stylesheet" type="text/css" href="scoreboard.css" />
<xf:model>
<xf:instance xmlns="" id="grid">
<data>
<row>
<team-name>Tigers</team-name>
<score>1</score>
<score>2</score>
<score>3</score>
<score>4</score>
<score>2</score>
<score>3</score>
<total/>
</row>
<row>
<team-name>Dolphins</team-name>
<score>3</score>
<score>2</score>
<score>1</score>
<score>3</score>
<score>2</score>
<score>1</score>
<total/>
</row>
<row>
<team-name>Bears</team-name>
<score>2</score>
<score>2</score>
<score>2</score>
<score>2</score>
<score>2</score>
<score>2</score>
<total/>
</row>
<row>
<team-name>Cubs</team-name>
<score>1</score>
<score>3</score>
<score>2</score>
<score>1</score>
<score>3</score>
<score>2</score>
<total/>
</row>
</data>
</xf:instance>
<xf:bind nodeset="row/total" calculate="sum(../score)"/>
</xf:model>
</head>
<body>
<h1>XForms Scoreboard</h1>
<xf:repeat nodeset="row" class="row">
<xf:output ref="team-name" class="team-name"/>
<xf:repeat nodeset="score">
<xf:output ref="." class="score"/>
</xf:repeat>
<xf:output ref="total" class="total"/>
<br/>
</xf:repeat>
</body>
</html>
/* CSS file for a scoreboard */
@namespace xf url("http://www.w3.org/2002/xforms");
body {
font-family: Helvetica, sans-serif;
}
.row {
line-height: 45px;
}
/* make everything in a row in a line */
.row * {
display:inline;
}
xf|output {
text-align: center;
vertical-align: middle;
font-weight: bold;
height: 30px;
padding: 6px; margin: 4px;
border: 2px solid black;
color: white;
/* the following only works under FireFox */
-moz-border-radius: .2em;
}
.team-name{background-color: blue;}
.total {background-color: green;}
.score {background-color: black;}
使用 CSS 使表對齊。
以下是一個示例
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema" >
<head>
<title>compact repeat testcase</title>
<style>
@namespace xf url("http://www.w3.org/2002/xforms");
xf|repeat {
display: inline;
}
xf|repeat div {
display: inline;
}
xf|repeat.outer > .xf-repeat-item {
display: table-row;
height: 50px;
padding: 2px; margin 2px;
}
xf|repeat.outer > div > .xf-repeat-item > xf|output > .xf-value {
display: table-cell;
width: 200px;
text-align: center;
padding: 2px; margin 2px;
}
xf|repeat.inner .xf-repeat-item {
display: table-cell;
width: 50px;
background-color: lightblue;
text-align: center;
}
.name {
background-color: pink;
text-align: center;
width: 70px;
height: 35px;
}
.final {
background-color: yellow;
text-align: center;
width: 70px;
}
</style>
<xforms:model>
<xforms:instance id="instdata" xmlns="">
<scores>
<team>
<name>New York Giants</name>
<quarter>3</quarter>
<quarter>0</quarter>
<quarter>0</quarter>
<quarter>14</quarter>
</team>
<team>
<name>New England Patriots</name>
<quarter>0</quarter>
<quarter>7</quarter>
<quarter>0</quarter>
<quarter>7</quarter>
</team>
</scores>
</xforms:instance>
</xforms:model>
</head>
<body>
<h2>Should show a line of data like a NFL box score</h2>
<h3>Uses repeat element</h3>
<br/>
<xforms:repeat class="outer" nodeset="team">
<xforms:output ref="name" class="name"/>
<xforms:repeat class="inner" nodeset="quarter" appearance="compact">
<xforms:output value="."/>
</xforms:repeat>
<xforms:output value="sum(quarter)" class="final"/>
</xforms:repeat>
</body>
</html>