Giao diện jQuery giờ đây đã trở thành chuẩn để triển khai theme, bởi vì nó hỗ trợ nhiều widget. Bạn sẽ tìm hiểu sâu về giao diện người dùng jQuery với kiến trúc sư Java Ken Ramirez để học cách sử dụng các chủ đề gốc và các chủ đề được thiết kế dành riêng cho trang web của bạn.

Ken Ramirez, Chuyên viên tư vấn/kiến trúc Java cao cấp, Axsys Technology Group

Ảnh của Ken RamirezKen Ramirez đã có 24 năm kinh nghiệm trong lĩnh vực CNTT, trong đó ông có 12 năm phát triển các ứng dụng và website sử dụng Java, JEE. Ông đã tư vấn cho một số tập đoàn lớn của Mỹ, phát triển các ứng dụng trọn chu kỳ ngay từ giai đoạn sơ khai. Với kinh nghiệm của mình, ông có thể phát triển các công nghệ giao diện đang được sử dụng phổ biến ngày nay như HTML5, Ajax, JSON, JavaScript, jQuery, và Adobe Photoshop. Còn đối với các công nghệ nền tảng, ông tập trung vào Java, JEE, web services, XML, Hibernate, SQL, JDBC, và Spring để phát triển các ứng dụng và website ở cấp độ doanh nghiệp.



30 06 2013

Themes (chủ đề) không phải là một khái niệm mới. Bạn có thể sử dụng Cascading Style Sheet (CSS) hoặc các classes để định dạng giao diện trang web của bạn. Sử dụng một Farmework được tiêu chuẩn hóa cách tiếp cận và làm giảm đi số lượng công việc và code cần phải viết.

JQuery giờ đây là chuẩn công nghệ được áp dụng để thiết kế Theme. Bên cạnh đó cũng có những lựa chọn khác, chẳng hạn như Dojo (cùng với Dijit) hoặc Ext JS, nhưng jQuery UI cho phép kết hợp các Themes với các Widgets, đó là những tiện ích mà người dùng có thể tương tác được như Date Pickers (cho phép chọn ngày tháng) hay Buttons (các nút bấm). Khi mổ xẻ các hoạt động bên trong các tập tin tạo nên một giao diện jQuery, những thứ bạn tìm thấy không gì khác là CSS và JavaScript. Nhưng đó là quá trình suy nghĩ và tiêu chuẩn hóa để nó có thể sử dụng CSS và JavaScript làm cho jQuery UI như là một nền tảng tuyệt vời để xây dựng giao diện của một trang web.

Mở đầu

Bài viết này giả định rằng bạn đã quen thuộc với Document Object Model (DOM) và cách nó được xây dựng để có mối quan hệ với các phần tử HTML.

Bạn cũng nên làm quen với CSS — đặc biệt là CSS3, vì hiện tại nó hỗ trợ hầu hết các chuẩn CSS trên các trình duyệt phổ biến — và JavaScript nữa. Ngôn ngữ kịch bản này kết hợp các phần tử DOM với CSS để cung cấp cho người dùng trải nghiệm đầy đủ về jQuery UI, các Theme và Widget, cách thực hiện.

Lưu ý rằng các Widget quan hệ với các phần tử HTML thông qua DOM, và kiểu dáng của chúng được định nghĩa thông qua các lớp CSS. Các sự kiện và chức năng thực thi thông qua JavaScript để điều khiển DOM và gán các kiểu CSS khi chạy.

jQuery tạo và thực thi các Widget khi cần thiết hoặc theo yêu cầu của ứng dụng web. Cũng lưu ý rằng các Widget có thể bị hủy bỏ. Và chỉ có thể hủy bỏ được giao diện đã gán vào Widget.

Các Theme jQuery UI

