1. 首頁
  2. 問答
  3. 使Bootstrap開關自定義控制工作

使Bootstrap開關自定義控制工作

2017-03-08 16 views
0

[已更新 - 已解決]使Bootstrap開關自定義控制工作

事實證明，這不是AMD問題。問題是我使用的Bootstrap-Switch代碼的版本不正確。我切換到3.3.4，一切正常。謝謝你，霍華德。

[更新 - 我添加的代碼我使用克服了AMD問題]

看到這篇文章的結尾。

我想讓Howard Greenberg's Bootstrap Switch Custom Control工作。

我相信我完全按照說明操作。我碰到的唯一問題是在他的自定義控制屬性中沒有switchBinding，我認爲這是必要的，所以我添加了一個。

我沒有收到任何錯誤，但是我看到的只是一個帶有計算字段的空白頁面[「Bryan」]。

我在做什麼錯？

XPAGE

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view 
    xmlns:xp="http://www.ibm.com/xsp/core" 
    xmlns:xc="http://www.ibm.com/xsp/custom"> 
    <xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.sampleValue = "Bryan"}]]></xp:this.beforePageLoad> 
    <xc:cc_CommonFieldCheckBox3 
    refreshId="computedField1" 
    checkedValue="checked" 
    uncheckedValue="not checked" 
    offLabel="OFF" 
    onLabel="ON" 
    labelText="Label" 
    dataSize="normal" 
    offColor="success" 
    onColor="warning" 
    handleWidth="auto" 
    labelWidth="auto" 
    inverse="false" 
    switchBinding="viewScope.sampleValue"> 
    </xc:cc_CommonFieldCheckBox3> 
    <xp:br></xp:br> 
    <xp:br></xp:br> 
    <xp:text 
    escape="true" 
    id="computedField1" value="#{viewScope.sampleValue}"> 
    </xp:text> 
    </xp:view>

自定義控件

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 

    <xp:this.resources> 
    <xp:styleSheet 
     href="/bootstrap-switch/css/bootstrap-switch.min.css"></xp:styleSheet> 
    <xp:script 
     src="/bootstrap-switch/js/bootstrap-switch.min.js" 
     clientSide="true"> 
    </xp:script> 
    </xp:this.resources> 


    <xp:panel 
    id="checkBoxPanel"> 
    <xp:eventHandler 
     event="onClientLoad" 
     submit="false"> 
     <xp:this.script><![CDATA[x$("#{id:checkBox1}").bootstrapSwitch(); 

var refreshId = "#{javascript: (compositeData.refreshId!=null) ? getClientId(compositeData.refreshId):''}"; 

if (refreshId != null || refreshId != "") { 
    // set the partial refresh if the user put an id in the cc property 
    x$("#{id:checkBox1}") 
      .on(
        'switchChange.bootstrapSwitch', 
        function(event, state) { 
         XSP 
           .partialRefreshPost("#{javascript: (compositeData.refreshId!=null) ? getClientId(compositeData.refreshId):''}"); 
        }); 
} 

function x$(idTag, param) { // Updated 18 Feb 2012 
    idTag = idTag.replace(/:/gi, "\\:") + (param ? param : ""); 
    return ($("#" + idTag)); 
}]]></xp:this.script> 
    </xp:eventHandler> 
    <xp:checkBox 
     id="checkBox1" 
     checkedValue="${javascript:return compositeData.checkedValue;}" 
     uncheckedValue="${javascript:return compositeData.uncheckedValue;}" 
     defaultChecked="false"> 
     <xp:this.value><![CDATA[${javascript:"#{"+compositeData.switchBinding+"}"}]]></xp:this.value> 
     <xp:this.attrs> 
     <xp:attr 
      name="data-on-text" 
      value="${javascript:return compositeData.onLabel;}"> 
     </xp:attr> 
     <xp:attr 
      name="data-off-text" 
      value="${javascript:return compositeData.offLabel;}"> 
     </xp:attr> 
     <xp:attr 
      name="data-label-text" 
      value="${javascript:return compositeData.labelText;}"> 
     </xp:attr> 
     <xp:attr 
      name="data-size" 
      value="${javascript:return compositeData.dataSize;}"> 
     </xp:attr> 
     <xp:attr 
      name="data-on-Color" 
      value="${javascript:return compositeData.onColor;}"> 
     </xp:attr> 
     <xp:attr 
      name="data-off-Color" 
      value="${javascript:return compositeData.offColor;}"> 
     </xp:attr> 
     <xp:attr 
      name="data-handle-width" 
      value="${javascript:return compositeData.handleWidth;}"> 
     </xp:attr> 
     <xp:attr 
      name="data-label-width" 
      value="${javascript:return compositeData.labelWidth;}"> 
     </xp:attr> 
     <xp:attr 
      name="data-inverse" 
      value="${javascript:return compositeData.inverse;}"> 
     </xp:attr> 
     </xp:this.attrs> 
    </xp:checkBox> 
    </xp:panel> 
