Học thiết kế web theo chuẩn. » jQuery http://www.izwebz.com You aren't just a visitor Thu, 23 May 2013 00:38:37 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 [Basic] Loading data with Jquery AJAX JSON in PHP http://www.izwebz.com/video-tutorials/jquery-video-tutorials/basic-loading-data-with-jquery-ajax-json-in-php/ http://www.izwebz.com/video-tutorials/jquery-video-tutorials/basic-loading-data-with-jquery-ajax-json-in-php/#comments Sun, 16 Dec 2012 15:13:31 +0000 Mr. Nav http://www.izwebz.com/?p=4582 Hôm nay chúng ta tiếp tục phần thứ 2 về Jquery AJAX JSON, trong bài hôm nay chúng ta sẽ làm quen kiểu dữ liệu JSON trong PHP.

Trong video này mình sẽ hướng dẫn các bạn chuyển đổi dạng dữ liệu string sang kiểu dữ liệu JSON trong PHP, sau đó mình sẽ làm một ví dụ nhỏ kết nối tới database để lấy dữ liệu đó và chuyển thành dạng JSON và cuối cùng mình sẽ sử dụng Jquery AJAX để load dữ liệu đó :)

]]> http://www.izwebz.com/video-tutorials/jquery-video-tutorials/basic-loading-data-with-jquery-ajax-json-in-php/feed/ 4 [Ajax phần 3] jQuery Ajax cơ bản http://www.izwebz.com/video-tutorials/jquery-video-tutorials/ajax-phan-3-jquery-ajax-co-ban/ http://www.izwebz.com/video-tutorials/jquery-video-tutorials/ajax-phan-3-jquery-ajax-co-ban/#comments Wed, 01 Aug 2012 13:43:02 +0000 KytoSai http://www.izwebz.com/?p=3886 Hôm nay mình xin gửi đến các bạn bài thứ 3 trong seri về ajax do mình thực hiện. Ban đầu mình định thực hiện thêm một vài bài như trang login,play nhạc bằng ajax thuần javascript nhưng có lẽ các bạn hứng thú nhiều hơn với jquery nên mình quyết định sẽ để sang phần jquery thực hiện các bài đó.

Ở bài thứ 3 này có nội dung như sau

- Khác nhau cơ bản giữa ajax thuần javascript và ajax với jquery ( chủ yếu là cú pháp của jquery ngắn gọn hơn )

- Giới thiệu bạn 3 cách viết ajax đơn giản bằng jquery ($.ajax,$.get,$.post)

]]> http://www.izwebz.com/video-tutorials/jquery-video-tutorials/ajax-phan-3-jquery-ajax-co-ban/feed/ 26 [Ajax phần 2] Ajax thuần javascript – Sử dụng phương thức POST http://www.izwebz.com/video-tutorials/jquery-video-tutorials/ajax-thuan-javascript-phan-2-su-dung-phuong-thuc-post/ http://www.izwebz.com/video-tutorials/jquery-video-tutorials/ajax-thuan-javascript-phan-2-su-dung-phuong-thuc-post/#comments Thu, 12 Jul 2012 03:34:03 +0000 KytoSai http://www.izwebz.com/?p=3779 Trong phần trước, chúng ta đã làm quen với tác giả mới của izwebz là Kyto Sai. Trong phần này, bạn ấy sẽ tiếp tục giới thiệu cho chúng ta về công nghệ ajax với Ajax thuần javascript – Sử dụng phương thức POST.

Sơ qua nội dung bài này:
1/ Hiển thị loading trước khi xuất kết quả
2/ Sử dụng form để xuất kết quả
3/ Khác nhau giữa POST và GET
4/ Giới thiệu kỹ hơn những điểm ở clip đầu tiên chưa giới thiệu

]]> http://www.izwebz.com/video-tutorials/jquery-video-tutorials/ajax-thuan-javascript-phan-2-su-dung-phuong-thuc-post/feed/ 32 [Ajax phần 1] Ajax thuần javascript http://www.izwebz.com/video-tutorials/jquery-video-tutorials/ajax-thuan-javascript-by-kytosai/ http://www.izwebz.com/video-tutorials/jquery-video-tutorials/ajax-thuan-javascript-by-kytosai/#comments Sat, 07 Jul 2012 13:54:37 +0000 KytoSai http://www.izwebz.com/?p=3763 Ajax thuật ngữ được viết tắt bởi Asynchronous JavaScript and XML và đây thực thực không phải là ngôn ngữ lập trình mới. Nhưng cách thức sử dụng của Ajax đem lại hiệu quả làm việc cao hơn nhờ việc có thể cập nhật một phần của trang web mà không phải load lại toàn bộ trang web.

