FirefoxOS эмулятор и JSFiddle дает другой результат

У меня есть следующий код: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 эмулятор. Но я получаю другой результат. Это результат я получаю на эмуляторе:

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

На JSFiddle, то значок удаления появляется, как это должно быть. Но на эмуляторе кнопка удаления появляется под сворачиваемыми заголовками. Даже когда я открываю «index.html» в обычном браузере, im получает тот же результат, что и в эмуляторе.

Как исправить это?

Спасибо!

источник

2014-01-14 Anindit Karmakar

Попробуйте эти 2 вещи:

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 еще подменяют класс, попробуйте добавить элементы DOM в pageinit, а затем установить й e CSS в страницах.

источник

2014-01-14 14:48:35 ezanker

FirefoxOS эмулятор и JSFiddle дает другой результат

ответ

Смежные вопросы