RSSJquery

50 Kỹ thuật và bài học về jQuery

Sự đơn giản, các tính năng tiên tiến và sự hỗ trợ mạnh mẽ là những lập luận phổ biến đối với các developer ưu thích jQ

50 Kỹ thuật và bài học về jQuery

Sự đơn giản, các tính năng tiên tiến và sự hỗ trợ mạnh mẽ là những lập luận phổ biến đối với các developer ưu thích jQuery. Trong thực tế, jQuery là một trong những frameworks phổ biến nhất của JavaScript, với các công cụ mạnh mẽ có thể cải thiện đáng kể tương tác của người dùng với các ứng dụng Web. jQuery có một ưu thế bổ sung trong đó nó cho phép các developer lựa chọn các yếu tố trên một trang bằng cách sử dụng CSS – giống như syntax.Để giúp bạn cải thiện các kỹ năng, trong bài viết này chúng tôi giới thiệu 50 kỹ thuật và hướng dẫn jQuery mới, hữu ích đã được tạo ra gần đây và có thể tạo nên một bước tiến mới cho website của bạn.

50 Kỹ thuật jQuery hữu ích

Moving Boxes Carousel with jQuery
Các khái niệm được trình bày trong các bài hướng dẫn về carousel cổ điển là như nhau, vì vậy hướng dẫn này sẽ không đưa vào nhiều mã nguồn (source code). Sự khác biệt lớn ở đây là có các button để thay đổi các panels và các panels zoom.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Sliding Boxes and Captions with jQuery
Toàn bộ các hình ảnh động sliding box này hoạt động trong cùng một ý tưởng . Có một div tag (.boxgrid in my css) hoạt động như một cửa sổ (ở đó có hai item khác để bạn lựa chọn).

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery
Kỹ thuật này cung cấp một phương pháp đơn giản để tạo ra bar, line, area, và các pie charts từ một HTML table, và cho phép bạn tạo cấu hình chúng theo nhiều cách khác nhau.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Make a Mega Drop-Down Menu with jQuery
Vậy làm thế nào chúng ta thực hiện các Mega drop down menus? Thật tuyệt vời khi tất cả được thực hiện trong HTML và CSS tinh khiết. Có một vấn đề gây phiền phức là Internet Explorer 6, vì nó chỉ có các hỗ trợ: di chuột trên các yếu tố neo (anchor). Để thay thế, tôi đã nghĩ nhanh tới một giải pháp đó là sử dụng jQuery và các plugin rất tiện lợi gọi là hoverIntent.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Creating a Filterable Portfolio with jQuery
Trong hướng dẫn này, tôi sẽ chỉ bạn cách làm cho ” filtering by category ” thú vị hơn một chút với jQuery.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

A fancy Apple.com-style search suggestion
“Ví dụ này sử dụng một số kỹ thuật: MySQL (đối với cơ sở dữ liệu), HTML / CSS để tạo kiểu dáng, PHP để lấy dữ liệu và jQuery đối với yêu cầu AJAX. Bạn cần một số kiến thức cơ bản về các kỹ thuật này để có thể hiểu thấu đáo được hướng dẫn này. ”

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Current Field Highlighting
Về vấn đề về tính tiện dụng và thẩm mỹ, một ý hay là add một vài loại feedback (thông tin phản hồi) trực quan trên các web form để chỉ ra phạm vi đang hoạt động (hay “focused“). Trong hướng dẫn này, chúng tôi sẽ cải thiện lĩnh vực hiện tại đang được nhấn mạnh, sử dụng jQuery.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Creating a Dynamic Poll with jQuery and PHP
“Khi bạn kết hợp một số chức năng rõ ràng, lịch sự của PHP với chức năng thông minh của jQuery bạn có thể tạo ra một số kết quả khá cool. Trong hướng dẫn này chúng tôi sẽ tạo một bản thăm dò bằng cách sử dụng PHP và XHTML, cùng với việc tận dụng một số hiệu ứng Ajax jQuery để loại bỏ sự cần thiết đối với việc làm mới trang, và đưa vào những hình ảnh động xinh đẹp. ”

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

jQuery Infinite Carousel
screencast này giải thích cách bạn có thể tạo một scrolling carousel đơn giản, đẹp mắt và làm thế nào có thể làm cho nó tự động móc lại với nhau thành một vòng tròn. Xem Automatic Infinite Carousel.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