Bài viết này được thực hiện bởi Kytosai.
Đây là video đầu tiên mình làm nên phải nói là vẫn còn rất run, đọc lóng ngóng, nên rất mong
các bạn thông cảm cho mình. ( và trình độ đọc tiếng anh mình rất kém, mình chỉ xem được tài liệu là chính )

Để tiện cho việc tiếp thu bài hướng dẫn các bạn nên biết PHP căn bản

Mình viết tuts này chủ yếu dựa vào tài liệu trên w3schools. Các bạn có thể vào đó để tham khảo thêm.

Mọi thắc mắc về tuts các bạn gửi vào comment bên dưới mình sẽ cố gắng dành thời gian trả lời cho các bạn. Rất mong các bạn ủng hộ mình sẽ tiếp tục thực hiện tiếp các phần sau của bài này nữa !

Các phần tiếp theo: Phần 2

]]> http://www.izwebz.com/video-tutorials/jquery-video-tutorials/ajax-thuan-javascript-by-kytosai/feed/ 33 Jquery lightbox http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-lightbox/ http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-lightbox/#comments Thu, 19 Apr 2012 12:31:44 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=3592 Hiện tại, có rất nhiều mã nguồn Jquery lightbox như Colorbox, Fancybox các bạn chỉ việc download về và làm theo hướng dẫn là có dc một lightbox đẹp. Tuy nhiên, có thể bạn chỉ làm theo mà ko hiểu được cách thức hoạt động của nó.

Lưu ý: Bài nảy chỉ hướng dẫn cho các bạn nguyên lý hoạt động của lightbox. Và còn phải xử lý rất nhiều để ko bị dính lỗi trong quá trình sử dụng. Bản thân mình cũng khuyên các bạn nên xử dụng các lightbox như Colorbox, Fancybox để đạt hiệu quả tối ưu nhất.

Trong bài trước thì có một số bạn gửi các đoạn code đã được edit, thêm khắc vài chi tiết để hoàn thiện thêm cho bài viết, mình rất hoan nghênh tinh thần của các bạn.
- Đầu tiên, đoạn code của bạn Mr.T: Download, đã chuyển về dạng DIV, và thêm vào nút previous.
- Đoạn code tiếp theo là của bạn Pantonio, đã dùng hàm animate để cho slider chạy mượt hơn: Download

——————UPDATE———————
Theo như một vài góp ý thì để đoạn code hoàn thiện hơn, tức khi thu nhỏ hay phóng to kích thước trình duyệt thì lightbox đều hiển thị giữa màng hình. Để làm được điều đó thì các bạn có thể chữa theo góp ý của bạn JimmyLin.
Thay vì

var wid = $("body").width();
var hei = $("body").height();

Thì mình thay body bằng window

var wid = $(window).width();//phải dùng  $(window) mới đúng
var hei = $(window).height();
]]> http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-lightbox/feed/ 29 Jquery images caption http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-images-caption/ http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-images-caption/#comments Wed, 11 Apr 2012 12:25:09 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=3590 Tiếp tục với bài trước, chúng ta đã dựng sẵn 1 layout bằng HTML5&CSS3 rồi, trong phần này chúng ta sẽ phát triển thêm và làm quen thêm một vài vấn đề mới trong Jquery.

Các function được sử dụng trong bài này, các bạn nên tham khảo thêm về Jquery căn bản nhé.

  • .hover()
  • .addClass()
  • .find()
  • .append()
  • .animate()

——————UPDATE———————
Theo như một vài góp ý thì để đoạn code hoàn thiện hơn, tức khi thu nhỏ hay phóng to kích thước trình duyệt thì lightbox, button đều hiển thị giữa màng hình. Để làm được điều đó thì các bạn có thể chữa theo góp ý của bạn JimmyLin.
Thay vì