</xp:view>

定製控件屬性

<?xml version="1.0" encoding="UTF-8"?> 
<faces-config> 
    <faces-config-extension> 
    <namespace-uri>http://www.ibm.com/xsp/custom</namespace-uri> 
    <default-prefix>xc</default-prefix> 
    </faces-config-extension> 
    <composite-component> 
    <component-type>cc_CommonFieldCheckBox3</component-type> 
    <composite-name>cc_CommonFieldCheckBox3</composite-name> 
    <composite-file>/cc_CommonFieldCheckBox3.xsp</composite-file> 
    <composite-extension> 
     <designer-extension> 
     <in-palette>true</in-palette> 
     <render-markup>&lt;?xml version="1.0" encoding="UTF-8"?&gt;&#xd; 
&lt;xp:view&#xd; 
    xmlns:xp="http://www.ibm.com/xsp/core"&gt;&#xd; 
    &lt;B&gt;Bootstrap Switch Custom Control&lt;/B&gt;&lt;/xp:view&gt;</render-markup> 
     <category>Custom Controls - Fields</category> 
     </designer-extension> 
    </composite-extension> 
    <property> 
     <property-name>refreshId</property-name> 
     <property-class>string</property-class> 
     <display-name>refreshId</display-name> 
     <description>If you supply a control Id than that control will be partially refreshed upon change. If this is empty than no refresh happens.</description> 
     <property-extension> 
     <required>false</required> 
     </property-extension> 
    </property> 
    <property> 
     <property-name>checkedValue</property-name> 
     <property-class>string</property-class> 
     <display-name>checkedValue</display-name> 
     <property-extension> 
     <required>true</required> 
     </property-extension> 
    </property> 
    <property> 
     <property-name>uncheckedValue</property-name> 
     <property-class>string</property-class> 
     <display-name>uncheckedValue</display-name> 
     <property-extension> 
     <required>true</required> 
     </property-extension> 
    </property> 
    <property> 
     <property-name>onLabel</property-name> 
     <property-class>string</property-class> 
     <display-name>onLabel</display-name> 
     <property-extension> 
     <required>true</required> 
     <designer-extension> 
      <default-value>ON</default-value> 
     </designer-extension> 
     </property-extension> 
    </property> 
    <property> 
     <property-name>offLabel</property-name> 
     <property-class>string</property-class> 
     <display-name>offLabel</display-name> 
     <property-extension> 
     <required>true</required> 
     <designer-extension> 
      <default-value>OFF</default-value> 
     </designer-extension> 
     </property-extension> 
    </property> 
    <property> 
     <property-name>labelText</property-name> 
     <property-class>string</property-class> 
     <display-name>labelText</display-name> 
     <property-extension> 
     <required>true</required> 
     <designer-extension> 
      <default-value>Label</default-value> 
     </designer-extension> 
     </property-extension> 
    </property> 
    <property> 
     <property-name>dataSize</property-name> 
     <property-class>string</property-class> 
     <display-name>dataSize</display-name> 
     <property-extension> 
     <designer-extension> 
      <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor> 
      <editor-parameter>mini&#xd; 
small&#xd; 
normal&#xd; 
large</editor-parameter> 
      <default-value>normal</default-value> 
     </designer-extension> 
     </property-extension> 
     <description>Size of the switch</description> 
    </property> 
    <property> 
     <property-name>onColor</property-name> 
     <property-class>string</property-class> 
     <display-name>onColor</display-name> 
     <property-extension> 
     <designer-extension> 
      <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor> 
      <editor-parameter>primary&#xd; 
info&#xd; 
success&#xd; 
warning&#xd; 
danger&#xd; 
default</editor-parameter> 
      <default-value>primary</default-value> 
     </designer-extension> 
     </property-extension> 
     <description>Color of left side of switch</description> 
    </property> 
    <property> 
     <property-name>offColor</property-name> 
     <property-class>string</property-class> 
     <display-name>offColor</display-name> 
     <property-extension> 
     <designer-extension> 
      <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor> 
      <editor-parameter>primary&#xd; 
info&#xd; 
success&#xd; 
warning&#xd; 
danger&#xd; 
default</editor-parameter> 
      <default-value>default</default-value> 
     </designer-extension> 
     </property-extension> 
     <description>Color of right side of switch</description> 
    </property> 
    <property> 
     <property-name>labelWidth</property-name> 
     <property-class>string</property-class> 
     <display-name>labelWidth</display-name> 
     <property-extension> 
     <designer-extension> 
      <default-value>auto</default-value> 
     </designer-extension> 
     </property-extension> 
     <description>Width of the center handle in pixels, default is auto</description> 
    </property> 
    <property> 
     <property-name>handleWidth</property-name> 
     <property-class>string</property-class> 
     <display-name>handleWidth</display-name> 
     <property-extension> 
     <designer-extension> 
      <default-value>auto</default-value> 
     </designer-extension> 
     </property-extension> 
     <description>Width of the left and right sides in pixels, default is auto</description> 
    </property> 
    <property> 
     <property-name>inverse</property-name> 
     <property-class>string</property-class> 
     <display-name>inverse</display-name> 
     <description>Inverse switch direction</description> 
     <property-extension> 
     <designer-extension> 
      <default-value>false</default-value> 
      <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor> 
      <editor-parameter>true&#xd; 
false</editor-parameter> 
     </designer-extension> 
     </property-extension> 
    </property> 
    <description/> 
    <property> 
     <property-name>switchBinding</property-name> 
     <property-class>string</property-class> 
    </property> 
    </composite-component> 
</faces-config> 


<xp:this.resources> 
    <xp:styleSheet 
     href="/bootstrap-switch/css/bootstrap-switch.min.css"></xp:styleSheet> 
    </xp:this.resources>

來源

2017-03-08 Bryan Schmiedeler

+0

我認爲這是一個AMD裝載機問題，因爲引導交換機使用AMD –

+0

每，我添加的代碼從此片段（https://openntf.org/XSnippets.nsf/snippet.xsp?id=hack- to-use-jquery-amd-widgets-and-dojo-together）並添加到正在使用的js庫中，沒有任何改變。我會將代碼發佈到我原來的問題。 –

+0

嘗試使用簡單的方法編輯bootstrap-switch lib，並用false替換AMD部分。 –

回答

1

這似乎是在從OpenNTF片段屬性缺少一個名爲switchBinding特性（它是一個字符串）。確保將其添加到自定義控件屬性定義中。

<property> 
    <property-name>switchBinding</property-name> 
    <property-class>string</property-class> 
    <display-name>switchBinding</display-name> 
</property>

如果你沒有包含這個，你會在Designer中得到一個錯誤。

此外，一定要檢查您的瀏覽器控制檯，看看是否有任何錯誤（像它找不到的CSS或JS文件）。

請注意，上面提到的AMD問題不是這個因素。

讓我知道你是否仍然有問題。如果需要，我可以發送給你整個工作數據庫。

霍華德

來源

2017-03-13 15:54:31 Howard

+0

我已更新OpenNTF片段以添加缺少的屬性。 – Howard

+0

我再次嘗試，修復了您提到的問題，但我看到的只是一個裸體按鈕。如果你不介意我會讚賞你的數據庫的副本。 –

相關問題

 相關問題