Làm cách nào để hiển thị trang bài đăng Đối tượng giao diện người dùng jQuery Mobile

Question

Tôi có một số HTML mà tôi đang tạo bằng JS ở phía máy khách. Tôi vẫn muốn áp dụng phong cách và chức năng của jQuery Mobile UI cho các đối tượng đó. Tôi dường như không thể tìm ra cách dù ...

Nói rằng tôi tạo ra một:

<div data-role="fieldcontain"> 
    <label for="select-choice-1" class="select">Choose shipping method:</label> 
    <select name="select-choice-1" id="select-choice-1"> 
     <option value="standard">Standard: 7 day</option> 
     <option value="rush">Rush: 3 days</option> 
     <option value="express">Express: next day</option> 
     <option value="overnight">Overnight</option> 
    </select> 
</div> 

Và muốn làm cho nó qua jQuery Mobile UI bên trong một trang ... làm thế nào người ta sẽ làm điều đó?

Tôi biết với tiêu chuẩn jQuery UI tôi chỉ phải thực hiện một cuộc gọi dọc theo dòng:

$("#select-choice-1").buttonset(); 

Có một cái gì đó như thế này cho jQuery Mobile UI?

Answer 1

CẬP NHẬT!

Vâng! Việc triển khai mới với sự kiện vừa hạ cánh!

http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

Bây giờ trong beta2 sẽ có một sự kiện create đã làm hiển thị trên một phần tử sẽ gây dựng hình của nó.

Tôi sẽ cập nhật faq khi tàu beta2.

Tìm phần tử trên cùng bạn thêm vào DOM và gọi .page() trên đó. Câu hỏi này trên thực tế sao chép rất nhiều câu hỏi khác được gắn thẻ jquery-mobile, do đó tôi đã tạo một hướng dẫn bắn không mô tả lại lần nữa.

Xem bài viết đầu tiên ở đây: http://jquerymobiledictionary.dyndns.org/faq.html

Answer 2

Nếu kêu gọi pagecreate

$('#page').live('pagecreate',function(event){ 
    $('#elem_container').page(); 
}); 

bạn đi cho một chuyến đi vòng lặp đệ quy. Tôi đã viết hàm tăng cường() của riêng tôi để giải quyết vấn đề này.

$('#page').live('pagecreate',function(event){ 
    enhance($('#elem_container')); 
}); 

Chức năng này về cơ bản chỉ là ngưng tụ vào mã bên dưới ...

function enhance(dis){ 
    dis.find("[type='radio'], [type='checkbox']").checkboxradio(); 
    dis.find("button, [type='button'], [type='submit'], [type='reset'], [type='image']").not(".ui-nojs").button(); 
    dis.find("input, textarea").not("[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']").textinput(); 
    dis.find("input, select").filter("[data-role='slider'], [data-type='range']").slider(); 
    dis.find("select:not([data-role='slider'])").selectmenu(); 
} 

Cũ hơn:

Sau khi đào bới xung quanh tập tin di động jQuery Cuối cùng tôi figured it out ... khá dễ dàng thực sự ...

$("#select-choice-3").selectmenu(); 

Và đây là đoạn mã mà tôi đã đào tạo trong ...

_enchanceControls: function() { 
    var o = this.options; 
    // degrade inputs to avoid poorly implemented native functionality 
    this.element.find("input").each(function() { 
     var type = this.getAttribute("type"); 
     if (o.degradeInputs[ type ]) { 
      $(this).replaceWith(
       $("<div>").html($(this).clone()).html() 
        .replace(/type="([a-zA-Z]+)"/, "data-type='$1'")); 
     } 
    }); 

    // enchance form controls 
    this.element 
     .find("[type='radio'], [type='checkbox']") 
     .checkboxradio(); 

    this.element 
     .find("button, [type='button'], [type='submit'], [type='reset'], [type='image']") 
     .not(".ui-nojs") 
     .button(); 

    this.element 
     .find("input, textarea") 
     .not("[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']") 
     .textinput(); 

    this.element 
     .find("input, select") 
     .filter("[data-role='slider'], [data-type='range']") 
     .slider(); 

    this.element 
     .find("select:not([data-role='slider'])") 
     .selectmenu(); 
}