2015-09-08 23 views
1

嗨我正在嘗試使用Bootstrap顯示內聯複選框。 我使用XML和XSL來呈現html。我在我的XSL中使用class> col-sm-6,並且我只能在每列中顯示一個複選框,但每個列中至少要顯示4個複選框。複選框內聯使用引導,XML和XSL

有沒有人對我有一些解決方案。

<?xml version="1.0" encoding="iso-8859-1" ?> 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"  version="1.0"> 
<xsl:template match="Application"> 
<xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;</xsl:text> 
<head> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"></link> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"></link> 
<link rel="stylesheet" href="css/applicationnew.css"></link> 

<script type="text/javascript" language="javascript" src="applications/scripts/jquery-2.1.4.js"></script> 
<script type="text/javascript" language="javascript" src="applications/scripts/common.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> 

<script type="text/javascript" language="javascript" src="applications/scripts/*id*.js"></script> 
</head> 

<form method="post" class="form-horizontal" role="form" action="saveApplication.aspx"> 
<div class="container"> 

<xsl:for-each select="Chapter"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"><h3 class="panel-title"><xsl:value-of select="Name"/></h3></div> 
      <div class="panel-body"> 

      <xsl:for-each select="Line"> 
      <div class="form-group"> 
      <xsl:variable name="propertycount" select="count(Property)" /> 
       <xsl:for-each select="Property"> 
       <div> 
       <xsl:choose> 
       <xsl:when test="$propertycount=1"><xsl:attribute name="class">col-sm-12</xsl:attribute></xsl:when> 
       <xsl:otherwise><xsl:attribute name="class">col-sm-6  </xsl:attribute></xsl:otherwise> 
       </xsl:choose> 
       <xsl:choose> 
        <xsl:when test="Type='CheckInLine'"> 
         <input type="checkbox" class="checkbox-inline">&#160; 
         <xsl:attribute name="name"> 
          <xsl:value-of select="../../Name" /> 
          </xsl:attribute> 
          <xsl:attribute name="heiti"> 
          <xsl:value-of select="Label" /> 
          </xsl:attribute> 

          <xsl:attribute name="value"> 
          <xsl:value-of select="Value" /> 
          </xsl:attribute> 
          &#160;<xsl:value-of select="Value" /> 
         </input> 
        </xsl:when> 
        <xsl:otherwise> 
        The type is wrong <xsl:value-of select="Type" /> 
        </xsl:otherwise> 
       </xsl:choose> 
       </div> 
       </xsl:for-each> 
      </div>     
      </xsl:for-each> 
      </div> 
     </div> 
    </xsl:for-each> 

</div> 
</form> 
</xsl:template> 
</xsl:stylesheet> 

XML文檔

<?xml version="1.0" encoding="iso-8859-1" ?> 
<Application> 
<Id>0900</Id> 
<Title>Application</Title> 

    <Chapter> 
<Name>Reason</Name> 
<Description></Description> 
<Line> 
    <Property> 
    <Name>UnEmployee</Name> 
    <Label></Label> 
    <Required></Required> 
    <Type>Check</Type> 
    <Value>Box1</Value> 
    <Class></Class> 
    <Placeholder></Placeholder> 
    </Property> 
    <Property> 
    <Name></Name> 
    <Label></Label> 
    <Required></Required> 
    <Type>CheckInLine</Type> 
    <Value>Box2</Value> 
    <Class></Class> 
    <Placeholder></Placeholder> 
    </Property> 
    <Property> 
    <Name></Name> 
    <Label></Label> 
    <Required></Required> 
    <Type>CheckInLine</Type> 
    <Value>Box3</Value> 
    <Class></Class> 
    <Placeholder></Placeholder> 
    </Property> 
    </Line> 
<Line> 
    <Property> 
    <Name>CantWork</Name> 
    <Label></Label> 
    <Required></Required> 
    <Type>Check</Type> 
    <Value>Box4:</Value> 
    <Class></Class> 
    <Placeholder></Placeholder> 
    </Property> 
    <Property> 
    <Name></Name> 
    <Label></Label> 
    <Required></Required> 
    <Type>Label</Type> 
    <Value></Value> 
    <Class></Class> 
    <Placeholder></Placeholder> 
    </Property> 