Nền tảng jQuery bao gồm hai thành phần sub-framework: một Widget Framework, trong đó bao gồm Widget Factory và một tập hợp các Widget thông dụng; thành phần thứ hai là CSS Framework. Widget Factory cung cấp cơ sở cho tất cả các jQuery UI Widgets, bao gồm những Widget thông thường trong tập hợp các Widgets. Khi tạo các Widget, ta sử dụng một trong những kiểu Widget phổ biến được cung cấp sẵn hoặc tự tạo ra ngay từ đầu. Một khi bạn biết vị trí của các Widget , mở nó lên trong bất kỳ trình soạn thảo yêu thích và xem mã code. Từ đó sửa code này và tạo ra một widget tùy chỉnh (bắt đầu với những Widget có sẵn) hoặc tạo ra một cấu trúc tương tự.

Cấu trúc thư mục của jQuery UI themes

Trước khi tiếp tục xem các tập tin khác nhau và nội dung của nó, bạn hãy tải về một trong các Themes từ jQuery UI platform (xem phần Tài nguyên để tìm đường link). Các tập tin Zip chứa 3 thư mục: css, js, and development-bundle. Thư mục development-bundle chứa một thư mục có tên là themes, đó là nơi lưu trữ các jQuery UI themes. Thư mục themes lần lượt chứa một thư mục có tên theme được chọn/tải về (chẳng hạn như UI lightness) cũng như một thư mục có tên cơ sở. Thư mục này là nơi bắt đầu Theme của bạn. Nó luôn được tải về, không phụ thuộc vào theme được chọn.

Thư mục css chứa một thư mục với tên của theme tải về. Thư mục theme này có chứa một tập tin CSS kết hợp đánh dấu CSS cho tất cả các thành phần hoặc các Widget. Thư mục development-bundle, tuy nhiên, cũng có một thư mục theme / [theme-name] (trong đó [theme-name] là tên thực tế của các theme được chọn) có chứa các file CSS riêng cho mỗi thành phần hoặc widget. Cấu trúc này làm cho nó dễ dàng hơn để tìm và sửa đổi theme của mình. Hình 1 cho thấy cấu trúc của thư mục themes.

Hình 1. Cấu trúc của thư mục themes
Ảnh cấu trúc của thư mục themes (chủ đề)

Không phải tất cả các tập tin từ thư mục [theme-name] được liệt kê trong Hình 1, nó chỉ liệt kê những thành phần quan trọng. File jquery.ui.all.css nhập vào các file jquery.ui.base.css và jquery.ui.theme.css, giúp dễ dàng thêm vào các file bằng cách sử dụng file jquery.ui.all.css. File jquery.ui.base.css nhập vào file jquery.ui.core.css và tất cả các file thành phần và Widget từ cùng một thư mục (những thông tin này không được hiển thị trong Hình 1). File jquery.ui.core.css chứa các lớp thông dụng được chia sẻ bởi tất cả các file Widget. Nó cung cấp các lớp CSS cơ sở cho tất cả các Widget jQuery UI (bên trong Theme) cũng như tầm nhìn chung và định vị cho các Widget. File quan trọng cuối cùng là jquery.ui.theme.css, cung cấp sự xuất hiện phổ biến và hành vi chia sẻ bởi tất cả các widget trong themes cũng như chính theme đó.

File jquery.ui.theme.css có ba loại kiểu khác nhau:

  • Container - Kiểu này định nghĩa theme container, chẳng hạn như ui-widget, ui-widget-content, hay ui-widget-header.
  • States - Loại này được dùng bởi jQuery UI Widgets để xác định xem các widget như người dùng tương tác với nó. Các lớp bao gồm ui-state-default, ui-state-hover, và ui-state-active.
  • Cues - Như một cái gì đó xảy ra trong ứng dụng (không phải do hành động của người sử dụng), các lớp này thay đổi giao diện của các Widget. Các lớp bao gồm ui-state-highlight, ui-state-error, và ui-state-disabled.

Các Widget thông dụng

Trong phần này chúng ta sẽ xem xét đoạn code ví dụ sử dụng một số Widget phổ biến để xây dựng ứng dụng. Ví dụ này chứa một Widget dạng thanh trượt (slider), một nút bấm (button) để mở một hộp thoại (dialog box), và một hộp thoại hiển thị giá trị hiện tại của slider mỗi khi nó được mở. Hình 2 là ảnh chụp của ứng dụng.

