跳转到内容

XForms/内联重复

Add links
来自维基教科书，开放的书籍，开放的世界

动机

[编辑 | 编辑源代码]

大多数计算机显示器宽度大于高度。因此，为了利用这一点，您有时希望表单数据向右增长，而不是向下。要做到这一点，您必须添加 CSS 指令以对重复项内的元素使用“内联”显示。

方法

[编辑 | 编辑源代码]

CSS 有两个“显示”选项

  1. display:block 垂直添加新元素，使左边缘对齐。
  2. 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;}

屏幕图像

[编辑 | 编辑源代码]
XForms 内联重复

可执行的 XForms 应用程序

[编辑 | 编辑源代码]

加载 XForms 应用程序

源代码

[编辑 | 编辑源代码]
<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 文件 local.css

[编辑 | 编辑源代码]
/* 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。

添加二维嵌套

[编辑 | 编辑源代码]

您可以嵌套重复组以创建单元格网格。只需使外层重复具有类属性以调整行高。

XForms 2D 内联重复

源代码

[编辑 | 编辑源代码]
<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

[编辑 | 编辑源代码]

以下 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

[编辑 | 编辑源代码]
/* 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 显示表

[编辑 | 编辑源代码]

使用 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>


讨论

[编辑 | 编辑源代码]
下一页: 插入 | 上一页: 重复过滤器
主页: XForms
检索自 "https://wikibooks.cn/w/index.php?title=XForms/Inline_Repeats&oldid=3677743"
华夏公益教科书