De-Constructing Accordion and Hover Effects with jQuery
Video hướng dẫn này giải thích cách thức di chuột và các hiệu ứng accordion trên Tim Van Damme’s site. Trang web này đã làm được như vậy bằng cách sử dụng jQuery.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Better form submission feedback with jQuery
Các trình duyệt quên cung cấp cho người dùng feedback (thông tin phản hồi) hiệu quả khi người dùng đăng ký form. Người dùng phản ứng lại bằng cách nhấn vào button đăng ký nhiều lần. Vấn đề phức tạp xảy ra là khi người dùng nhận ra họ đã bị tính phí 5 lần hoặc khi bạn nhận được 5 lần liên hệ đăng ký. Giải pháp được đưa ra: Thay thế button đăng ký bằng một tin nhắn thân thiện cho phép người sử dụng biết form của họ đang hoạt động.
How to Make a Threadless Style T-Shirt Gallery
Có một hình ảnh thu nhỏ trong một hình ảnh có kích thước đầy đủ trong một container div, và có một cái nhỏ hơn so với hình ảnh có kích thước đầy đủ. hình ảnh này được căn chính giữa, nhưng không hiển thị hoàn toàn vì overflow (tràn bộ nhớ): hidden được bật lên. Khi di chuột lên hình ảnh thu nhỏ, overflow : hidden bị tắt, và toàn bộ hình ảnh được hiển thị.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Create a gallery by using z-index and jQuery
Trong hướng dẫn này bạn sẽ học cách kết hợp thuộc tính ‘z-index’ CSS và công suất của jQuery để tạo ra một thư viện độc đáo với sự xuất hiện của rất nhiều các bức ảnh. Ngoài ra, hãy kiểm tra Enhancing the z-index Gallery with a Preloader.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Add a favicon near external links with jQuery
Các đường link bên ngoài phải luôn được đánh dấu rõ ràng để làm cho người đọc dễ dàng nhìn thấy chúng. Bạn cần add một CSS class để toàn bộ các đường link nổi bật bằng cách sử dụng pseudo-class a[href^=http]. Một giải pháp năng động hơn là sử dụng các favicon.ico của trang web bên ngoài, tất nhiên là nếu nó có sẵn.
Scrollable Timelines
Sử dụng overflow và thuộc tính scrollLeft DOM để cuộn các yếu tố là hiệu quả hơn nhiều so với sử dụng CPU, ngược lại, sinh động hơn bằng cách sử dụng CSS top / left. Hướng dẫn này chứng minh cùng một hiệu ứng được sử dụng trong hai cách hoàn toàn khác nhau.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Automatically generate table of contents using jQuery
Hướng dẫn này sẽ chỉ cho bạn cách để tạo ra TOC như vậy chỉ trong một vài dòng (lines) code.
Reddit-style Voting With PHP, MySQL And jQuery
Hướng dẫn này sẽ chỉ cho bạn cách để tạo ra voting system (hệ thống bầu chọn) với jQuery, PHP và MySQL.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Making a Content Slider with jQuery UI
Trong hướng dẫn này chúng ta sẽ được sử dụng jQuery UI slider widget để tạo ra một content slider hấp dẫn và thiết thực. Chúng ta sẽ có một container, trong đó có hàng loạt các yếu tố. Mỗi cái chứa các block of content khác nhau. Sẽ có quá nhiều các yếu tố này hiển thị cùng một lúc, vì vậy chúng ta có thể sử dụng slider để di chuyển các content blocks khác vào trong và ra ngoài tầm nhìn.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

BBC Radio 1 Zoom Tabs
Hướng dẫn này giải thích làm thế nào để đạt được hiệu ứng mới nhất trên BBC Radio 1 website

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP
Đây là một hướng dẫn chi tiết về việc tạo ra một thẻ mua hàng Ajaxed (Ajaxed shopping cart) kín đáo bằng cách sử dụng jQuery Ajaxed & PHP

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Create a Digg-style post sharing tool with jQuery
Chúng tôi sẽ làm một digg-style post chia sẻ toolbox. Nó khá là dễ hiểu. Nếu bạn xem html source code của Digg, nó có sharebox html code trong mỗi bài viết riêng. Nhưng, trong hướng dẫn này chúng tôi chỉ có một sharebox, và toàn bộ các đường link được phân chia theo cùng một mẫu.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Using jQuery to play Media Files (MP3,WMA,etc,etc)
Tôi sẽ chỉ cho bạn cách hiệu quả nhất (tôi đoán bạn có thể nói như vậy) về việc thử với một MP3 (Bạn cũng có thể sử dụng WMA, và sắp xếp sự lựa chọn) trên trang web của bạn.
Easy Retweet Button
Kể từ khi tôi thấy Bit.ly JavaScript API Tôi đã muốn xây dựng một script đơn giản để theo dõi số lượng người truy cập vào blog post từ Twitter. Cuối tuần qua tôi đã xây dựng một script nhỏ để thực hiện điều đó – và trong một cách thức hoàn toàn kín đáo. Script này hoàn toàn độc lập. Thêm nữa, vì có HTML, CSS, và JavaScript, nó hoàn toàn theo chủ đề và tùy biến theo phong cách trang web của bạn.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Create an amazing music player using mouse gestures & hotkeys in jQuery
Chúng tôi sẽ tạo ra một máy nghe nhạc tuyệt vời được mã hóa trong xHTML & jQuery. Bạn có thể Click & Drag chuột để tương tác với giao diện của máy nghe nhạc hoặc sử dụng keys & spacebar định hướng thay vì chuột.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Creating a Virtual jQuery Keyboard
Hướng dẫn này sẽ giải thích làm thế nào chúng ta có thể thực hiện một bàn phím ảo đơn giản với một vài sự giúp đỡ (well, okay, lots of!) từ jQuery!

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

