Cách tạo trang html động bằng jquery

Trên đây chỉ là một ví dụ đơn giản. Có thể có nhiều thẻ HTML phức tạp hơn có thể được thêm vào theo cách tương tự

jQuery Mobile cho phép các trang được kéo vào DOM một cách linh hoạt thông qua hành vi chiếm quyền điều khiển nhấp chuột mặc định của nó hoặc thông qua các lệnh gọi thủ công tới

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Đối với các ứng dụng cần tạo đánh dấu trang ở phía máy khách, điều quan trọng là phải biết về các thông báo được kích hoạt trong cuộc gọi

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Một cuộc gọi đến

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

• 
    	
  Select a Category Below:
    	
  
      	
  Animals
      	
  Colors
      	
  Vehicles
      
  
  

  7
  • Đã tắt trước khi tải hoặc chuyển đổi bất kỳ trang nào
  • GHI CHÚ. Sự kiện này trước đây được gọi là "trang trao đổi trước"

• 
    	
  Select a Category Below:
    	
  
      	
  Animals
      	
  Colors
      	
  Vehicles
      
  
  

  8
  • Bị tắt sau khi tải và chuyển đổi tất cả các trang
  • GHI CHÚ. sự kiện này trước đây được gọi là "trang thay đổi"

• 
    	
  Select a Category Below:
    	
  
      	
  Animals
      	
  Colors
      	
  Vehicles
      
  
  

  0
  • Bị tắt nếu xảy ra lỗi trong khi cố gắng tải động một trang mới

