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:

Hàm apply() ,call() ,bind() và thuộc tính arguments,length,caller trong javascript

Đây là những hàm cũng ít người quan tâm tới ,tuy nhiên nếu nghiên cứu sâu nó sẽ giúp ích rất nhiều cho bạn đó:
Hàm call() dùng để gọi một method trong một object và các object thay thế cho object hiện hành ,với các tham số thông qua .
Cú pháp :
call([thisObj[, arg1[, arg2[, [, argN]]]]])
thisObj: Object được dùng như object hiện hành.Nếu để trống nó sẽ lấy Object global thay thế.
arg các tham số thông qua.

Một ví dụ dễ hiều :

Kết quả là đầu tiên nó sẽ đưa alert(10) bởi vì đối tượng thí trong function f() sẽ trỏ đối tượng global,lúc này x=10 sẽ được gọi ,sau đó sẽ alert(15) vì ta đã khởi động hàm f() với object o lúc này this sẽ trỏ tới o nên this.x=15.

_ Hàm apply()chức năng giống như hàm call() ,khác biệt là apply() yêu cầu tham số thứ hai phải là một mảng .
Một ví dụ dễ hiểu nhất:


Như bạn thấy đầu tiên nó sẽ gọi hàm g và thông qua các giá trị object,func,args.func lúc này sẽ là f1,giá trị thông qua sẽ là một mảng có 1 phần tử ["the value of x = "].Lúc này hàm f1 sẽ đựơc gọi thông qua apply() .Vì ta có thông qua o={x:15} là object nên tới function f1 ,this.x đươc hiểu như là object của o ,kết quả là :the value of x =15
Cũng tương tự vậy,chỉ khác là cách gọi thứ 2 thông qua mảng 2 phần tử,vậy f2 cần có 2 biến.Giá trị trả lại sẽ là: the value of x squared = 255 Wow!.
Hàm apply() trông có vẻ hiêu quả hơn trong nhiều trường hợp.


_Thuộc tính arguments dùng lấy tham số của object function thực thi nó :
Ví dụ:


Nó chỉ alert(H) vì hàm chỉ thông qua 1 tham số,nên nó sẽ lấy arguments[0]lúc này là H.
Tiếp theo:

Lúc này nó sẽ in ra Hello ,vì lúc đó mình nạo vét hết toàn bộ tham số đầu vào để nối chúng lại.

Thuộc tính length để xác định sô lương tham số thông qua một hàm :
Ví dụ:

Nó sẽ ra : Expected Arguments: 2
Passed Arguments: 2


Hàm bind() dùng để tạo hàm ràng buộc ,sao chép lại thân của hàm được gán.
Cú pháp:

function: là hàm cần sao chép.
thisArg là object sẽ gán tới this cho hàm sao chép .
arg : các tham số thông qua.
Ví dụ:

Kết quả là true.


Thuộc tính caller dùng để lấy tên hàm nào đã khởi động hàm này.
Ví dụ:

Nó sẽ in ra function writesub() { write(); } tức là sẽ in ra toàn bộ function đã khởi động nó.
Nếu caller đựơc đặt trong function hoạt động độc lập ,ko có hàm nào goi nó,thì nó đang ở top level of a JavaScript program ,caller lúc này sẽ trả lại null.
Ví dụ:

Nó sẽ in ra:CallLevel was called from the top level.

Code thần tốc với Texter

Với chức năng lưu các đoạn text code ,paste nhanh chóng những gì ta đã code trước đó.Nó là một phần mềm không thể thiếu với dân code.
Hãy download phần mềm :Texter
Chức năng có 2 dạng text và script:
_Với text:
<a href="%c">%|</a> :%c sẽ được thay thể bởi những gì mình đã copy vào trong clipboard.%| sẽ là nơi đặt trỏ chuột
%ds sẽ trả lại thời gian theo hình thức 3/9/2007.
%dl sẽ trả lại thời gian theo hình thức Friday, March 09, 2007.
%t sẽ trả lại thời gian theo hình thức 1:30 PM.
_Với script :
{Tab}, {Enter}, {Up}, {Down}, {Left}, {Right},{Backspace} sẽ giúp ta gõ các phím đó
# Windows key
! Alt key
^ Control key
+ Shift key
Ví dụ: +!{Down} thì nó sẽ gõ shift rồi đến alt rồi đến phím xuống.

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:

Thuộc tính box-flex trong CSS3

Thuộc tính box-flex dùng để xác định yếu tố con của box có thể được linh động điều chỉnh hay không
Ví dụ:
Với code :

