Tạo các chủ đề di động jQuery tùy chỉnh

Tùy chỉnh dáng vẻ của các trang, các thanh công cụ, nội dung, các phần tử biểu mẫu, các danh sách, các nút bấm và nhiều hơn nữa

Một tỷ lệ sử dụng rất cao các máy điện thoại thông minh và máy tính bảng rốt cục đang làm tăng nhu cầu cho các nhà phát triển và thiết kế web di động. Khung công tác jQuery Mobile (Di động jQuery) cho phép bạn tạo các trải nghiệm web di động cạnh tranh với các kết quả phát triển ứng dụng nguyên gốc bằng cách cung cấp truy cập nhanh đến các ứng dụng và các trang web thông qua trình duyệt web chứ không phải làm cho người dùng tải về và cài đặt các ứng dụng di động. Hãy tìm hiểu cách sử dụng khung công tác thiết kế chủ đề jQuery Mobile để tạo các trang web và các ứng dụng web di động tùy chỉnh làm nên thương hiệu.

Kris Hadlock, Nhà phát triển và nhà thiết kế web, Studio Sedition

Photo of Kris HadlockKris Hadlock là nhà phát triển và thiết kế trang web theo hợp đồng từ năm 1996. Ông đã làm về các dự án cho các công ty như SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, Le Cordon Bleu và Canon. Ông là tác giả của jQuery Mobile: Develop and Design - jQuery Mobile: Xây dựng và Thiết Kế (Peachpit), Ajax for Web Application Developers - Ajax dành cho các nhà phát triển ứng dụng Web (Sams) và The ActionScript Migration Guide - Hướng dẫn di trú ActionScript (New Riders). Kris là một nhà báo được đánh giá cao, ông phụ trách các chuyên mục và đã có nhiều bài viết cho các trang web và các tạp chí thiết kế, gồm IBM developerWorks, Peachpit.com, InformIT.com và Practical Web Design - Thực hành thiết kế web. Ông cũng là người sáng lập của trang www.studiosedition.com, một xưởng phát triển phần mềm và thiết kế web chuyên về tổng hợp biểu mẫu và chức năng.



09 07 2012

Khung công tác jQuery Mobile là một thư viện JavaScript mà bạn có thể sử dụng để dễ dàng tạo một phiên bản di động của một trang web, chuyển đổi các trang web hiện có thành các trang web và các ứng dụng cảm ứng thân thiện. Khung công tác jQuery Mobile tác động đến cách các ứng dụng di động được truy cập và được phân phối trên các thiết bị di động và máy tính bảng bằng cách cho phép người dùng kết nối trực tiếp vào các ứng dụng cảm ứng thân thiện thông qua một trình duyệt web.

Tỷ lệ sử dụng thiết bị di động và máy tính bảng đang tăng vọt và khung công tác jQuery Mobile đang cho phép các nhà phát triển đáp ứng nhu cầu ngày càng tăng về những trải nghiệm web di động này bằng cách tăng tốc độ tạo ra các trang web di động.

Đặc biệt, jQuery Mobile gồm có một khung công tác chủ đề (theme - chủ đề bao gồm tất cả các định dạng về hình nền, màu chữ và âm thanh) mà bạn có thể dễ dàng tùy chỉnh. Khả năng tùy chỉnh các mẫu màu nền và các bộ biểu tượng hỗ trợ thiết kế chủ đề tùy chỉnh cho các trang web, các thanh công cụ, nội dung, các phần tử biểu mẫu, các danh sách, các nút bấm và nhiều hơn nữa. Bài này cung cấp một tổng quan ngắn gọn về cách tạo một chủ đề tùy chỉnh cho mỗi kiểu phần tử jQuery Mobile này. Việc thiết kế chủ đề tùy chỉnh cho phép bạn tạo ra các phiên bản di động của các trang web theo cùng thương hiệu như các phiên bản máy tính để bàn của chúng.

jQuery Mobile thiết kế chủ đề