Hình 2. Một ứng dụng mẫu sử dụng các Widgets phổ biến
Ảnh của ứng dụng mẫu sữ dụng các widget phổ biến

Liệt kê 1 cung cấp file chỉ mục HTML index.

Liệt kê 1. Ứng dụng mẫu sử dụng các Widget phổ biến
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Slider Value Example</title>
        <link href="jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css"
        		rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jqueryui/js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.23.custom.min.js">
        		</script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body style="font-size: 10px;">
        <div id="sld_value" style="margin-bottom:10px;"></div>
        <button id="btn_value">Display Value</button>
        <div id="dlg_value"></div>
    </body>
</html>

Liệt kê 2 hiển thị các tập tin JavaScript liên quan (index.js).

Liệt kê 2. File JavaScript liên quan cho ứng dụng mẫu
$(document).ready(function(){
    $('#sld_value').slider({ min: 1, max: 10 });
    $("#dlg_value").dialog( { autoOpen: false, title: "Slider Value",
    	open: function(){ 
    		$("#dlg_value").html("The current value is: " + 
    				$("#sld_value").slider( "option", "value" )); 
    	}
    } );
    $("#btn_value").button().click(function(){ $("#dlg_value").dialog("open"); });
});

Các thiết lập trung header:

<link href="jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="jqueryui/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="index.js"></script>

Sau khi liên kết với file CSS, các file JavaScript bao gồm.

Ba Widget trong ứng dụng này hầu hết được định nghĩa sử dụng câu lệnh <div> (ngoại trừ button đã có thể riêng trong HTML). Những Widget này được định nghĩa như đoạn code sau:

<div id="sld_value" style="margin-bottom:10px;"></div>
<button id="btn_value">Display Value</button>
<div id="dlg_value"></div>

Cuối cùng, ta hoãn việc xây dựng các Widget trong mã JavaScript cho đến khi trang web được nạp đầy đủ, như hiển thị trong Liệt kê 3.

Liệt kê 3. Xây dựng các Widget
$(document).ready(function(){
    $('#sld_value').slider({ min: 1, max: 10 });
    $("#dlg_value").dialog( { autoOpen: false, title: "Slider Value",
    	open: function(){ 
    		$("#dlg_value").html("The current value is: " + 
    				$("#sld_value").slider( "option", "value" )); 
    	}
    } );
    $("#btn_value").button().click(function(){ $("#dlg_value").dialog("open"); });
});

Mỗi Widget mà ta đã đề cập đều được xây dựng với mã này. Dialog box và Button là hai chức năng được gán các sự kiện cụ thể. Ví dụ, sự kiện nhấn vào Button cho biết rằng nó sẽ mở hộp thoại Dialog Box. Còn đối với Dialog Box, nó hướng đến việc thay đổi thông tin để chỉ ra giá trị hiện tại của thanh trượt Slider mỗi khi nó được mở ra.

Có hai cách để thay đổi sự xuất hiện của một Widget. Bạn có thể gán giá trị cho các hàm khởi tạo (Constructor), với bất kỳ thông số cần thiết để tạo Widget. Ví dụ:

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

Hoặc bạn có thể gọi các phương thức trên Widget sau khi nó được tao ra, như sau.

$("#dlg_popup").dialog({ draggable: false });

Hầu hết các Widget thông thường có nhiều tùy chọn liên quan để thiết lập. Trong trường hợp nếu bạn bỏ qua các tùy chọn này, Widget sẽ thiết lập giá trị mặc định cho chúng và bạn có thể thay đổi chúng bất cứ khi nào cần.


Các sự kiện của Widget

Bởi vì Widget là các đối tượng JavaScript cơ bản, chúng có thể được thiết lập với các sự kiện chạy xuyên suốt vòng đời của một website. Khi những sự kiện này được gióng lên, chúng được bắt giữ bởi mã JavaScript hay được xử lý trong các Widget của website (đây là lựa chọn mặc định).

