jquery mobile - style icon-position not working collapsible set

這是沒有道理的，是真的。我試圖使用一個簡單的可摺疊設置，只是取消它的樣式，並改變鏈接上的顏色等。第一個任務 - 更改圖標，並將其向右而不是左側。我正在嘗試使用data-iconpos="right"，與我使用的方式相同，但似乎不起作用。沒有一個規定的jQuery數據函數似乎可以工作，比如主題變化，而不是a，b或c。我在這裏錯過了什麼？根據文檔，這應該是非常容易的！jquery mobile - style icon-position not working collapsible set

現場查看：https://www.ubat.com/mobile/test.html

頁面代碼：（！阿爾法）

<!DOCTYPE html> 
<html> 
<head> 
<title>My Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="css/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> 
<script src="css/jquery-1.5.min.js" type="text/javascript"></script> 

<script src="css/jquery.mobile-1.0a3.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="//use.typekit.net/kxv5fxv.js"></script> 
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
    <h1>My Title</h1> 
    </div> 
    <!-- /header --> 

    <div data-role="content"> 
    <p>Hello world</p> 

    <div data-role="collapsible-set"> 
     <div data-role="collapsible" data-collapsed="true" data-iconpos="right"> 
     <h3>Section 1</h3> 
     <p>I'm the collapsible set content for section 1.</p> 
     </div> 
     <div data-role="collapsible" data-collapsed="true"> 
     <h3>Section 2</h3> 
     <p>I'm the collapsible set content for section 2.</p> 
     </div> 
    </div> 


    </div> 
    <!-- /content --> 

</div> 
<!-- /page --> 

</body> 
</html>

來源

2012-10-10 harp

'數據iconpos = 「右」'工作正常，我在jQuery Mobile的1.1.1（[小提琴]（http://jsfiddle.net/m2VBb/））。也許升級？ –

您使用的是非常過時jQuery Mobile的版本。最近的一次是1.2.0和可摺疊套自定義圖標位置沒有來，直到版本1.1.0

請同時升級，jQuery和jQuery Mobile的版本爲您的代碼工作。

來源

2012-10-10 18:05:47

omg我甚至沒有注意到。謝謝！ {}咄 – harp

東西我經常遇到與jQuery Mobile的是，很多更多的類和元素被添加到在運行時的DOM，所以你的CSS樣式需要採取新的結構考慮。我並不是建議使用它們的數據屬性來解決問題的「jQuery方式」，但是當您碰到想要更改的內容時，如果沒有內置選項，這將對您有所幫助。

下面只是兩個可摺疊部分之一。我試圖將其空間用於可讀性（這仍然是一團糟）。

<div data-role="collapsible-set" class="ui-collapsible-set"> 
    <div data-role="collapsible" data-collapsed="true" data-iconpos="right" class="ui-collapsible-contain"> 

    <h3 class="ui-collapsible-heading"> 
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-corner-top ui-btn-down-c ui-btn-up-c" data-theme="c"> 

     <span class="ui-btn-inner ui-corner-top"> 
     <span class="ui-btn-text">Section 1 
      <span class="ui-collapsible-heading-status"> click to collapse contents</span> 
     </span> 

     <span data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-left ui-btn-corner-all ui-shadow"> 
      <span class="ui-btn-inner ui-btn-corner-all ui-corner-top"> 
      <span class="ui-btn-text"></span><span class="ui-icon ui-icon-shadow ui-icon-minus"></span> 
      </span> 
     </span> 
     </span> 
    </a> 
    </h3> 
    <div class="ui-collapsible-content" aria-hidden="false"> 
    <p>I'm the collapsible set content for section 1.</p> 
    </div> 
</div> 
</div>

，你可以在按鈕圖標向右移動的一種方法是做到這一點的CSS：

.ui-collapsible-heading a span.ui-btn{ 
    left: inherit; 
    right: 6px; /* Previously left was 6px */ 
    }

我找過這類問題，最好的工作方式是破解打開您的瀏覽器中的檢查員並查看jQuery Mobile創建的最終結構。

來源

2012-10-10 18:22:48 Jeffington

jquery mobile - style icon-position not working collapsible set

回答

相關問題