jQuery Mobile có một cấu trúc trang được khuyến cáo nhưng là tùy chọn cho các ứng dụng web tiêu chuẩn bao gồm một vài cấu trúc phổ biến, như một phần tử trang có chứa các phần tử tiêu đề, nội dung và cuối trang. Để định nghĩa các phần tử này, khung công tác jQuery Mobile sử dụng thuộc tính data-role của HTML5. Liệt kê 1 cho thấy ví dụ về một khuôn mẫu HTML được khuyến cáo của jQuery Mobile, sử dụng data-role cho mỗi phần tử chính.

Liệt kê 1. Một phần tử sử dụng data-role của trang
<div data-role="page"> 
   <div data-role="header">
      <h1>Page Title</h1> 
   </div> 
   <div data-role="content">
      <p>Page content goes here.</p> 
   </div> 
   <div data-role="footer"> 
      <h4>Page Footer</h4> 
   </div> 
</div>

Một phần tử được khuyến cáo và quan trọng khác là thẻ <meta viewport>. Thẻ này chỉ rõ cách một trình duyệt sẽ hiển thị trang web di động. Mã sau đây cho thấy cách thêm một thẻ <meta> để thiết lập viewport cho các thiết bị di động:

 <meta name="viewport" content="width=device-width,
                initial-scale=1">

Thẻ <meta viewport> rất quan trọng để biểu hiện trang web di động của bạn đúng cách dựa vào thiết bị truy cập nó. Nếu không có thẻ này, trang web của bạn có thể hiện ra nhỏ, hoặc bị thu nhỏ, cũng như bất kỳ trang web bình thường nào, không được xây dựng dành cho di động thường hiển thị. Hình 1 cho thấy một trang web di động sử dụng thẻ <meta viewport> và hiển thị nội dung thích hợp hơn cho thiết bị đang được sử dụng.

Hình 1. Một trang web di động sử dụng thẻ <meta viewport>
Một trang web di động sử dụng thẻ <meta viewport> tag

Khung công tác jQuery Mobile gồm có một hệ thống thiết kế chủ đề của trang cung cấp toàn bộ quyền kiểm soát ngoại hình và kiểu dáng của các phần tử trang. Có thể thêm thuộc tính data-theme của HTML5 vào một phần tử để áp dụng một mẫu màu nền của chủ đề jQuery Mobile hiện có hay một mẫu màu nền mới. Hệ thống thiết kế chủ đề gồm có năm mẫu nền, sử dụng một chữ cái để định danh từng mẫu — ví dụ, A-E là các mẫu màu nền mà khung công tác jQuery Mobile cung cấp nguyên gốc. Bạn có thể xem các mẫu nền hiện có bằng cách tải tệp CSS do khung công tác jQuery Mobile cung cấp. Để tạo một mẫu nền mới, bạn có thể sử dụng bất kỳ chữ cái nào của bảng chữ cái còn chưa được sử dụng (cụ thể là F-Z). Một khi bạn xác định chữ cái mà bạn muốn sử dụng, bạn có thể tham khảo bất kỳ trong các mẫu nền hiện có nào để sao chép và tùy chỉnh các lớp cho tất cả các phần tử trang khác nhau.


Thiết kế chủ đề của trang

Thiết kế chủ đề trang bao gồm việc tạo kiểu dáng phần tử HTML chứa toàn bộ trang web. Cấu trúc trang được khuyến cáo của jQuery Mobile gồm có một phần tử <div> có một thuộc tính data-role với một giá trị cho trang. Để tạo kiểu dáng phần tử này, hãy áp dụng một thuộc tính data-theme cho nó và chỉ rõ một giá trị chưa sử dụng và duy nhất cho một mẫu nền mới sao cho bạn có thể viết một CSS tùy chỉnh cho nó. Đoạn mã sau cho thấy một ví dụ về phần tử page khi sử dụng một giá trị data-themeF:

 <div data-role="page" data-theme="f">

