Thiết kế ứng dụng di động / Điều hướng tòa nhà Dev với jQuery

Điện thoại thông minh hiện được trang bị một số trình duyệt web rất hiệu quả. JavaScript mạnh hơn bao giờ hết và có thể được mở rộng với sự trợ giúp của các thư viện mã như jQuery. Khi bạn thêm các thông số kỹ thuật HTML5 / CSS3 mới nhất, có thể xây dựng các ứng dụng web di động rất linh hoạt với một số mã lối vào cơ bản.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách xây dựng một trang web / ứng dụng web dựa trên thiết bị di động. Chúng tôi sẽ sử dụng truy vấn phương tiện CSS3 để nhắm mục tiêu các thiết bị cụ thể và độ phân giải màn hình. Cộng với một chút jQuery giúp tạo hiệu ứng cho menu và tải nội dung trang bên ngoài bằng các lệnh gọi Ajax. Thậm chí tốt hơn, bố cục thậm chí có thể mở rộng để hiển thị đúng trong các trình duyệt máy tính để bàn thông thường như Chrome hoặc Firefox.

• Bản thử trực tiếp
• Mã nguồn

Xác định cấu trúc trang

Trước tiên, hãy bắt đầu bằng cách truy cập trang HTML và định kiểu trang đó bằng một số quy tắc CSS. Tôi sẽ bỏ qua hầu hết các thẻ meta bất thường trong tiêu đề vì chúng không ảnh hưởng trực tiếp đến ứng dụng web. Tuy nhiên, có một vài điều tôi nên đề cập, cụ thể là từ đoạn trích dưới đây:

Tương thích X-UA được sử dụng để mô tả cách tài liệu của bạn sẽ hiển thị trong một số trình duyệt nhất định. Đó là một kịch bản thú vị khi mã hóa trong HTML5, vì vậy tôi sẽ không lo lắng quá nhiều về điều này. Tuy nhiên, meta khung nhìn thẻ rất quan trọng. Nó đặt cửa sổ trình duyệt di động thành 100% thay vì hiệu ứng thu phóng tiêu chuẩn.

Cũng có thể vô hiệu hóa thu phóng người dùng với giá trị nội dung người dùng có thể mở rộng = không. Nhưng trong trường hợp này, chúng tôi chỉ muốn đặt chiều rộng toàn màn hình giống với chiều rộng thiết bị của chúng tôi. Các thẻ ứng dụng web của Apple sẽ cho phép trang web được lưu dưới dạng biểu tượng màn hình chính vào iPhone hoặc iPod Touch của bạn. Không hoàn toàn cần thiết nhưng chắc chắn có giá trị.

Nội dung cơ thể

Bên trong thẻ body Tôi đã thiết lập div trình bao bọc với ID #w. Bên trong tôi đã chia bố cục thành hai div khác bằng ID #pagebody và #navmenu. Toàn bộ chiều rộng của trang được giới hạn ở 640px theo lựa chọn để bố cục tỷ lệ thành một số nghiêm ngặt.

 
  
Điện thoại di động HK
 
 
 
Chào mừng đến với trang web di động!
 
 
 
 
 
Liên kết menu
 
 
 
Nhà
 
Về chúng tôi
 
Quảng cáo
 
Viết cho chúng tôi
 
Liên hệ
 
Chính sách bảo mật
 
 
 

Menu điều hướng được cung cấp một giá trị chỉ mục z thấp hơn để #pagebody luôn luôn đứng đầu. Điều này rất quan trọng vì mã JavaScript sẽ trượt trên thân trang một số pixel nhất định để hiển thị điều hướng bên dưới.

