Livequery.js bổ sung cho jquery

Đây la 1 plugin của jquery được viết bởi Brandon Aaron voi chức năng sử dụng sức mạnh của bộ selector Jquery khởi tạo các sư kiện va gọi lại sau sự kiện cho cac yếu tố được đánh dấu một cách tự động ngay cả sau khi trang được load va cây DOM được updated ,yếu tố mới được tạo ra thông qua Ajax.
Các bạn download tại đây:https://github.com/brandonaaron/livequery/downloads
De de hieu hon chung ta cung di vao vi du cu the:

Ở ví dụ trên,chúng ta dùng jquery bình thường.Như các bạn thấy mỗi lần click vao thẻ a class="whatever" nó sẽ đưa ra cảnh báo alert('Olalalal').Tuy nhiên nếu bạn click vào thẻ a class="another" nó sẽ sinh thêm một thẻ a class="whatever",nhưng khi click vao thẻ a class="whatever" được sinh thêm này,nó không đưa ra cảnh báo alert('Olalalal');.Vậy các yếu tố DOM được updated ko chịu sự tác dụng của Jquery.
Nếu dùng cách khác:

Ở đây ta bọc sự kiện alert nằm trong sự kiên click có như vậy mới khởi động được sự kiện alert cho selector <a href="whee.html" class="whatever">Bork</a> mới tạo ra.Nhưng như thế thì alert chỉ xuất ra khi a.another được click.Quá phiền phức phải không các bạn,cách giải quyết đơn giản là sử dụng livequery():

Livequery sẽ tự động thêm sự kiện vào selector khi nó xuất hiện(được thêm vào).Vì thế bất kì a.whatever nào cho dù co từ trước hoặc thêm vào khi ta click vao đều đưa ra cảnh báo alert('Olalala')
Livequery co 3 cách dùng:

eventType:nhu click,hover.
eventHandler : function thuc thi khi su kien xay ra.

matchedFn:function duoc thuc thi khi yeu to moi duoc danh dau.

matchedFn:function duoc thuc thi khi yeu to moi duoc danh dau.
unmatchFn:function duoc thuc thi khi mot yeu to khong con duoc danh dau nua.
De stop livequery ta co 5 cach:

Cham dut livequery voi selector duoc chon.

Cham dut livequery voi selector duoc chon voi su kien eventType(giai thich o tren).

Cham dut livequery voi selector duoc chon voi su kien eventType va function dang thuc thi.

Cham dut livequery voi selector duoc chon voi function thuc thi khi yeu to moi duoc danh dau.

Cham dut livequery voi selector duoc chon voi cac function thuc thi khi yeu to moi duoc danh dau va khong con duoc danh dau.
Vi du:

Chúc các bạn học tập thật tốt với plugin tuyệt vời này.

Jquery :Tạo note với jquery

Hôm nay mình sẽ làm một cái note với jquery ,xem ra hình như nó chẳng có ứng dụng gì cả,chỉ là đẹp và là một cách thực tập với các hàm của jquery .

Các bạn có thể xem demo tại đây:

Slide to unclock với Jquery UI Draggable

Tạo hiệu ứng ấn tượng thanh trượt slide to unclock như Iphone trên trang web của bạn để giúp nó đầy phong cách hơn.Bạn có thể dùng hiệu ứng này thay cho nút đăng nhập hoặc thay cho nút next page chẳng hạn .Trông cực kì ấn tượng :
Đầu tiên là mã HTML:

Đơn giản là bạn nhúng jquery và jquery UI vào trang web.div id="well" sẽ là nơi chứa thanh trượt.Còn thẻ <span>slide to unlock</span> sẽ là thẻ trượt:
Mã javascript:


axis :"x" để cho thanh slide to unclock trượt theo chiều ngang(trục x).
if (ui.position.left > 550)
{
$("#well").fadeOut();
}
Khi vị trí của slide > 550 ta sẽ cho cả cái thanh chứa nó biến mất(dĩ nhiên là kể cả nó),trong
lệnh if này bạn có thể thêm một số code tùy chỉnh điều gì sẽ xảy ra tiếp theo khi slide thành công.
if (ui.position.left < 551) { $(this).animate({ left: 0 }) }
Nếu người dùng vẫn slide chưa tới thì dịch chuyển nó về vị trí cũ.
Thêm một chút style cho nó đẹp:

Jquery UI sortable() tạo tùy chọn trên trang web

Như các bạn thấy trên một vài CMS(như wordpress) ta chỉ cần thay đổi các ô là dữ liêu được lưu ,cách thức rất đơn giản là dùng jquery UI với hàm sortable() :jquery UI sortable
Với code sau:

Tại server,ở đây mình test trong kohanaframework ,mình echo ra kết quả nhận được :

Kết quả là mỗi lần kéo thả thay đổi thứ tự ta có được dữ liệu về vi trí đã thay đổi :

Tạo đánh giá với Jquery Raty

Đây là link trang web :http://wbotelhos.com/raty
Các bạn down về và đặt thành cây thư mục như hình vẽ:

File code chính là test4.html
Cách dùng rất đơn giản :
Bạn vào trong folder lib,mở file jquery.raty.js lên, kéo xuống cuối file có đoạn code:

Đây là giải thích các option của nó:
cancel : false // Creates a cancel button to cancel the rating.
cancelHint : 'Cancel this rating!' // The cancel's button hint.
cancelOff : 'cancel-off.png' // Icon used on active cancel.
cancelOn : 'cancel-on.png' // Icon used inactive cancel.
cancelPlace : 'left' // Cancel's button position.
click : undefined // Callback executed on rating click.
half : false // Enables half star selection.
halfShow : true // Enables half star display.
hints : ['bad', 'poor', 'regular', 'good', 'gorgeous'] // Hints used on each star.
iconRange : undefined // Object list with position and icon on and off to do a mixed icons.
mouseout : undefined // Callback executed on mouseout.
mouseover : undefined // Callback executed on mouseover.
noRatedMsg : 'Not rated yet!' // Hint for no rated elements when it's readOnly.
number : 5 // Number of stars that will be presented.
numberMax : 20 // Max of star the option number can creates.
path : '' // A global locate where the icon will be looked.
precision : false // Enables the selection of a precision score.
readOnly : false // Turns the rating read-only.
round : { down: .25, full: .6, up: .76 } // Included values attributes to do the score round math.
score : undefined // Initial rating.
scoreName : 'score' // Name of the hidden field that holds the score value.
single : false // Enables just a single star selection.
size : 16 // The size of the icons that will be used.
space : true // Puts space between the icons.
starHalf : 'star-half.png' // The name of the half star image.
starOff : 'star-off.png' // Name of the star image off.
starOn : 'star-on.png' // Name of the star image on.
target : undefined // Element selector where the score will be displayed.
targetFormat: '{score}' // Template to interpolate the score in.
targetKeep : false // If the last rating value will be keeped after mouseout.
targetText : '' // Default text setted on target.
targetType : 'hint' // Option to choose if target will receive hint o 'score' type.
width : undefined // Manually adjust the width for the project.
Các bạn đọc chắc cũng hiểu được chức năng của nó , chúng ta thêm vào chỗ path: '', thành lib/img ,tức nó sẽ liên quan tới file mà chúng ta code.
Bắt đầu nào:
Bạn cần 1 thẻ div có id="star":


Code toàn bộ sẽ là :

Muốn bắt đầu đánh giá ở vị trí mấy ta dùng:

Nếu bạn muốn đánh giá với giá trị tự động,các bạn dùng :
<div id="star" data-score="1"></div>
$('#star').raty({
score: function() {
return $(this).attr('data-score');
}
});
Như vậy mỗi khi bạn muốn đặt giá trị ,thay đổi giá trị đó,hoặc lấy giá trị đó, bạn chỉ cần thay đổi data-score= mấy thôi.
Ngoài ra còn có :
$('#star').raty({ number: 10 });
Mục đích để đặt số lượng sao.
$('#star').raty({ readOnly: true, score: 3 });
Dùng để áp dụng cho mục mà bạn muốn ngăn không cho mọi người vote nữa .Các bạn tư tìm hiểu thêm nhé.