Nhờ sử dụng các thuộc tính data-roledata-theme này, khung công tác jQuery Mobile thực sự tạo ra và thêm một vài lớp CSS cho phần tử page. Dưới đây là một ví dụ, sau khi được khung công tác này xử lý, đầu ra trong trình duyệt sẽ trông như sau:

 <div data-role="page" data-theme="f" class="ui-page
      ui-body-f ui-page-active" style="min-height: 580px;">

Như bạn có thể thấy, một số các lớp CSS đã được thêm vào phần tử page. Các lớp ui-pageui-page-active đã được thêm vào dựa vào giá trị data-role của page và lớp ui-body-f đã được thêm vào dựa vào giá trị data-themeF. Bạn có thể sử dụng bất kỳ lớp nào trong các lớp này để tạo kiểu dáng phần tử page hoặc nội dung của nó. Liệt kê 2 cho thấy một ví dụ về cách sử dụng lớp ui-body-f để thêm tạo kiểu dáng tùy chỉnh cho phần tử page.

Liệt kê 2. Tạo kiểu dáng phần tử trang của jQuery Mobile bằng cách sử dụng CSS
.ui-body-f { 
   background-color: #f9f9f9; 
   font-family: "Lucida Sans Unicode", 
                "Lucida Grande", Arial, sans-serif; 
}

CSS tùy chỉnh, mà bạn đã thêm vào lớp này, thiết lập màu nền và phông chữ được sử dụng trong các trang web di động. Một khi bạn đã tạo mẫu nền trang của mình, bạn có thể đi vào chi tiết cụ thể hơn với các phần tử HTML mà bạn muốn nhắm đến và tạo kiểu dáng cho nó. Ví dụ, Liệt kê 3 cho thấy cách nhắm đến và và tạo kiểu dáng các trường văn bản đầu vào và mật khẩu xuất hiện trong phần tử page.

Liệt kê 3. Tạo kiểu dáng cho tất cả các trường văn bản đầu vào và mật khẩu xuất hiện trong phần tử trang
.ui-body-f input[type="text"], 
.ui-body-f input[type="password"] { 
   background-color: #ccc; 
}

Các khả năng là vô tận một khi bạn đã đạt được quyền kiểm soát phần tử page. Với phần tử thùng chứa các nội dung trang web này, bạn thực sự có thể nhắm đến và tùy chỉnh bất kỳ phần tử nào.


Thiết kế chủ đề của thanh công cụ

Trong khung công tác Mobile jQuery, các thanh công cụ là các phần tử header (tiêu đề) và footer (cuối trang). Để định nghĩa một thanh công cụ là một tiêu đề hay cuối trang, bạn sử dụng thuộc tính data-role. Giá trị của thuộc tính data-role sẽ là header hoặc footer tùy thuộc vào phần tử mà bạn đang tạo ra. Liệt kê 4 đưa ra một ví dụ về cả thanh công cụ tiêu đề và cuối trang, bên trong một phần tử page.

Liệt kê 4. Sử dụng các thanh công cụ tiêu đề và cuối trang
<div data-role="header"> 
   <h1>Page Title</h1> 
</div> 
<div data-role="footer"> 
   <h4>Page Footer</h4> 
</div>

Việc gán một chủ đề cho một thanh công cụ cũng dễ dàng như khi sử dụng thuộc tính data-theme và cấp cho nó một giá trị mẫu nền tùy chỉnh. Theo mặc định, các thanh công cụ tiêu đề và cuối trang được gán cho mẫu mầu nền a để hiển thị hệ thống phân cấp trực quan. Dưới đây là một ví dụ về một chủ đề tùy chỉnh được gán cho thanh công cụ tiêu đề:

 <div data-role="header" data-theme="f">
    <h1>Page Title</h1> 
 </div>

Để tạo kiểu dáng cho chủ đề này, bạn cần tạo ra một lớp CSS mới cho thanh đó (Liệt kê 5).

Liệt kê 5. Tạo kiểu dáng thanh công cụ tiêu đề
.ui-bar-f { 
   padding: 10px 0px; 
   background-color: #069;
   border-bottom: 2px solid #036; 
   color: #fff; 
}

