FirefoxOS模擬器和給予的jsfiddle不同的結果

HTML：

<body> 
<!-- ..................... Page 1 - HOME ..................... --> 
<!-- ......................................................... --> 
    <div data-role="page" id="home"> 
    <div data-role="header" data-position="fixed"> 
     <h3>My Test App</h3> 
    </div> 

    <div data-role="content"> 
     <div class="container-wrapper"> 

     <!-- 
    ..................FOR TESTING ONLY.................. 
     <div class="container"> 
      <div data-role="collapsible" id="coll1">    
      <a href="#" class="btn-delete ui-btn ui-icon-delete ui-corner-all ui-btn-icon-notext" id="delColl1">Delete</a> 
      <h3>Item 1</h3> 
      <p>This is item 1</p> 
      </div> 
     </div> 
    .................................................. 
     --> 

     </div> 
    </div> 
    </div> 
</body>

CSS：

.btn-delete{ 
    position:absolute; 
    top:0; 
    right:2px; 
    display:block !important; 
    z-index:10000; 
} 

.ui-collapsible { 
    position: relative; 
}

的Javascript：

$(document).ready(function() { 
    var $containerWrapper = $('.container-wrapper'); 

/*..............FOR TESTING................... 
    //var $btnDelItem1 = $('#delColl1').detach(); 
    //$('#coll1').append($btnDelItem1); 
..............................................*/ 

    for(var i=1; i<=5; i++) { 
     var $containerDiv = $('<div>', {'class':'container'}) 
     var $divCol = $('<div>', {'data-role':'collapsible', 'id':'coll'+i}); 
     var $btnDel = $('<a>', {'href':'#', 'class':'btn-delete ui-btn ui-icon-delete ui-corner-all ui-btn-icon-notext', 'id':'btnDel'+i}); 
     var $colHead = $('<h3>', {'text':'Item '+i}); 
     var $colContent = $('<p>', {'text':'This is item '+i}); 


     $containerDiv.append($divCol); 
     $divCol.append($colHead); 
     $divCol.append($colContent); 
     $containerWrapper.append($containerDiv); 
     $containerWrapper.trigger('create');  
     $divCol.append($btnDel); 
    } 
    });

我使用相同的代碼運行在firefoxOS模擬器的Web應用程序。但是我得到了不同的結果。這是結果我得到在模擬器上我：

http://imagizer.imageshack.us/v2/800x600q90/208/mzv6.jpg

上的jsfiddle，刪除圖標顯示爲它應該。但在模擬器上，刪除按鈕出現在可摺疊標題下方。即使當我在普通瀏覽器中打開'index.html'時，即時獲得與模擬器中相同的結果。

我該如何解決這個問題？

謝謝！

來源

2014-01-14 Anindit Karmakar

嘗試以下兩兩件事：

1把btn-delete類的列表，而不是先在類的列表的末尾，看看它是否有什麼差別。

2不用類，只需使用jQuery來設置CSS。附加創建的DOM元素後，運行此：

$btnDel.css({"position": "absolute", "top": "0", "right": "2px", "zIndex": "10000"});

這裏是你的更新FIDDLE

此外，而不是jQuery的的document.ready，使用JQM初始化事件等中的一種：

$(document).on("pageinit", function() {...

如果jQM仍在覆蓋您的類，請嘗試追加pageinit中的DOM元素，然後設置th在pageshow中使用CSS。

來源

2014-01-14 14:48:35 ezanker

FirefoxOS模擬器和給予的jsfiddle不同的結果

回答

相關問題