jQuery Feed Menus

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Automated image preloading for a snappy UI
Chúng tôi phát triển một giải pháp tự động hóa nhiệm vụ lâu đời của các hình ảnh preloading trong các ứng dụng web. Nó sử dụng javascript và được đóng gói như là một jQuery plugin.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Quick Tip: Resizing Images Based On Browser Window Size
Trong các fluid layouts dễ dàng định dạng text khi window được thay đổi kích cỡ, nhưng những hình ảnh lại không fluid-friendly. Mẹo này chỉ cho bạn cách làm thế nào để hoán đổi giữa hai kích cỡ hình ảnh dựa trên kích thước hiện tại của trình duyệt, div,… Để được nhìn thấy ví dụ thật sự sống động, Last.fm sử dụng kỹ thuật này trên các trang dành cho các nghệ sĩ của họ.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Exactly Twitter like Follow and Remove buttons with jQuery and Ajax
Bài đăng này được cập nhật từ exactly Twitter like follow and remove buttons với hiệu ứng fadeOut và fadeIn.

Using Form Labels as Input Values with jQuery and CSS
Bằng cách sử dụng jQuery để mang label vào trong form có thể giữ hiệu ứng như mong muốn mà không tác động đến khả năng truy cập. Sau đó chúng tôi có thể tiến thêm một bước bằng cách add một class năng động cho đầu vào (input) và sử dụng CSS để tạo kiểu dáng cho form chỉ khi JavaScript được kích hoạt. Search box (Ô tìm kiếm) ở trên cùng của trang này là một ví dụ của kỹ thuật này.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Pretty checkboxes with jQuery

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

jQuery and Ajax Best Demos Part-2
Một danh sách nhỏ về của jQuery và Ajax demos.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

A jQuery inline form validation, because validation is a mess Të Position Absolute
Khi nói đến sự xác nhận form, thật khó để có một giải pháp linh hoạt hoạt động với mọi form. Tìm ra cách làm thế nào để hiển thị lỗi không phải là một nhiệm vụ đơn giản. Đây là những gì mà tôi đã cố gắng để khắc phục với script này. Khi xuất hiện một lỗi cần phải được hiển thị, thì script tạo ra một div và bố trí nó ở góc trên bên phải của input. Bằng cách này bạn không phải lo lắng về hình thức cấu trúc HTML form của bạn.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

How to create a sliding image/reveal content with jquery
Một vài người đã hỏi tôi về hiệu ứng này. Và tôi nghĩ rằng tôi nên làm một hướng dẫn về nó.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

The youlove.us scrolling background effect explained
Kỹ thuật này thực sự là đơn giản hơn rất nhiều: Việc scrolling vòng quanh một gradient image rất cao đằng sau một số hình ảnh PNG trong suốt. Header image (với logo, strapline và máy tính xách tay) có một background trong suốt và một text vững chắc, trong khi trang chính là một hình ảnh với tiêu đề text như các con dao cắt trong suốt.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Creating a Keyboard with CSS and jQuery
Tôi nghĩ rằng thật tốt khi có thể tạo ra một bàn phím trực tuyến với CSS, và sau đó làm cho nó hoạt động với jQuery. bàn phím này bao gồm các chìa khóa “action” (caps lock, shift,và delete) thay đổi bàn phím một cách năng động khi nhấp vào. Bây giờ, Tôi sẽ chỉ cho bạn cách xây dựng nó.
Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Portfolio Layout Idea Using jQuery

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Creating the iPhone unlock screen using xHTML, CSS and jQuery
IPhone: Mọi người đều biết nó là gì, nhiều người “played around” với các tiện ích và hầu hết mọi người đều thích nó. Tôi cũng sở hữu một trong những smartphones (điện thoại thông minh) tuyệt vời, các phong cách của phần mềm thực sự, thực sự có kiểu dáng rất đẹp và sáng tạo (Cũng giống như chúng ta đang được sử dụng Apple). Tôi muốn chuyển (một số) các thiết kế tuyệt vời này vào trong một webpage để tái tạo cùng một phong cách và cùng một cảm nhận cho các webbrowser. Hôm nay, tôi sẽ cho bạn thấy làm thế nào để tạo ra The iPhone unlock screen (mở khóa màn hình) trong xHTML, CSS và jQuery.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