Tất cả các cách thực hiện Widget được mô tả đầy đủ trong các tài liệu của đội jQuery UI cho từng Widget phổ biến. Bạn có thể thêm vào code của chính mình, tuy nhiên, chỉ để xử lý một hay nhiều Widget được chọn. Dưới đây là đoạn code mẫu để thiết lập việc tiếp nhận sự kiện:

$( "#dlg_popup" ).dialog({
   drag: function(event, ui) { ... }
});

Ví dụ này móc nối vào sự kiện drag được gióng lên khi ta rê hộp thoại Dialog Box trên màn hình. Dấu ba chấm () ở ví dụ trên là nơi bạn có thể viết thêm code để xử lý khi sự kiện được gióng.


Các phương thức của Widget

Các phương thức liên quan của Widget cho phép gọi các chức năng được định nghĩa sẵn để thực thi một hành động cụ thể. Dưới đây là ví dụ gọi phương thức của Widget:

$(“#dlg_popup”).dialog("moveToTop”);

Trên lý thuyết thì các tùy chọn và phương thức là khác nhau. Tuy nhiên, lưu ý rằng giá trị của các tùy chọn có thể được thay đổi hay truy hồi bằng cách sử dụng một phương thức để thực thi, như ví dụ dưới đây.

$(“#dlg_popup”).dialog("option", "autoOpen", false);

Chuyển đổi Theme

Bạn có thể thêm mã code vào các file HTML và JavaScript để cho phép thay đổi Theme nhanh chóng bằng cách dùng một menu Drop-down (thanh thực đơn thả xuống). Liệt kê 4 thể hiện những thay đổi trong mã code HTML để thực hiện điều này.

Liệt kê 4. Thay đổi Theme nhanh chóng
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
.
.
.
        <script type="text/javascript" 
        		src="http://jqueryui.com/themeroller/themeswitchertool/">
        </script>
.
.
.
    </head>
    <body style="font-size: 12px;">
        <div id="switcher" style="padding-bottom:15px;"></div>
.
.
.
    </body>
</html>

Liệt kê 5 thể hiện mã JavaScript.

Liệt kê 5. Mã JavaScript để thay đổi Theme nhanh chóng
$(document).ready(function(){
    $('#switcher').themeswitcher();
.
.
.
});

Hình 3 thể hiện ứng dụng mẫu sau những thay đổi này.

Hình 3. Ứng dụng mẫu sau khi đã thay đổi mã code
Ảnh của ứng dụng mẫu sau khi chỉnh sửa mã code

Hãy chạy lại trang HTML của bạn trong trình duyệt và xem kết quả. Bây giờ bạn có thể chọn danh sách Drop-down để thay đổi Theme. Theme được chọn sẽ được ngầm tải về khi cần thiết.

Mặc dù chúng ta có thể dùng công cụ thay đổi Theme (Theme switcher) cho các trang chưa thành phẩm (mục đích là để thử nghiệm và xem kết quả), nhưng đây không phải là một ý kiến hay khi áp dụng nó lên các trang web hoàn chỉnh. Công cụ dựa trên máy chủ của bên thứ ba để chứa Theme, và bạn cũng sẽ không chắc rằng người dùng đang nhìn thấy điều gì.

Tuy nhiên có một cách khác để kiểm tra jQuery UI Theme là dùng công cụ ThemeRoller, chỉ dùng được trên Mozilla Firefox (xem phần Tài nguyên để tìm đường link). Sau khi cài đặt công cụ (như một bookmarklet trong Firefox), bạn mở thư viện và chọn Theme cần xem. Chọn một Theme và nhấn vào đường link tải về. Sau khi tải về xong, bạn giải nén thư mục Theme ra, đặt nó vào bên trong thư mục jQuery UI, rồi chỉnh đường dẫn những file HTML tới Theme đó.

Công cụ này hữu ích hơn nhiều so với việc chỉ đơn giản là chuyển đổi theme. Nó cũng cho phép bạn tạo Theme tùy chỉnh dễ dàng hơn là tạo chúng bằng tay.


Tạo các Theme độc đáo

Sử dụng trang web ThemeRoller (chạy trên hầu hết trình duyệt; xem phần Tài nguyên để tìm đường link), bạn có thể thay đổi trực tiếp trên những Theme jQuery có sẵn để tạo ra Theme độc đáo của riêng mình. Việc này giúp bạn bỏ qua việc tạo các Theme ngay từ đầu. Điều này cũng có nghĩa là bạn không cần phải rành về CSS, và công cụ này cho phép bạn xem những thay đổi trực tiếp trên Theme và Widget của bạn. Hình 4 hiển thị trang web ThemeRoller (bạn đừng bối rối về bookmarklet của ThemeRoller chạy trên trình duyệt Firefox).

Hình 4. Trang web ThemeRoller
Ảnh của trang ThemeRoller

Nhấp vào Gallery (Thư viện) cho phép bạn chọn bất kỳ Theme hiện tại nào. Làm như vậy để chuyển các dạng và hình ảnh CSS mà Widget mẫu sử dụng để phản ánh những thay đổi. Nhấp vào nút Edit ở mỗi Theme sẽ mở ra cho bạn tab "Roll Your Own", nơi bạn có thể thay đổi kiểu CSS liên quan đến Theme đó. Nếu bạn không chọn trước một Theme để chỉnh sửa, bạn sẽ bắt đầu với tab "Roll Your Own" nhưng không có Theme nào được chọn cả, mà chỉ đơn giản xây dựng Theme hoàn toàn mới ngay từ đầu.

Cuối cùng, bạn nhấp chuột vào Download theme để tải về Theme được chọn chứa các chỉnh sửa của bạn. Lưu ý rằng jQuery UI và Theme của nó hỗ trợ nhiều tính năng của CSS3, có nghĩa rằng những tính năng chính trên trình duyệt cũng được hỗ trợ (ngoại trừ các phiên bản trước đây của Windows Internet Explorer).

Tab "Roll Your Own" của ThemeRoller được sắp xếp rất hợp lý để bạn có thể dễ dàng tìm và thay đổi những thứ mà bạn muốn tìm. Tab này chứa các mục thông tin quan trọng (trong số những thông tin quan trọng khác):

  • Font Settings (Cài đặt phông chữ) - Cho phép những thay đổi chung cho các font sử dụng trong suốt vòng đời của Theme.
  • Corner Radius (Bán kính góc) - Điều khiển việc bo góc (hay làm lõm góc) cho các Widget.
  • Header/Toolbar (Tiêu đề/Thanh công cụ) - Cung cấp cái nhìn về các tiêu đề được dùng trong các Widget khác nhau.
  • Content (Nội dung) - Cung cấp các thiết lập để điều chỉnh nội dung chính của Widget.
  • Clickable - Điều khiển các vùng khác nhau mà Widget sử dụng.

Khi nhấn qua các tùy chọn, bạn sẽ nhận thấy nhiều điều thú vị về việc xây dựng các Theme này. Ví dụ, Theme jQuery UI tận dụng lợi thế của các Textures. Để xem cách sử dụng chúng, nhấn vào Header/Toolbar trong ThemeRoller. Sau đó nhấn chọn nút bấm có màu ở giữa. Một bảng Drop-down chứa các mẫu được chọn. Các mẫu Texture được chọn sẽ được kết hợp với màu nền mà bạn đã chọn để xuất ra mẫu sử dụng cho tiêu đề và thanh công cụ. Đây là một trong những cách sử dụng Texture. Cũng có những cách khác thông qua Theme jQuery UI. Ví dụ, thay đổi Texture trong "Clickable: default state" để thấy rằng những thay đổi đó ảnh hưởng đến các Button của Theme được chọn như thế nào.

Một tính năng thú vị của Theme jQuery UI là sử dụng các cách đánh dấu và báo lỗi (hay còn gọi là các dấu hiệu trực quan). ThemeRoller cung cấp các control hoàn chỉnh về các dấu hiệu trực quan này để hiển thị cho người dùng. Các Texture, màu nền, góc đường viền, màu chữ, và thậm chí màu của biểu tượng (icon) cũng có thể được thay đổi ( nếu một icon được hiển thị như là dấu hiệu). Tên của chúng được hiển thị trong ThemeRoller, vì thế bạn chỉ đơn giản sử dụng những tên này trong website của bạn để có nhiều kiểu hiển thị cho người dùng.

Việc thay đổi các thiết lập khác nhau cũng làm thay đổi đường dẫn URL trên trình duyệt của bạn. Liệt kê 6 cho thấy đường URL mẫu.

Liệt kê 6. Mẫu đường dẫn URL ThemeRoller
http://jqueryui.com/themeroller/#ffDefault=Segoe+UI%2C+Arial%2C+sans-serif&
   fwDefault=bold&fsDefault=1.1em&cornerRadius=8px&
   bgColorHeader=817865&bgTextureHeader=07_diagonals_medium.png&
   bgImgOpacityHeader=45&borderColorHeader=494437&fcHeader=ffffff&
   iconColorHeader=fadc7a&bgColorContent=feeebd&
   bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&
   borderColorContent=8e846b&fcContent=383838&iconColorContent=d19405&
   bgColorDefault=fece2f&bgTextureDefault=16_diagonal_maze.png&
   bgImgOpacityDefault=60&borderColorDefault=d19405&fcDefault=4c3000&
   iconColorDefault=3d3d3d&bgColorHover=ffdd57&bgTextureHover=12_gloss_wave.png
   &bgImgOpacityHover=70&borderColorHover=a45b13&fcHover=381f00&
   iconColorHover=bd7b00&bgColorActive=ffffff&bgTextureActive=05_inset_soft.png&
   bgImgOpacityActive=30&borderColorActive=655e4e&fcActive=0074c7&
   iconColorActive=eb990f&bgColorHighlight=f5d361&
   bgTextureHighlight=22_spotlight.png&bgImgOpacityHighlight=100&
   borderColorHighlight=ee5320&fcHighlight=1f1f1f&iconColorHighlight=ed9f26&
   bgColorError=d34d17&bgTextureError=07_diagonals_medium.png&
   bgImgOpacityError=20&borderColorError=ffb73d&fcError=ffffff&
   iconColorError=ffe180&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&
   bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&
   bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&
   thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&
   cornerRadiusShadow=8px

Bạn hãy lưu lại đường dẫn URL để sau này có thể quay lại và thay đổi các thiết lập. Ví dụ, sao chép đường dẫn URL mà bạn đã có những thay đổi và lưu nó vào một nơi lưu giữ an toàn. Bây giờ, bạn hãy đóng trình duyệt lại (hay trang tab trong trình duyệt mà đang mở trang ThemeRoller) and reopen it using the copied URL. As you can see, all of your modifications are back, ready for further modifications.


Kết luận

Chúng ta có thể thảo luận nhiều hơn về các thành phần cốt lõi của jQuery UI, nhưng bạn nên có những kiến thức nền tảng để bắt đầu với Theme jQuery UI. Bạn đã thấy cấu trúc các thư mục và file cho phép bạn chỉnh sửa Theme. Bạn có thể xem và sử dụng các file này như là điểm khởi đầu để tạo Theme cho chính mình khi bạn sẵn sãng.

Bài này mô tả tổng quan về ThemeRoller và các trang web liên quan hỗ trợ việc chỉnh sửa các Theme có sẵn cũng như tạo mới một Theme ngay từ đầu. Cuối cùng, bạn cũng đã khám phá quá trình lưu và khôi phục các thay đổi của Theme trên trang web ThemeRoller.

Tài nguyên

Học tập

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

Thảo luậ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ở, Công nghệ Java
ArticleID=936037
ArticleTitle=Sử dụng các chủ đề giao diện cho jQuery
publish-date=06302013