Các thông báo này được kích hoạt trên phần tử vùng chứa chính (

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Đối với các ứng dụng muốn thêm trang hoặc sửa đổi triệt để nội dung của trang hiện có, dựa trên một số dữ liệu không phải HTML, chẳng hạn như JSON hoặc đối tượng JS trong bộ nhớ, sự kiện

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Để minh họa kỹ thuật này, hãy xem mẫu làm việc này. Trong mẫu này, trang chính bắt đầu với một danh sách các danh mục mà người dùng có thể điều hướng vào. Các mục thực tế trong mỗi danh mục được lưu trữ trong một đối tượng JavaScript trong bộ nhớ, nhằm mục đích minh họa, nhưng dữ liệu thực sự có thể đến từ bất kỳ đâu

var categoryData = {
	animals: {
		name: "Animals",
		description: "All your favorites from aardvarks to zebras.",
		items: [
			{
				name: "Pets"
			},
			{
				name: "Farm Animals"
			},
			{
				name: "Wild Animals"
			}
		]
	},
	colors: {
		name: "Colors",
		description: "Fresh colors from the magic rainbow.",
		items: [
			{
				name: "Blue"
			},
			{
				name: "Green"
			},
			{
				name: "Orange"
			},
			{
				name: "Purple"
			},
			{
				name: "Red"
			},
			{
				name: "Yellow"
			},
			{
				name: "Violet"
			}
		]
	},
	vehicles: {
		name: "Vehicles",
		description: "Everything from cars to planes.",
		items: [
			{
				name: "Cars"
			},
			{
				name: "Planes"
			},
			{
				name: "Construction"
			}
		]
	}
};

Ứng dụng sử dụng các liên kết có url chứa hàm băm cho ứng dụng biết mục danh mục nào sẽ hiển thị

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Trong nội bộ, khi người dùng nhấp vào một trong các liên kết này, ứng dụng sẽ chặn cuộc gọi

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Ứng dụng có thể tự chèn vào luồng

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {

	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {

		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage ),
			re = /^#category-item/;

		if ( u.hash.search(re) !== -1 ) {

			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});

Vậy tại sao phải nghe ở cấp độ tài liệu? . Chúng tôi cần liên kết của mình hoạt động trước khi khung jQuery Mobile khởi chạy và quyết định cách xử lý URL ban đầu đã gọi ứng dụng

Khi lệnh gọi lại cho liên kết

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

• 
  // Listen for any attempts to call changePage().
  $(document).bind( "pagebeforechange", function( e, data ) {
  
  	// We only want to handle changePage() calls where the caller is
  	// asking us to load a page by URL.
  	if ( typeof data.toPage === "string" ) {
  
  		// We are being asked to load a page by URL, but we only
  		// want to handle URLs that request the data for a specific
  		// category.
  		var u = $.mobile.path.parseUrl( data.toPage ),
  			re = /^#category-item/;
  
  		if ( u.hash.search(re) !== -1 ) {
  
  			// We're being asked to display the items for a specific category.
  			// Call our internal method that builds the content for the category
  			// on the fly based on our in-memory category data structure.
  			showCategory( u, data.options );
  
  			// Make sure to tell changePage() we've handled this call so it doesn't
  			// have to do anything.
  			e.preventDefault();
  		}
  	}
  });
  
  

  2
  • Có thể là đối tượng bộ sưu tập jQuery chứa trang sẽ được chuyển sang HOẶC tham chiếu URL cho trang sẽ được tải/chuyển sang

• 
  // Listen for any attempts to call changePage().
  $(document).bind( "pagebeforechange", function( e, data ) {
  
  	// We only want to handle changePage() calls where the caller is
  	// asking us to load a page by URL.
  	if ( typeof data.toPage === "string" ) {
  
  		// We are being asked to load a page by URL, but we only
  		// want to handle URLs that request the data for a specific
  		// category.
  		var u = $.mobile.path.parseUrl( data.toPage ),
  			re = /^#category-item/;
  
  		if ( u.hash.search(re) !== -1 ) {
  
  			// We're being asked to display the items for a specific category.
  			// Call our internal method that builds the content for the category
  			// on the fly based on our in-memory category data structure.
  			showCategory( u, data.options );
  
  			// Make sure to tell changePage() we've handled this call so it doesn't
  			// have to do anything.
  			e.preventDefault();
  		}
  	}
  });
  
  

  3
  • Đối tượng chứa các tùy chọn được chuyển bởi người gọi hàm

    
      	
    Select a Category Below:
      	
    
        	
    Animals
        	
    Colors
        	
    Vehicles
        
    
    

    4
  • Một danh sách các tùy chọn có thể được tìm thấy ở đây

Đối với ứng dụng mẫu của chúng tôi, chúng tôi chỉ quan tâm đến các cuộc gọi

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {

	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {

		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage ),
			re = /^#category-item/;

		if ( u.hash.search(re) !== -1 ) {

			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {

	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {

		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage ),
			re = /^#category-item/;

		if ( u.hash.search(re) !== -1 ) {

			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Gọi

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Nếu

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {

	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {

		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage ),
			re = /^#category-item/;

		if ( u.hash.search(re) !== -1 ) {

			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Vì vậy, bây giờ chúng ta đã biết cách chặn cuộc gọi

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {

	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {

		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage ),
			re = /^#category-item/;

		if ( u.hash.search(re) !== -1 ) {

			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Trong ứng dụng mẫu của chúng tôi, hàm băm của URL mà chúng tôi xử lý có 2 phần

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Phần đầu tiên, trước dấu '?' . Điều đầu tiên mà

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {

	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {

		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage ),
			re = /^#category-item/;

		if ( u.hash.search(re) !== -1 ) {

			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});

Sau khi đưa đánh dấu vào, nó sẽ gọi các lệnh gọi tiện ích con jQuery Mobile thích hợp để nâng cao đánh dấu danh sách mà nó vừa đưa vào. Đây là thứ biến đánh dấu danh sách bình thường thành chế độ xem danh sách đầy đủ kiểu dáng với tất cả các hành vi của nó

Khi đã xong, nó sẽ gọi

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Bây giờ, một vấn đề thú vị ở đây là jQuery Mobile thường cập nhật hàm băm vị trí của trình duyệt với URL được liên kết với trang mà nó đang hiển thị. Bởi vì chúng tôi đang sử dụng lại cùng một trang cho mỗi danh mục, điều này sẽ không lý tưởng vì URL cho trang đó không có thông tin danh mục cụ thể nào được liên kết với nó. Để giải quyết vấn đề này,

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {

	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {

		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage ),
			re = /^#category-item/;

		if ( u.hash.search(re) !== -1 ) {

			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showCategory( u, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
	}
});

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

  	
Select a Category Below:
  	

    	
Animals
    	
Colors
    	
Vehicles
    

Đó là mẫu một cách ngắn gọn. Cần lưu ý rằng mẫu cụ thể này và cách sử dụng nó không phải là một ví dụ hay về một ứng dụng xuống cấp nhẹ nhàng khi tắt JavaScript. Điều đó có nghĩa là nó có thể sẽ không hoạt động tốt trên trình duyệt C-Grade. Chúng tôi sẽ đăng các ví dụ khác minh họa cách xuống cấp một cách duyên dáng trong tương lai. Kiểm tra trang này để cập nhật

Làm cách nào để tạo HTML động bằng jQuery?

Làm cách nào để hiển thị dữ liệu động trong HTML bằng jQuery?

Làm cách nào để tạo trang HTML bằng jQuery?

Làm cách nào để nối thêm HTML động trong jQuery?