如何使Xpages中的部分看起來像這樣

我很困惑。在oneUI 3 documentation page有一個很好的部分。它看起來像這樣：如何使Xpages中的部分看起來像這樣

我創建一個新的數據庫並設置主題3.0.2，把下面的代碼，它看起來一點也不像我試圖生產。

如何使用OneUI文檔重現我在那裏看到的內容？

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
    xmlns:xe="http://www.ibm.com/xsp/coreex"> 
    <xp:section id="section1" header="Header" 
     headerStyle="lotusSectionHeader2"> 
    </xp:section> 
</xp:view>

好點。它看起來像這樣：

來源

2015-10-13 Bryan Schmiedeler

如果粘貼從文檔中的代碼工作的呢？如果這樣做，那麼你需要將標準的html元素移動到xpage元素。

<!-- section is an HTML5 element. Use div if you are using HTML4. --> 
<section class="lotusSection2"> 
<!-- header is an HTML5 element. Use div if you are using HTML4. --> 
<header class="lotusSectionHeader"><div class="lotusInner"><a class="lotusArrow" role="button" aria-expanded="true" aria-controls="sectionBodyID" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="Collapse section" /><span class="lotusAltText">&#x25bc;</span></a><h2 class="lotusHeading"><a href="javascript:;">Section Header</a></h2><a class="lotusIcon lotusActionIcon" href="javascript:;" role="button" aria-haspopup="true" aria-owns="[menuID]"><img src="../../css/images/blank.gif" alt="" /><span class="lotusAltText">Actions</span></a></div></header> 
<div id="sectionBodyID" class="lotusSectionBody"> 
<div class="lotusChunk">Data goes here....</div> 
    <header class="lotusSubheader"><a class="lotusArrow" role="button" aria-expanded="true" aria-controls="subsectionID" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="Collapse section" /><span class="lotusAltText">&#x25bc;</span></a><h3 class="lotusHeading2"><a href="javascript:;">Subsection</a></h3></header> 
    <div id="subsectionID" class="lotusSubsection"> 
More data goes here.... 
</div> 
</div></section><!--end section-->

來源

2015-10-13 19:56:09

我試過了，它不起作用。 –

將代碼粘貼到源代碼中然後查看該頁面時，它的外觀如何。由於我們正在談論前端，圖片將有所幫助。 –

請注意，XPages Extension Library中的「Widget Container」控件（xe：widgetContainer）大致等同於OneUI Section控件。您可以在Extension Library Demo App中看到：XPagesExt.nsf/OneUI_WidgetContainer.xsp 使用該控件而不是xp：section控件設計頁面可能更合適。

另外，在鏈接到頁面右側的25％的OneUI 3文檔中，有一個主題下拉列表，您可以在其中選擇「默認」或「gen2」。你所要求的行爲看起來像「gen2」行爲（看起來像OneUI 2），而你的屏幕截圖更接近「默認」（OneUI 3）行爲。您可能想要調查如何啓用gen2外觀。

來源

2015-10-27 16:08:43

由於勒梅爾指出，控件容器控件是你想要使用什麼下面的代碼：

<xe:widgetContainer id="widgetContainer1" 
    titleBarText="Section Header" collapsible="true" 
    style="width: 300px;"> 
    <xe:this.dropDownNodes> 
     <xe:basicLeafNode label="test1"></xe:basicLeafNode> 
     <xe:basicLeafNode label="test2"></xe:basicLeafNode> 
     <xe:basicLeafNode label="test3"></xe:basicLeafNode> 
    </xe:this.dropDownNodes> 
    More data here... 
</xe:widgetContainer>

但她指出，外觀&感覺你貼是針對第二代主題，ISN」在XPage中實現。所以你得到的是：

來源

2015-11-04 10:10:13

如何使Xpages中的部分看起來像這樣

回答

相關問題