thì div màu xanh sẽ chiếm 2 phần trong tổng số (2+1+3) độ rộng của yếu tố mẹ chứa nó.
div màu đỏ sẽ chiếm 1 phần trong tổng số (2+1+3) độ rộng của yếu tố mẹ chứa nó.
div màu vàng sẽ chiếm 3 phần trong tổng số (2+1+3) độ rộng của yếu tố mẹ chứa nó.

Resume download trong PHP

Khi bắt người xem phải download những file dung lượng lơn như mp3,mp4,audio thì ta cần làm download có thể resume(tức là tiếp tục download phần còn lại sau khi bị ngắt).Sau đây là một số cách giúp bạn làm điều đó :


Ý tưởng của hàm trên là gì ?
Đó chính là server của bạn có hỗ trợ BYTE RANGE HTTP REQUEST không.Bạn có thể check thông qua isset($_SERVER['HTTP_RANGE'].Nó kiểu giúp bạn kiểm soát chuyển dữ liệu theo byte.
Ví dụ về Range: header with the bytes parameter

_Nếu chuyển 500 bytes đầu tiên

Range: bytes=0-499

_500 bytes tiếp theo:

Range: bytes=500-999

_Tất cả các byte trừ 500 bytes đầu tiên:

Range: bytes=500-

_500 byte cuối của tài liệu:

Range: bytes=-500

_Two separate ranges:

Range: bytes=50-99,200-249

_The first 100 bytes, 1000 bytes starting from the byte number 500,
and the remainder of the document starting from byte number 4000
(byte numbering starts from zero):

Range: bytes=0-99,500-1499,4000-

_The first 100 bytes, 1000 bytes starting from the byte number 500,
and the last 200 bytes of the document:

Range: bytes=0-99,500-1499,-200



_Biến $partial_content cho ta biết server có hỗ trợ resume không.
_Biến $offset sẽ lưu lại lượng byte mà ta đã download được,khi resume lại biến $length sẽ lưu độ dài download của lần tiếp theo

Ngoài ra còn có các script sau :


Hoặc(Link):

Hoặc(Link):

cURL : Kiểm tra sự tồn tại của một URL


<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "Day la url bạn chen");
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$data = curl_exec($ch);
curl_close($ch)
echo $data;
?>

Ví dụ tôi chèn url http://phanngoc123.blogspot.com/thì nó sẽ ra :

HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Expires: Sat, 09 Mar 2013 03:07:50 GMT Date: Sat, 09 Mar 2013 03:07:50 GMT Cache-Control: private, max-age=0 Last-Modified: Sat, 09 Mar 2013 03:04:06 GMT ETag: "209493d7-3d6d-43b4-88fa-9e94f523da1b" X-Content-Type-Options: nosniff X-XSS-Protection: 1; mode=block Content-Length: 0 Server: GSE

Bạn sẽ thấy nó vẫn hoạt động vì có rất nhiều thông số liên quan,nếu bạn chèn một URL đã chết nó sẽ chẳng ra gì cả hoặc thông báo Connection:Close

CURLOPT_RETURNTRANSFER Nếu đặt true sẽ trả lại output(dữ liệu từ hàm curl_exec()) như string thay cho việc xuất trực tiếp ra màn hình .

Server download speed using PHP cURL

Trong đó curl_getinfo ( resource $ch [, int $opt = 0 ] ) dùng để lấy thấy thông tin từ lượt chuyển dữ liệu xác định.Đây là các option trả lại của nó:
If opt is given, returns its value as a string. Otherwise, returns an associative array with the following elements (which correspond to opt), or FALSE on failure:
"url"
"content_type"
"http_code"
"header_size"
"request_size"
"filetime"
"ssl_verify_result"
"redirect_count"
"total_time"
"namelookup_time"
"connect_time"
"pretransfer_time"
"size_upload"
"size_download"
"speed_download"
"speed_upload"
"download_content_length"
"upload_content_length"
"starttransfer_time"
"redirect_time"
"certinfo"
"request_header"


Thời gian thực thi request chính là thời gian download.Kết quả là:


Downloaded 6576848 bytes in 16.2153 seconds.
Which is 3.0944 mbps
CURL said 3.0755 mbps


curl_getinfo() said:
---------------------------------------------------------------------------------------------
url http://download.bethere.co.uk/images/61859740_3c0c5dbc30_o.jpg
content_type image/jpeg
http_code 200
header_size 263
request_size 198
filetime -1
ssl_verify_result 0
redirect_count 0
total_time 16.314966
namelookup_time 0.000287
connect_time 0.021524
pretransfer_time 0.021595
size_upload 0
size_download 6576848
speed_download 403117
speed_upload 0
download_content_length 6576848
upload_content_length 0
starttransfer_time 0.056275
redirect_time 0