jQuery File Tree
jQuery File Tree có một cấu hình, AJAX file browser plugin cho jQuery. Bạn có thể tạo một file tree tùy biến đầy đủ tương tác với ít nhất là một dòng (line) code của JavaScript.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Create an Amazon Books Widget with jQuery and XML
Với JavaScript tùy thích và jQuery huyền diệu bạn có thể tạo ra một số widget thú vị. Một cách tốt để chứng minh chức năng này là bằng cách xây dựng Amazon.com books widget.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table
Tôi thích bảng giá của Crazy Egg trên trang Pricing & Signup của họ. Khi bạn click vào “Sign Up” cho một option, column của sơ đồ nổi lên, và xuất hiện một form đăng ký. Tôi muốn thử và tại tạo từng bước cách xử lý này, và phân chia năng suất của việc kết hợp CSS, JavaScript, và các hình ảnh theo những cách khéo léo.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Make Your Header Responses To Mouse Movements with jParallax
jParallax sắp xếp một yếu tố được lựa chọn vào một cửa sổ, hoặc khung nhìn (viewport), và toàn bộ những sản phẩm của nó vào trong các layer có thể được nhìn thấy thông qua viewport.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Submit multiple forms with jQuery and Ajax.
Làm thế nào để đăng ký nhiều form với jQuery và ajax.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Using jQuery To Manipulate and Filter Data
Khi trang web được thiết kế để hiển thị bảng dữ liệu lớn, nên dành sự quan tâm, chú ý để cho cho phép người dùng lựa chọn thông qua dữ liệu này trong một phương pháp có cấu trúc. Trong bài này, tôi sẽ đi qua bốn kỹ thuật: các hiệu ứng di chuột, zebra rows, filtering (lọc), và sorting (phân loại).

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Building a jQuery Image Scroller
Trong hướng dẫn này, chúng ta sẽ xây dựng image scroller (hình ảnh cuộn), sử dụng các tính năng hoạt hình tuyệt vời của jQuery và sự vui vẻ với code. Tất nhiên Image scrollers không phải là một điều gì mới mẻ; các phiên bản của chúng tồn tại từ lâu. Tuy nhiên, có rất nhiều người mới bắt đầu sử dụng chúng. thông thường khi muốn nội dung đang hiển thị thay đổi, người truy cập phải bấm vào một button hoặc thực hiện một số hành động khác, nhưng Scroller này sẽ khác biệt ở chỗ nó sẽ hoàn toàn tự động và sẽ bắt đầu scrolling khi load trang.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Horizontal Scroll Menu with jQuery Tutorial
Trong hướng dẫn này bạn sẽ học cách để tạo ra một scroll menu (menu cuộn). Sản phẩm được tạo ra là bạn sẽ có thể scroll lên và xuống theo chuột – theo trục tung và chúng tôi sẽ sử dụng jQuery.color để tạo hiệu ứng biến đổi của background-color.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

SpriteMenu
Đây là một phương pháp đưa vào cùng một menu xinh đẹp bằng một cách rất nhanh chóng và dễ dàng, Sử dụng một kỹ thuật được gọi là CSS sprites.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Slicker Show and Hide

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

jMar

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

web2ajax
Facebook cũng giống như – jQuery và autosuggest Search Engine

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

“Outside the Box” Navigation with jQuery

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Animate Image Filling Up Using jQuery

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Sexy Drop Down Menu w/ jQuery & CSS
Các nghiên cứu cho thấy navigations xếp hàng top có xu hướng gây được sự chú ý nhiều nhất khi người dùng truy cập vào trang web lần đầu tiên. Một navigation có tổ chức và trực quan là quan trong× và trong khi hầu hết các drop down menus có thể mang tính thẩm mỹ hơn, hãy phát triển chúng để làm giảm gracefully cũng là một điều rất cần thiết. Trong hướng dẫn này tôi muốn xem qua cách làm thế nào để tạo ra một sexy drop down menu mà cũng có thể làm giảm gracefully.

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Creating a polaroid photo viewer with CSS3 and jQuery
Bằng cách kết hợp CSS3 Box Shadow và các đặc tính Rotate, hiệu ứng này tạo ra một cách tương đối dễ dàng. Khi drag một polaroid xung quanh, bạn sẽ nhìn thấy shadow. Khi nó được đặt xuống, nó quay sang trái hoặc bên phải (ngẫu nhiên).

Hướng dẫn: 50 Kỹ Thuật và Bài Học về jQuery

Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.
Add một đường link outbound (đi ra nước ngoài) theo dõi một trang web mới hoặc một trang đang tồn tại. Miễn là các đường link của bạn tới các trang web khác có thiết lập thuộc tính REL, bạn có thể theo dõi chúng rất dễ dàng với sự giúp đỡ của jQuery.

Theo Smashing Magazine

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu