jquerymobile之collapsible可折疊塊標題內容動態顯示

jquery mobile提供了一種可折疊的組件--data-role="collapsible"，這種組件可以通過點擊折疊塊頭部來展開/折疊塊內的內容，詳細組件說明可參考w3cshool可折疊塊。

 

在做一個小項目的時候，我有一個模塊用到了可折疊塊這個組件：初始頁面時collapsible的標題是空的，只有用戶在collapsible下面的文本框輸入內容后，標題會跟文本框內容同步。

 

如下圖所示，初始界面時，collapsible標題為空，只有在“險種”文本框中輸入內容，collapsible標題才會產生變化。

 

對應的HTML代碼如下：

 

<div data-role="collapsible" id="collapsible">
            <h3 class="h3">&nbsp</h3>
            <div class="ui-field-contain" data-controltype="textinput">
            <label for="insurance_name">
                險種
            </label>
            <input name="insurance_name" value="" type="text">
            </div>

        <div class="ui-field-contain" data-controltype="textinput">
            <label for="insurance_company">
                投保公司
            </label>
            <input name="insurance_company" value="" type="text">
        </div>
        <div class="ui-field-contain" data-controltype="dateinput">
            <label for="insurance_date">
                投保日期
            </label>
            <input name="insurance_date" value="" type="date">
        </div>
        <div class="ui-field-contain" data-controltype="textinput">
            <label for="insurance_year">
                年期
            </label>
            <input name="year_period" value="" type="text">
        </div>
        <div class="ui-field-contain" data-controltype="textinput">
            <label for="insurance_cost">
                年保費
            </label>
            <input name="year_cost" value="" type="text">
        </div>
        <div class="ui-field-contain" data-controltype="textarea">
            <label for="insurance_comment">
                備注
            </label>
            <textarea name="insurance_comment"  placeholder=""></textarea>
        </div>

            </div>


        </div>

 

 

要想監聽“險種”文本框值變化，就需要用到input和propertychange這兩個事件，這兩個事件是監聽內容變化的。

 

dom.bind('input propertychange', function() {
//do something
});

 

 

只要綁定好這兩個內容變化事件，然后在事件體里面編寫collapsible標題賦值代碼即可搞定問題。

 

collapsible標題對應前面HTML代碼中的"<h3></h3>"元素，但是通過$("h3").html(dom.val())這種形式給它賦值是錯誤的，這樣會導致collapsible樣式亂套。因為jquerymobile在上面html基礎上動態創建了別的節點元素和樣式，最終才會有這樣折疊的效果。

 

可以通過瀏覽器查看最終的頁面元素，你就會發現它與原本的HTML有很大的變化。

 上圖<span class="ui-btn-text"></span>才是現實標題內容的節點。

 

所以要想給collapsible標題賦值，就需要找到class為ui-btn-text的節點。

dom.parents("#collapsible").find(".h3").find(".ui-btn-text").html(dom.val());

 

完整的javascript代碼應該這樣來寫：

$(document).on("pageinit", "#insurer_list_page", function() {
   var dom = $("#collapsible-set").find("input[name='insurance_name']");
    dom.bind('input propertychange', function() {
        var value = dom.val();
        if($.isNull(value)){
            //輸入內容為空，則以空格填充
            value = " ";
        }
        dom.parents("#collapsible").find(".h3").find(".ui-btn-text").html(value);
    });
});