</Line> 

</Chapter> 

</Application> 
+0

這是一個HTML/CSS的問題,你想知道什麼產出將實現你描述的視覺效果?或者這是一個xslt問題,你知道所需的html/css輸出,並且你需要一個樣式表來完成它?如果是前者,請重新標記。如果是後者,請提供您期望的輸出html/css。 –

+0

或者它可能是一個引導問題?一般來說,你需要知道如何顯示每列4個複選框嗎?或與引導CSS? –

+0

這是一個xslt問題,我需要一個樣式表來完成它。 – user1732558

回答

0

這XSLT 1.0樣式...

<xsl:stylesheet 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    version="1.0" > 
<xsl:output method="html" indent="yes" encoding="utf-8" /> 
<xsl:strip-space elements="*" />  

<xsl:template match="/"> 
    <html> 
    <head> 
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css" /> 
     <script src="http://code.jquery.com/jquery.min.js" /> 
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" /> 
     <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" language="javascript" src="application.js" /> 
    </head> 

    <body> 
     <div class="container"> 
     <div class="col-sm-6"> 
     <xsl:apply-templates select="Application/Chapter" /> 
     </div> 
    </div> 
    </body> 
</html> 
</xsl:template> 

<xsl:template match="Chapter"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"><h3 class="panel-title">Boxes:</h3></div> 
    <div class="panel-body"> 
     <div class="form-inline"> 
     <xsl:apply-templates select="Line/Property" /> 
     </div> 
    </div> 
    </div> 
</xsl:template> 

<xsl:template match="Property" /> 

<xsl:template match="Property[Type='CheckInLine']"> 
    <div class="checkbox-inline"> 
    <input type="checkbox" /> 
    <label><xsl:value-of select="Value" /></label> 
    </div> 
</xsl:template> 

</xsl:stylesheet> 

...無線會變換此輸入文檔...

<Application> 
<Id>0900</Id> 
<Title>Application</Title> 

    <Chapter> 
<Name>Reason</Name> 
<Description></Description> 
<Line> 
    <Property> 
    <Name>UnEmployee</Name> 
    <Label></Label> 
    <Required></Required> 
    <Type>Check</Type> 
    <Value>Box1</Value> 
    <Class></Class> 
    <Placeholder></Placeholder> 
    </Property> 
    <Property> 
    <Name></Name> 
    <Label></Label> 
    <Required></Required> 
    <Type>CheckInLine</Type> 
    <Value>Box2</Value> 
    <Class></Class> 
    <Placeholder></Placeholder> 
    </Property> 
    <Property> 
    <Name></Name> 
    <Label></Label> 
    <Required></Required> 
    <Type>CheckInLine</Type> 
    <Value>Box3</Value> 
    <Class></Class> 
    <Placeholder></Placeholder> 
    </Property> 
    </Line> 
<Line> 
    <Property> 
    <Name>CantWork</Name> 
    <Label></Label> 
    <Required></Required> 
    <Type>Check</Type> 
    <Value>Box4:</Value> 
    <Class></Class> 
    <Placeholder></Placeholder> 
    </Property> 
    <Property> 
    <Name></Name> 
    <Label></Label> 
    <Required></Required> 
    <Type>Label</Type> 
    <Value></Value> 
    <Class></Class> 
    <Placeholder></Placeholder> 
    </Property> 
</Line> 

</Chapter> 

</Application> 

...這個輸出HTML文檔...

<html> 
    <head> 
    <META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script><link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" language="javascript" src="application.js"></script> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="col-sm-6"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
      <h3 class="panel-title">Boxes:</h3> 
      </div> 
      <div class="panel-body"> 
      <div class="form-inline"> 
       <div class="checkbox-inline"><input type="checkbox"><label>Box2</label></div> 
       <div class="checkbox-inline"><input type="checkbox"><label>Box3</label></div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>