var wid = $("body").width();
var hei = $("body").height();

Thì mình thay body bằng window

var wid = $(window).width();//phải dùng  $(window) mới đúng
var hei = $(window).height();
]]> http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-images-caption/feed/ 16 Slider with HTML5 – CSS3 & Jquery http://www.izwebz.com/video-tutorials/jquery-video-tutorials/slider-with-html5-css3-jquery/ http://www.izwebz.com/video-tutorials/jquery-video-tutorials/slider-with-html5-css3-jquery/#comments Thu, 05 Apr 2012 12:21:32 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=3587 Hôm nay thì chúng ta sẽ thay đổi không khí một chút nhé, trong bài này thì chúng ta sẽ tìm hiểu 1 chút gì đó về HTML5&CSS3 và một chút về Jquery.

Và bài này thì mình cũng yêu cầu các bạn cần phải xem qua các bài viết về Jquery của anh DW đã đăng. Đó là cơ sở để các bạn có thể tiếp thu được bài này.

]]> http://www.izwebz.com/video-tutorials/jquery-video-tutorials/slider-with-html5-css3-jquery/feed/ 40 jQuery Content Slider + WordPress http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-content-slider-wordpress/ http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-content-slider-wordpress/#comments Mon, 31 Jan 2011 03:42:34 +0000 Demon Warlock http://www.izwebz.com/?p=2739 Trước đây khi làm video Series về tạo theme cho WordPress tôi đã có bài hướng dẫn sử dụng jQuery Plugin LoopedSlider để tạo Content Slider cho WordPress. Phần vì trong bài đó tôi chỉ dùng nó cho trang chủ mà không phải dạng post, phần vì nhiều người vẫn yêu cầu làm thêm một video nữa về cách áp dụng jQuery Plugin.

Để có thể áp dụng được jQuery Plugin vào một trang web hiện có hoặc một Project nhất định. Bạn cần những kiến thức cơ bản về HTML, CSS và một chút về jQuery. Nếu bạn không biết gì về code, bạn cũng có thể dùng được Plugin nhưng khó khăn hơn nhiều. Điều quan trọng nhất khi áp dụng Plugin là xây dựng cấu trúc HTML sao cho giống với yêu cầu của Plugin và giữ nguyên những thành phần bắt buộc như Class hoặc ID.

Nivo Slider: Download Nivo Slider

]]> http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-content-slider-wordpress/feed/ 35 jQuery Accordion http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-accordion/ http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-accordion/#comments Mon, 06 Dec 2010 15:26:59 +0000 Demon Warlock http://www.izwebz.com/?p=2716 Trước đây tôi đã có một bài hướng dẫn tạo Accordion Navigation với jQuery và CSS, tuy nhiên phiên bản đó có một số mặt hạn chế. Do vậy trong video này, chúng ta sẽ khắc phục những mặt hạn chế đó.

Ở bài trước, tuy Accordion của chúng ta đã hoạt động được và có những chức năng cơ bản. Nhưng tôi không muốn chỉ giới hạn Accordion cho các dạng thanh di chuyển (tuy đa số là nó được dùng cho mục đích này), nó có thể áp dụng cho rất nhiều thứ khác.

]]> http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-accordion/feed/ 56 jQuery – Back to top Link http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-back-to-top-link/ http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-back-to-top-link/#comments Fri, 26 Nov 2010 04:48:17 +0000 Demon Warlock http://www.izwebz.com/?p=2708 Với những trang web có chiều cao lớn thì một nút bấm “Back to Top” cũng giúp người đọc tiết kiệm chút thời gian đỡ phải kéo lên trên cùng của trang. Với jQuery bạn có thể tạo ra nút “Back to top” rất thân thiện với người dùng. Nó chỉ xuất hiện khi cần thiết.

Trong bài này chúng ta cũng khám phá một khái niệm phổ biến trong thiết kế web hiện đại là Progressive Enhancement. Với những trình duyệt có JavaScript, thì nút sẽ xuất hiện, còn nếu JavaScript bị tắt thì nút của chúng ta cũng sẽ biến mất mà không làm người đọc nhầm lẫn.

]]> http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-back-to-top-link/feed/ 37