Lớp CSS tùy chỉnh mới này tạo kiểu dáng cho tất cả các thanh công cụ được áp dụng data-theme F. Tuy nhiên, thường có khi bạn muốn tiêu đề và cuối trang của bạn trông khác nhau. Để có được sự khác biệt này, bạn cần tạo ra một chủ đề tùy chỉnh mớ i— đặt tên nó là G— và tạo một lớp CSS mới để định kiểu dáng nó (Liệt kê 6).

Liệt kê 6. Thêm một lớp CSS tùy chỉnh cho thanh công cụ cuối trang
.ui-bar-g { 
  margin-top: 20px; 
  padding: 10px 0; color: #fff; 
  border-bottom: 2px solid #000; 
  background-color: #000; 
  background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, 
              rgba(0,0,0,0.65) 100%); 
  /* FF3.6+ */ 
  background: -webkit-gradient(linear, left top, left bottom, 
       color-stop(0%,rgba(204,204,204,1)), 
       color-stop(100%,rgba(0,0,0,0.65))); 
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%, 
      rgba(0,0,0,0.65) 100%); 
  /* Chrome10+,Safari5.1+ */ 
  background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,
     rgba(0,0,0,0.65) 100%); 
  /* Opera11.10+ */ 
  background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,
     rgba(0,0,0,0.65) 100%); 
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc',
           endColorstr='#a6000000',GradientType=0 ); 
  /* IE6-9 */ 
  background: linear-gradient(top, rgba(204,204,204,1) 0%,
         rgba(0,0,0,0.65) 100%); 
  /* W3C */ 
}

Chủ đề của thanh công cụ là G thiết lập một số thuộc tính cơ bản, nhưng nó cũng bao gồm nhiều phối màu phức tạp cho các trình duyệt khác nhau. Các phối màu phức tạp này thật khó làm, nhưng may mắn là bạn không cần phải ghi nhớ cách tạo ra chúng, vì các trang web sẽ tạo chúng cho bạn. Vì vậy, bạn có thể chỉ cần sao chép và dán đoạn mã đó vào lớp CSS của bạn. Hãy truy cập vào phần Tài nguyên của bài này để có một liên kết để tạo ra các phối màu cho trang web của bạn.


Thiết kế chủ đề của nội dung

Phần tử content (nội dung) có thể được thiết kế chủ đề theo mẫu nền tùy chỉnh mà bạn muốn. Để tạo ra một mẫu nền tùy chỉnh cho nội dung trong trang web di động của bạn, trước tiên bạn phải tạo một phần tử content (Liệt kê 7).

Liệt kê 7. Thêm một khối gấp lại được cho phần tử nội dung của bạn
<div data-role="collapsible" data-collapsed="true" data-theme="f"> 
   <h3>>Login</h3> Login form will go here 
</div>

Khối này sẽ gấp lại khi trang web được tải. Khi người dùng nhấn chuột vào thanh tiêu đề, nó sẽ để lộ ra biểu mẫu đăng nhập mà bạn sẽ tạo ra ngay sau đây. Để tạo kiểu dáng cho khối này, chỉ cần gán một data-theme cho nó và tạo một lớp CSS tùy chỉnh. Liệt kê 8 đưa ra một ví dụ về một số các lớp tùy chỉnh gắn liền với khối gấp lại được và các nội dung của nó.

Liệt kê 8. Các lớp CSS tùy chỉnh gắn liền với thanh tiêu đề cho khối gấp lại được
ui-body-f
.ui-collapsible-contain 
.ui-collapsible-heading 
.ui-btn-up-f { 
   background: #666;
   color: #fff; text-decoration: none; 
} 
.ui-body-f 
.ui-collapsible-contain
.ui-collapsible-heading 
.ui-btn-down-f, 
.ui-body-f 
.ui-collapsible-contain
.ui-collapsible-heading 
.ui-btn-hover-f { 
   background: #999; 
   color: #fff;
   text-decoration: none; 
}