Tôi đã sử dụng biểu tượng băm (#) trước mỗi trang .html để ngăn chặn một số hành vi kém trong Mobile Safari. Bất cứ khi nào bạn nhấp vào một liên kết, thanh URL sẽ xuất hiện và đẩy nội dung xuống. Nhưng khi tham chiếu ID, không có gì được tải lại ngoại trừ thông qua các cuộc gọi JavaScript.

Định vị CSS

Không có nhiều nội dung khó hiểu trong mã CSS của chúng tôi. Hầu hết các định vị được thực hiện thủ công và sau đó thao tác thông qua jQuery. Nhưng có một vài điều thú vị trong tài liệu của chúng tôi.

/ ** @group cơ thể cốt lõi ** / #w #pagebody vị trí: tương đối; trái: 0; chiều rộng tối đa: 640px; chiều rộng tối thiểu: 320px; chỉ số z: 99999;  #w #navmenu nền: # 475566; chiều cao: 100%; hiển thị: khối; vị trí: cố định; chiều rộng: 300px; trái: 0px; đầu trang: 0px; chỉ số z: 0; 

Phân đoạn hàng đầu này xác định kiểu cho cả hai phần của trang. Menu điều hướng của chúng tôi chỉ rộng 300px, vì vậy điều này để lại một chút chỗ cho nội dung trang vẫn được nhìn thấy. Nút menu mở / đóng cũng được đặt trực tiếp ở phía bên trái và luôn có thể truy cập được. Phần quan trọng ở đây là giá trị thuộc tính z-index và sử dụng vị trí: cố định; trên Navmenu của chúng tôi.

Tiêu đề thanh công cụ trên cùng cũng là một phần thú vị. Điều này được đặt ở một vị trí cố định để nó sẽ cuộn với nội dung trang. Điều này tái tạo hiệu ứng tương tự như bạn tìm thấy trong bất kỳ thanh tiêu đề ứng dụng iOS nào.

/ ** tiêu đề @group ** / #w #pagebody tiêu đề # toolbarnav display: block; vị trí: cố định; trái: 0px; đầu trang: 0px; chỉ số z: 9999; nền: # 0b1851 url ('img / tabbar-solid-bg.png') trên cùng bên trái không lặp lại; bán kính đường viền: 5px; -moz-viền-bán kính: 5px; -webkit-Border-radius: 5px; -o-Border-radius: 5px; biên-dưới-phải-bán kính: 0; -moz-Border-radius-bottomright: 0; -webkit-Border-bottom-right-radius: 0; biên-dưới-trái-bán kính: 0; -moz-Border-radius-bottomleft: 0; -webkit-Border-bottom-left-radius: 0; chiều cao: 44px; chiều rộng: 100%; chiều rộng tối đa: 640px;  #w #pagebody tiêu đề # toolbarnav h1 text-align: centre; đệm-top: 10px; đệm-phải: 40px; màu: # e6e8f2; font-weight: in đậm; cỡ chữ: 2.1em; bóng văn bản: 1px 1px 0px # 313131; 

Quy tắc di động

Thật dễ dàng để nhận thấy tôi cũng đang sử dụng một hình ảnh nền cho kết cấu thanh tiêu đề màu xanh. Đây là kích thước 640 × 44 pixel để phù hợp với cấu trúc bố cục nhất quán. Nhưng tôi cũng đã phát triển một hình ảnh @ 2x cho màn hình retina của iPhone / iPad. Bạn có thể xem cả hai hình ảnh bên dưới hoặc lấy chúng từ mã nguồn demo của tôi.

• Systemopez/demo/img/[email protected]
• Systemopez/demo/img/[email protected]

Tôi thiết lập CSS di động cho chức năng này trong một tệp khác có tên responsive.css. Nó chứa hai truy vấn phương tiện thay thế thanh tiêu đề bg và biểu tượng nút menu cho thiết bị võng mạc.

/ ** màn hình retina ** / @media chỉ màn hình và (-webkit-min-device-pixel-ratio: 2), chỉ màn hình và (min - moz-device-pixel-ratio: 1.5), chỉ màn hình và ( min-device-pixel-ratio: 1.5) #w #pagebody tiêu đề nền: # 0b1851 url ('img/[email protected] ') trên cùng bên trái không lặp lại; kích thước nền: 640px 44px;  #w #pagebody tiêu đề # menu-btn nền: url ('img/[email protected] ') không lặp lại; kích thước nền: 53px 30px; 

Thiết kế Mũi tên Menu

Trong khu vực điều hướng tôi cũng đã bao gồm một biểu tượng mũi tên nhỏ ở bên phải của mỗi liên kết menu. Điều này có thể dễ dàng được thay thế bằng một hình ảnh từ bất kỳ tác phẩm nghệ thuật commons sáng tạo. Nhưng hầu hết tất cả người hâm mộ CSS3 sẽ thích thử nghiệm phương pháp này.

#w #navmenu ul li a :: after content: "; display: block; width: 6px; height: 6px; Border-right: 3px solid # d0d0d8; Border-top: 3px solid # d0d0d8; vị trí: tuyệt đối; : 30px; top: 45%; -webkit-Transform: rotation (45deg); -moz-Transform: rotation (45deg); -o-Transform: rotation (45deg); Transform: rotation (45deg); #w #navmenu ul li a: hover :: after Border-color: # cad0e6;

Chúng tôi đang sử dụng biến đổi tài sản để tạo ra một biên giới nhỏ sau nội dung. Tôi cũng thiết lập vị trí: tuyệt đối; vì vậy chúng ta có thể tự do di chuyển các đường viền này xung quanh mục liên kết bên trong. Thật dễ dàng để thay đổi màu đường viền trên trạng thái di chuột, mang lại cảm giác năng động hơn. Thật đáng kinh ngạc những gì bạn có thể thực hiện chỉ bằng cách sử dụng các quy tắc HTML5 và CSS3 cơ bản.

Nhưng bây giờ, hãy chuyển sang các bit và đoạn mã JavaScript. Hãy nhớ điều này yêu cầu bao gồm thư viện jQuery để mã của tôi chạy đúng.

Hoạt hình jQuery

Khi viết các mã tùy chỉnh này, tôi đã tạo một tài liệu hoàn toàn mới có tên script.js. Hãy viết chúng trực tiếp vào > thẻ hoặc tải xuống ví dụ của tôi từ mã nguồn demo.

$ (tài liệu). yet (function () var pagebody = $ ("# pagebody"); var themothy = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window). thong (), height: $ (window) .height (); // truy xuất các biến như // viewport. thong / viewport.height 

hàm openme () $ (function () topbar.animate (left: "290px", thời gian: 300, hàng đợi: sai); pagebody.animate (left: "290px", thời gian: 300 , hàng đợi: sai););  function closeme () var closeme = $ (function () topbar.animate (left: "0px", thời gian: 180, queue: false); pagebody.animate (left: "0px", thời lượng: 180, hàng đợi: sai);); 

// tải nội dung trang để điều hướng $ ("a.navlink"). live ("click", function (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.sub chuỗi (1, linkurl.length); var imgloader = ''; 

gần tôi(); $ (function () topbar.css ("top", "0px"); window.scrollTo (0, 1););

nội dung.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * không gọi lại * /), 1200);