如何將引導程序圖標添加到XPage按鈕或鏈接核心控件？

我一直在嘗試爲我的XPages應用程序採用Twitter Bootstrap。到目前爲止，我主要嘗試使用CSS。如何將引導程序圖標添加到XPage按鈕或鏈接核心控件？

一個我很喜歡的東西來裝飾按鈕簡單的方法（即添加圖標按鈕），使用的語法如下：

<button class="btn" type="button"><i class="icon-ok"></i> Approve</button>

裝修使用的內部標籤添加<button>標記。這就是問題所在。使用按鈕核心控件時，標籤需要進入value屬性。那當然不起作用。

我可以通過修改CSS來解決這個問題，但那不是我想追求的課程。

解決方法是在按鈕控件呈現後「注入」標記。我還沒有與服務器端腳本的成功，但我設法與道場做到這一點，就像這樣：

<xp:button id="button1" styleClass="btn" value="Approve"> 
</xp:button> 

<script type="text/javascript"> 
    var decorate = function() { 
    e = dojo.query("[id$='button1']")[0]; 
    e.innerHTML = '<i class="icon-ok"></i> Aprove'; 
    }  

    dojo.addOnLoad(decorate); 
</script>

有沒有什麼更好的方法來做到這一點？是否有替代dojo.addOnLoad？這可以通過SSJS來實現嗎？

來源

2013-04-26 Sasa Brkic

您無法通過服務器端腳本做到這一點。所有酷的東西都添加到客戶端，所以你唯一的解決方案是操縱dom。 – alkis 2013-04-26 21:48:33

@alkis：><)))'> – 2013-04-27 13:19:29

您可以添加按鈕內您的直通標籤：

<xp:button styleClass="btn" value="BUTTON"> 
    <i class="icon-ok"></i> 
</xp:button>

生成的HTML看起來像這樣：

<button class="btn" type="button" name="view:_id1:_id2"><i class="icon-ok"></i>BUTTON</button>

編輯：

如果您想使用其他HTML元素並添加內容裏面，一個XP：面板可以幫助：

<xp:panel styleClass="btn" tagName="a"> 
    <i class="icon-ok"></i> 
    ...OTHER INTERESTING THINGS INSIDE... 
</xp:panel>

這是生成的HTML代碼：

<a class="btn"> 
    <i class="icon-ok"></i>...OTHER INTERESTING THINGS INSIDE...</a>

來源

2013-04-27 13:30:41

太好了，謝謝！我不知道我可以在標籤內嵌入純html標籤。而不是直接使用''標籤，我可以執行以下操作'：'。現在我可以通過編程來改變樣式類，這意味着我可以改變按鈕的外觀而不會出現問題。再次感謝！ – 2013-04-27 15:19:58

+0

@SasaBrkic：你總是可以嵌套組件（一個html標籤無非是一個傳遞組件）。但是渲染可能導致不同的HTML代碼。如果您嵌套兩個xp：文本組件，則渲染的元素將不會嵌套。 – 2013-04-27 15:44:07

+0

我寫了一篇[博客文章（http://blog.squareone.ba/2013/05/xpages-twitter-bootstrap-and-button.html）來說明這一技術。還有一個演示應用程序，您可以在[看到它在行動（http://web1.cs-computing.com/apps/demo/bootstrap/bootstrap_demo.nsf/buttons.xsp）。 – 2013-05-04 10:59:28

0

您確實需要使用按鈕？如果你想，這裏是一個選擇，嘗試使用錨這樣<a href='#' class='btn'> Approve </a>

來源

2013-04-27 02:42:06

+0

我確實傾向於使用''作爲按鈕樣式。當我處理靜態值時，這兩種方法都可以正常工作。但是，只要我需要計算一些東西，無論是類，價值，目標，還是要附加事件，我都必須使用XPages核心控制。然後，我也遇到同樣的問題 - 如何在鏈接或按鈕核心控件的標籤中注入''標籤。最優雅的解決方案是如果標籤屬性可以設置爲HTML，就像它可以爲計算字段完成一樣。然後，我們可以使用服務器端計算輕鬆注入HTML。 – 2013-04-27 06:44:04

如何將引導程序圖標添加到XPage按鈕或鏈接核心控件？

回答

相關問題