Các lớp CSS này định nghĩa trạng thái hoạt động, không hoạt động và di chuột của thanh tiêu đề gấp lại được. Thẻ <h3> trong Liệt kê 7 được chuyển đổi thành <h3> với một lớp ui-collapsible-heading; còn văn bản chứa trong nó — trong trường hợp này, "Login" — được chuyển đổi thành một siêu liên kết với một vài lớp, tùy thuộc vào trạng thái. Ba lớp cho siêu liên kết này là ui-btn-up-f, ui-btn-down-fui-btn-hover-f. Mỗi lớp này đều tự thân rõ ràng, trình bày các trạng thái lên, xuống và di chuột của thanh tiêu đề cho khối nội dung gấp lại được. Các lớp thay đổi tùy thuộc vào giá trị của data-theme, do đó, các lớp này có chữ F được nối thêm vào cuối; nếu bạn sử dụng giá trị data-themeG, thì các lớp đó sẽ có một chữ G gắn vào cuối cùng thay cho chữ F.


Thiết kế chủ đề của danh sách

Các danh sách thường phổ biến trên các trang web di động, vì chúng cung cấp một cách để nhanh chóng hiển thị các tùy chọn cho những người thường xuyên bận rộn. Để chuyển đổi một danh sách HTML thông thường thành một danh sách di động bắt mắt, dễ sử dụng trên các thiết bị cảm ứng, bạn chỉ cần thiết lập thuộc tính data-rolelistview (khung nhìn danh sách), như hiển thị trong Liệt kê 9.

Liệt kê 9. Chuyển đổi một danh sách HTML đơn giản thành một danh sách danh sách cảm ứng thân thiện
<ul data-role="listview" data-inset="true" data-theme="f"> 
  <li><a href="#">Title name</a></li> 
  <li><a href="#">Title name</a></li> 
  <li><a href="#">Title name</a></li> 
</ul>

Theo mặc định, các danh sách xuất hiện trên toàn bộ chiều rộng của cửa sổ trình duyệt, như Hình 2.

Hình 2. Vẻ ngoài mặc định của một listview trong jQuery Mobile
Vẻ ngoài mặc định của một listview trong jQuery Mobile

Tuy nhiên, nếu bạn muốn ghép khối các mục danh sách và làm tròn các góc, bạn có thể sử dụng thuộc tính data-inset và thiết lập giá trị của nó là true (đúng), như trong Hình 3.

Hình 3. Một listview với thuộc tính data-inset được thiết lập là đúng
Một listview với thuộc tính data-inset được thiết lập là đúng

Việc thêm một chủ đề cho listview rất dễ dàng. Giống như bạn đã làm với tất cả các chủ đề khác, chỉ cần gán một giá trị data-theme. Liệt kê 9 đã sử dụng F làm giá trị chủ đề. Để tùy chỉnh các mục danh sách đó, bạn cần nhắm đến chúng bằng CSS, như Liệt kê 10.

Liệt kê 10. Tùy chỉnh các mục danh sách
.ui-listview 
.ui-btn-up-f a, 
.ui-listview 
.ui-btn-down-f a,
.ui-listview 
.ui-btn-hover-f a { 
   color: #fff; 
}

Các phần tử bạn đang nhắm đến bằng CSS trong Liệt kê 10 là các siêu liên kết thực tế bên trong các mục danh sách để thiết lập màu văn bản là trắng. Tất cả các lớp ui-btn-up-f, ui-btn-down-fui-btn-hover-f được nội xạ bởi jQuery Mobile để xử lý các trạng thái khác nhau của các mục danh sách.


Thiết kế chủ đề của biểu mẫu và nút bấm

Bạn tạo một biểu mẫu cho một trang web di động bằng cách sử dụng khung công tác jQuery Mobile giống như cách mà bạn thường làm cho bất kỳ trang web nào: Chỉ cần thêm các phần tử đầu vào và các nhãn đi kèm, sẽ nhận chủ đề của trang hiện có. Liệt kê 11 đưa ra một ví dụ.