Class giới hạn tốc độ download trong PHP

Điểm mấu chốt của class này chính là hàm usleep(int time) .Hàm này có chức năng trì hoãn thực thi chương trình trong time là số microsecond (1/1000 s).

Mã hóa mã html để hiện code trên blog.

Để hiện code html hoặc javascript trên blog ta cần mã hóa các kí tự đặc biệt để trình duyệt hiểu được những gì mình muốn hiện :
Với mã javascript sau:

Nhập mã html cần mã hoá :



Kết quả mã hoá :

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 :

Sử dụng thư viện Zendframework 2.1 trong Codeignter

Cách làm cũng tương tự trong kohanaframework,vì CI cũng không hỗ trợ autoload bằng namespace :

Trong thư mục library tạo file Auto.php rồi paste đoạn code này vào :

Bây giờ muốn dùng trong controller nào thì chỉ cần :

Và muốn dùng thư viện nào thì ta ghi giống như Kohana hay fuelphp vậy.

Chúc các bạn thành công !.
Zend2 trong Codeignter

Sử dụng thư viện Zend2.1 trong fuelphp framework

Trong fuelphp thì đơn giản hơn nhiều,vì trong fuelphp đã hình thành autoload theo namespace.Cách làm rất đơn giản:

Copy folder Zend vào thư mục package trong fuel.Tạo thư mục classes trong thư mục Zend.Di chuyển hết những gì trong thư mục Zend vào thư mục classes.Tạo file bootstrap.php trong thư mục Zend và paste đoạn code này vào :

Trong controller muốn dùng class của Zend (ví dụ dùng Json để encode chẳng hạn),thì ta đặt code sau:

Chúc các bạn thành công !

Unzip file dùng PHP

Cách dùng rất đơn giản :

Mọi người góp ý nhe .

Validate hình thức date trong PHP

Code này sẽ check sự hợp lệ của hình thức YYYY-MM-DD

Code validate email trong PHP

Một đoạn code rất hiểu quả,nó cũng được dùng bởi nhiều framework phổ biến hiện nay:

Hoặc trong PHP5 bạn có thể sử dụng hàm filter_var :

if (filter_var($email, FILTER_VALIDATE_EMAIL) !== false) {
// $email contains a valid email
}

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é.

Dùng thư viện Zend2.1 trong Kohana framework

Đây là code do mình tự làm (chỉnh sửa từ fuelphp):

Cách dùng rất đơn giản,trong thư mục classes của application tạo file Auto.php rồi paste đoạn code này vào:


<?php
class Auto {
public static $ext;
public static function register($ext1)
{
static::$ext = $ext1;
spl_autoload_register('Auto::load', true, true);
}
public static function load($class)
{
// deal with funny is_callable('static::classname') side-effect
if (strpos($class, 'static::') === 0)
{
// is called from within the class, so it's already loaded
return true;
}

$loaded = false;
$class = ltrim($class, '\\');

$path = static::$ext.static::class_to_path($class);

if (file_exists($path))
{
include $path;
$loaded = true;
}

return $loaded;
}
protected static function class_to_path($class, $psr = false)
{
$file = '';
if ($last_ns_pos = strripos($class, '\\'))
{
$namespace = substr($class, 0, $last_ns_pos);
$class = substr($class, $last_ns_pos + 1);
$file = str_replace('\\',DIRECTORY_SEPARATOR, $namespace).DIRECTORY_SEPARATOR;
}
$file .= str_replace('_', DIRECTORY_SEPARATOR, $class).'.php';
if ( ! $psr)
{
$file = strtolower($file);
}

return $file;
}

}
?>



Trước khi bạn muốn load 1 class bạn chỉ cần thêm vào :


Auto::register('ten_folder_chua_thu_vien_do');

Ví dụ:

Bạn muốn sủ dụng thư viện Zend2.1,down thư mục Zend bỏ vào trong folder vendor trong application.Trong Controller trước khi bạn muốn dùng 1 class nào của Zend ,bạn chỉ cần viết:


Auto::register(APPPATH.'vendor/');
$content = array(
'author' => 'Steve',
'categories' => array(
'PHP', 'Zend', 'JavaScript'
)
);
$json = \Zend\Json\Json::encode($content);
var_dump($json);

Nếu bạn thấy mảng trong $content biến thành chuỗi json là bạn đã thành công rồi đó

Các bạn góp ý nhe.