2014-04-15 69 views
4

我想使用新的html5模板標籤來製作一個半通用的窗體,可以放在多個使用情況下,而不使用太多的JavaScript。添加內容標籤到模板內的輸入字段

下面是一個小提琴顯示我有什麼http://jsfiddle.net/684uH/

我的目標是什麼會通常會在<content>標籤

一個假設的例子來獲得發現的佔位符文本,以取代「名稱」我的觀點翻過將是:

<div id = "hoster"> 
    <span class = "inputPlaceholder">Special Name</span> 
</div> 

<template id = "im-a-template"> 
    <input type="text" placeholder = <content select = ".inputPlaceholder"></content>> 
</template> 

有沒有辦法做類似的東西或者是使用JavaScript手動設置的唯一途徑?

回答

-1

在客戶端上使用XSLT來做到這一點:

<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet type="text/xsl" href="html5.xhtml"?> 
<xsl:stylesheet version="1.0" 
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml" 
      > 
<xsl:output method="xml" encoding="utf-8" version="" indent="yes" standalone="no" media-type="text/html" omit-xml-declaration="no" doctype-system="about:legacy-compat" /> 

<!-- Run default templates on the xsl-stylesheet element above--> 
<xsl:template match="xsl:stylesheet"> 
    <xsl:apply-templates/> 
</xsl:template> 

<!-- Run this template on the root node --> 
<xsl:template match="/"> 
    <html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    </head> 
    <body> 
     <div id="hoster"> 
     <span class="inputPlaceholder">Special Name</span> 
     </div> 

     <!-- Reuse the value of the node with the inputPlaceholder class --> 
     <template id="im-a-template"> 
     <input type="text" placeholder="{//node()[@class='inputPlaceholder']}"/> 
     </template> 
    </body> 
    </html> 
</xsl:template> 

</xsl:stylesheet> 

使用以下步驟:

  • 另存爲html5.xhtml(或更改<?xml-stylesheet href爲您選擇的名稱)
  • 開放在瀏覽器中
  • 添加腳本標記以運行您選擇的<template>填充物

參考