Liệt kê 11. Tạo một biểu mẫu di động
<div data-role="collapsible" data-collapsed="true" data-theme="f"> 
   <h3>>Login</h3> 
   <form action="" method="post"> 
      <label for="username">Username</label> 
      <input type="text" name="username" id="username" /> 
      <label for="username">Password</label> 
      <input type="password" name="password" id="password" /> 
      <fieldset class="ui-grid-a"> 
          <div class="ui-block-a"> 
             <button type="reset" data-inline="true">Reset</button> 
          </div> 
          <div class="ui-block-b"> 
             <button type="submit" data-inline="true"
                   data-theme="f">Submit</button> 
          </div> 
      </fieldset> 
   </form>
</div>

Các phần tử biểu mẫu cũng có thể được thiết kế chủ đề tùy chỉnh. Liệt kê 12 cho thấy một ví dụ về cách tạo kiểu dáng một biểu mẫu như thế nào khi sử dụng chủ đề F từ phần tử page của bạn.

Liệt kê 12. Tạo kiểu dáng tuỳ chỉnh cho các phần tử đầu vào được sử dụng trong biểu mẫu đăng nhập của bạn
.ui-body-f input[type="text"], 
.ui-body-f input[type="password"] { 
   background-color: #ccc; 
}

Trong Liệt kê 11, bạn có thể đã nhận thấy fieldset có mã nút bấm tùy chỉnh. Mỗi nút bấm có một chủ đề khác nhau gắn liền với nó: nút bấm Reset sử dụng chủ đề mặc định, trong khi nút bấm Submit sử dụng chủ đề F. Liệt kê 13 cho thấy các lớp CSS tùy chỉnh được tạo ra cho cả hai nút bấm này để làm cho chúng xuất hiện khác nhau.

Liệt kê 13. Các lớp tùy chỉnh CSS cho các nút bấm biểu mẫu
.ui-btn-up-f { 
   background: -moz-linear-gradient(top, rgba(57,107,158,1) 0%, 
   rgba(78,137,197,0.65) 100%); 
   /* FF3.6+ */ 
   background: -webkit-gradient(linear, left top, left bottom, 
               color-stop(0%, rgba(57,107,158,1)),
               color-stop(100%,rgba(78,137,197,0.65))); 
  /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(top, rgba(57,107,158,1) 0%, 
              rgba(78,137,197,0.65) 100%); 
  /* Chrome10+,Safari5.1+ */ 
  background: -o-linear-gradient(top, rgba(57,107,158,1) 0%,
                rgba(78,137,197,0.65) 100%); 
  /* Opera11.10+ */ 
  background: -ms-linear-gradient(top, rgba(57,107,158,1) 0%, 
             rgba(78,137,197,0.65) 100%); 
  /* IE10+ */ 
  filter: 
  progid:DXImageTransform.Microsoft.gradient( startColorstr='#396b9e',
         endColorstr='#a64e89c5',GradientType=0 ); 
  /* IE6-9 */ 
  background: linear-gradient(top, rgba(57,107,158,1) 0%, 
         rgba(78,137,197,0.65) 100%); 
  /* W3C */
  border: 1px solid #225377; 
  text-shadow: #225377 0px -1px 1px; color: #fff; 
}
.ui-btn-down-f, 
.ui-btn-hover-f { 
   background: -moz-linear-gradient(top, rgba(114,176,212,1) 0%, 
                rgba(75,136,182,0.65) 100%); 
   /* FF3.6+ */ 
   background:  -webkit-gradient(linear, left top, left bottom, 
                color-stop(0%, rgba(114,176,212,1)),
                color-stop(100%,rgba(75,136,182,0.65))); 
   /* Chrome,Safari4+ */ 
   background: -webkit-linear-gradient(top, rgba(114,176,212,1) 0%, 
               rgba(75,136,182,0.65) 100%); 
   /* Chrome10+,Safari5.1+ */ 
   background: -o-linear-gradient(top, rgba(114,176,212,1) 0%,
               rgba(75,136,182,0.65) 100%); 
   /* Opera11.10+ */ 
   background: -ms-linear-gradient(top, rgba(114,176,212,1) 0%, 
               rgba(75,136,182,0.65) 100%); 
   /* IE10+ */ 
   filter: 
   progid:DXImageTransform.Microsoft.gradient(
       startColorstr='#72b0d4', endColorstr='#a64b88b6',GradientType=0 ); 
   /* IE6-9 */
   background: linear-gradient(top, rgba(114,176,212,1) 0%,
               rgba(75,136,182,0.65) 100%);
   /* W3C */ 
   border: 1px solid #00516E; 
   text-shadow: #014D68 0px -1px 1px; 
   color: #fff;
}

Như bạn có thể thấy, nút bấm Save có một phối màu tùy chỉnh gắn liền với nó, làm cho nó nổi bật hơn so với nút bấm Reset. Việc sử dụng nhiều chủ đề cho các bộ nút bấm là một cách hay để xác định nút bấm nào quan trọng nhất hoặc nút bấm chính.


Kết luận

Thiết kế chủ đề một trang web cảm ứng thân thiện bằng khung công tác jQuery Mobile dễ dàng một khi bạn hiểu thuộc tính data-theme và các phần tử mà khung công tác này cung cấp. Với việc thêm vào thuộc tính data-theme, bạn có thể gán các giá trị tùy chỉnh và các lớp CSS tùy chỉnh có liên quan, sẽ cho phép bạn tạo ra các trang web cảm ứng thân thiện bằng cách sử dụng khung công tác jQuery Mobile. Để tìm hiểu thêm về khung công tác này, hãy xem phần Tài nguyên, tốt hơn nữa, hãy thử nghiệm một số CSS tùy chỉnh của chính bạn bằng cách sử dụng mã mẫu hoặc xem phần Tải về.


Tải về

Mô tảTênKích thước
Sample jQuery Mobile webpagejquery-mobile-custom-themes.zip4KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

  • Tải về jQuery Mobile từ trang web khung công tác jQuery Mobile.
  • Tải về và dùng thử Phần xem trước Công nghệ di động của IBM, một bộ các mẫu mã và các dịch vụ để giúp bạn bắt đầu xây dựng các ứng dụng di động, mở rộng và tích hợp vào doanh nghiệp. Phần xem trước này bao gồm một dịch vụ thông báo RESTful; PhoneGap, một khung công tác nguồn mở để xây dựng các ứng dụng di động lai; một môi trường thời gian chạy của máy chủ ứng dụng WebSphere nhẹ; và mã mẫu để cho phép bạn xem tất cả làm việc như thế nào.
  • Gói tính năng WebSphere Application Server của IBM cho Web 2.0 và Di động gồm có IBM Dojo 1.7 Toolkit, các khối xây dựng ứng dụng Internet phong phú (RIA) và di động mới và một thành phần sơ đồ dựa trên Dojo. Với các công cụ Rational kèm theo, Gói tính năng này giúp bạn lấy các ứng dụng WebSphere đã phát triển ban đầu cho các trình duyệt máy tính để bàn và làm thích ứng và triển khai chúng cho các thiết bị di động.
  • Đánh giá sản phẩm của IBM theo cách phù hợp với bạn nhất: Tải về bản dùng thử, dùng thử nó trực tuyến, sử dụng nó trong một môi trường đám mây hoặc dành một vài giờ trong SOA Sandbox để tìm hiểu cách thực hiện kiến trúc hướng dịch vụ một cách hiệu quả.

Thảo luận

  • Hãy tham gia vào cộng đồng developerWorks. Kết nối với những người dùng developerWorks khác trong khi khám phá các blog, các diễn đàn, các nhóm và các wiki hướng nhà phát triển.

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=824578
ArticleTitle=Tạo các chủ đề di động jQuery tùy chỉnh
publish-date=07092012