2012-02-06 14 views
1

我使用的jquery評級明星插件和一切工作正常,當我靜態,但是當我創建一個動態列表視圖,我把「選項」輸入控件在裏面,它從不應用樣式。風格沒有得到應用在動態創建的評級星級插件jquerymobile

在我已經加載的樣式表:

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" id="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no"/> 
    <link rel="stylesheet" href="js/rating/jquery.rating.css" /> 
    <link rel="stylesheet" href="css/themes/etensr.theme.css" /> 
    <script src="jquery.1.7.1.min.js" type="text/javascript"></script>  
    <script type="text/javascript" src="js/rating/jquery.rating.js"></script> 
    <script type="text/javascript" src="jquery.mobile.1.0.min.js"></script>  
</head> 

和頁面:

<div data-role="page" id="subcategories" data-theme="a"> 
    <div class="header" data-role="header" style="height: 42px;" > 
     <a data-rel="back" data-role="button" data-theme="c">Back</a> 
     <a href="order.html" data-role="button" data-theme="c" data-icon="gear" data-iconpos="right" class="ui-btn-right">0.00 SRD - </a>         
    </div>   
    <div data-role="content" id="subcategoryCnt"> 
     <ul id="subcategoryList" data-role="listview" data-theme="a" data-dividertheme="c" > 
     <li data-icon="arrow-r" > 
      <img src="images/thumb80x80.jpg" /> 
      <div> 
       <div style="float:left;"><p>Product</p></div> 
       <div style="float:right;font-size: 12px;">Price</div>  
       <div style="clear:both;"></div> 
       <div style="float:left;"> 
       <input name="star1" type="radio" data-role="none" class="star" disabled="disabled" /> 
       <input name="star1" type="radio" data-role="none" class="star" disabled="disabled" /> 
       <input name="star1" type="radio" data-role="none" class="star" disabled="disabled" checked="checked"/> 
       </div> 
      </div>   
     </li>  
     </ul>      
    </div> 
</div> 

所有這一切都顯示正常,但是當我動態加載列表視圖項目的輸入無線電不會呈現像星星,但正常的單選按鈕:

<div data-role="page" id="subcategories" data-theme="a"> 
    <div class="header" data-role="header" style="height: 42px;" > 
     <a data-rel="back" data-role="button" data-theme="c">Back</a> 
     <a href="order.html" data-role="button" data-theme="c" data-icon="gear" data-iconpos="right" class="ui-btn-right">0.00 SRD - </a>         
    </div>   
    <div data-role="content" id="subcategoryCnt"> 
     <script type="text/javascript"> 
      GetSubcategories(); 
     </script>          
    </div> 
</div> 

和JS是:

function GetSubcategories() { 
    subcategories = result.GetSubcategoriesResult; 
    if (subcategories.length > 0) { 
     var html = '<ul id="subcategoryList" data-role="listview" data-theme="a" data-dividertheme="c" >'; 
     for (i = 0; i < subcategories.length; i++) { 
      html = html + '<li data-role="list-divider">' + subcategories[i].Name + '</li>'; 
      prods = subcategories[i].Products; 
      if (prods.length > 0) { 
       for (j = 0; j < prods.length; j++) { 
        html = html + 
         '<li data-icon="arrow-r" >' + 
         '<a href="products.html" rel="external">' + 
          '<img src="images/thumb80x80.jpg" />' + 
          '<div>' + 
           '<div style="float:left;"><p>' + prods[j].Name + '</p></div>' + 
           '<div style="float:right;font-size: 12px;">' + prods[j].Price + ' SRD</div>' + 
           '<div style="clear:both;"></div>' + 
           '<div style="float:left;">' + 
            '<input name="star' + prods[j].Id + '" type="radio" data-role="none" class="star" disabled="disabled" />' + 
            '<input name="star' + prods[j].Id + '" type="radio" data-role="none" class="star" disabled="disabled" />' + 
            '<input name="star' + prods[j].Id + '" type="radio" data-role="none" class="star" disabled="disabled" checked="checked"/>' + 
           '</div>' + 
          '</div>' + 
         '</a>' + 
         '</li>'; 
       } 
      } 
     } 
      html += '</ul>'; 
    } 
    $('#subcategoryCnt').html(html); 
    $('#subcategoryList').listview();  
} 

當我這樣做,但動態一切都顯示正確,除了輸入收音機不像星星顯示。

我在做什麼錯了? 感謝

回答

1

什麼data-icon="star"

此外,我覺得你還是需要刷新JQM

JS

$('#mylist').listview('refresh'); 
+0

謝謝Phill,但它不能解決我的問題。我仍然不知道爲什麼樣式,除了jquerymobile樣式,當我動態地創建控件時沒有被應用。 – YOBB 2012-02-06 20:50:43

+0

更新了我的答案 – 2012-02-06 21:40:56

0

嘗試使用實況查詢,因爲當你做$(選擇).rating(); ,該插件將應用於DOM中存在的選擇器定義的元素。當您動態添加它們時,您也需要將插件應用於它們。這是livequery可以幫助你的地方。這樣做

$(選擇).livequery(函數(){
$(本).rating(); //或添加ü希望的選項
});