Tạo trang ảo tự động sử dụng jQuery Mobile

Tôi cố gắng liên kết các trang ảo sử dụng jQuery Mobile, nhưng tôi có hai vấn đề:Tạo trang ảo tự động sử dụng jQuery Mobile

Lần đầu tiên khi tôi tải trang, CSS không được áp dụng.
Sau khi tôi chọn một trang và tôi muốn thay đổi sang một trang khác, tôi nhận thấy rằng mỗi khi tôi đi ngang qua trang 1.

Đây là example tôi.

Code:

  var nbrButton = 3; 
      $(document).ready(function(){ 
       for(i = 1;i <= nbrButton;i++) { 

        $("body").append('<div id="p'+i+'" data-role="page" class="pages"><div data-role="content">Page'+i+'</br><a data-role="button" rel="internal" href="#p1" data-inline="true">1</a><a data-role="button" rel="internal" href="#p2" data-inline="true">2</a><a data-role="button" rel="internal" href="#p3" data-inline="true">3</a></div></div>'); 

       } 
       $("#p1").show(); 

      });

Ông có thể cho tôi biết vấn đề là gì hoặc nếu có một cách tốt hơn để làm điều đó.

Cảm ơn bạn.

Nguồn

2013-03-21 Mils

Cập nhật

tôi cũng loại bỏ data-rel="internal" trong các liên kết.

trả lời

Tôi đã làm dưới đây.

thay vì

$('#p1').show();

tôi thêm này

$.mobile.changePage('#p1', { allowSamePageTransition: true });

Nó sẽ làm mới trang-1 p1 để tải lại phong cách.

Làm việc example.

Nguồn

2013-03-21 15:02:03 Omar

Tuyệt vời! nó vẫn là vấn đề thứ hai. Cảm ơn bạn. – Mils

Trang 1 sẽ không xuất hiện khi chuyển sang các trang khác. đây có phải là vấn đề thứ hai của bạn không? – Omar

kiểm tra liên kết trong câu trả lời cập nhật của tôi. http://jsfiddle.net/Palestinian/AS6s7/ – Omar

Bạn không thể tự động tạo trang jQuery Mobile mới (bạn có thể, nhưng trang đó sẽ không có kiểu) trừ khi bạn có ít nhất một trang hiện có. Có một cách giải quyết khác ở đây, bạn có thể tạo một trang jQuery trống và sử dụng nó để tạo một trang mới.

Dưới đây là một ví dụ làm việc:

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>   
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script> 
       $(document).on('pageshow', '#index', function(){  
        $('<div>').attr({'data-role':'page','id':'second'}).appendTo('body'); 
        $('<div>').attr({'data-role':'header','id':'second-header'}).append('<h3>Header Title</h3>').appendTo('#second'); 
        $.mobile.changePage("#second"); 
       });  
    </script> 
</head> 
<body> 
    <div data-role="page" id="index"> 

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

Bây giờ bạn nên sử dụng một sự kiện trang pageshow của một trang ẩn đầu tiên để tạo ra các trang động mới. Sau khi trang được cretaed chỉ cần sử dụng trang thay đổi để hiển thị một trang có thể nhìn thấy đầu tiên.

Nguồn

2013-03-21 14:52:02 Gajotres

Vấn đề là tôi không biết trước số trang .. Cảm ơn bạn. – Mils

Giải pháp thanh lịch :) – Omar

Tại sao đây là vấn đề trong trường hợp ví dụ của tôi? Chỉ cần sao chép mã của bạn bên trong ví dụ về pageshow. – Gajotres

-1

Để áp dụng phong cách CSS chỉ cần thêm $("#p1").trigger('create'); dòng như trước sau khi $("#p1").show();

Nguồn

2013-07-11 07:46:21 Motoo

Tạo trang ảo tự động sử dụng jQuery Mobile

Trả lời

Các vấn đề liên quan