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不同的结果

回答

相关问题