Note: Updated March 16th, 06′. Fixed padding issue so right padding is correctly applied to the scroller.
Description: As its name suggests, this is a up-down scroller that pauses between each message! The look of the scroller is completely styled using external CSS, including the dimensions. Easily create a single line scroller just by adjusting the scroller’s height appropriately!
Demo:
Vừa rồi có đọc trên Xã Luận thấy bài viết mã hóa Html bằng javascript . Thấy hay và cũng sợ biết đâu lúc cần thì trên Xã Luận lại không còn nữa nên cứ post lên đây coi như thêm 1 chỗ để mọi người download nhỡ 1 source ở đâu đó bị die thì cũng có thể vào đây download được
Mã nguồn được lấy từ xaluan.com
Khi mà nhiều nhà phát triển chấp nhận phát triển kiểu AJAX để tạo ra các ứng dụng tương tác mạnh hơn, họ sẽ tìm các công cụ giúp đơn giản hóa cho công việc của mình.
jQuery là một công cụ như thế, một số người dùng nói rằng nó giúp tạo dự án phát triển AJAX (XML và JavaScript không đồng bộ) gọn hơn nhờ việc sử dụng JavaScript dễ dàng hơn mặc dù JavaScript nổi tiếng là khó làm việc cùng – một nhóm chuyên gia phát biểu tại cộng đồng Lang.Net của Microsoft hồi đầu tháng 8, tổ chức ở Redmond, Washington.
» Read more: jQuery giúp việc phát triển AJAX, JavaScript dễ dàng hơn
1. Căn bản
Để làm quen với jQuery, trước tiên, bạn nên tạo một file html với nội dung như sau:
<html>
<head>
<script type=”text/javascript” src=”path/to/jquery.js”></script>
<script type=”text/javascript”> // <font color=”#ff0000″>(*)</font> </script>
</head> <body><a href=”http://jquery.com/”>jQuery</a>
</body>
</html>
Bạn cần điều chỉnh lại src (nguồn) của file jquery.js. Thí dụ, nếu như file jquery.js bạn đặt cùng thư mục với file html bạn vừa bạn, source sẽ giống như sau:
<script type=”text/javascript” src=”jquery.js”></script>
Bạn có thể tải về file jquery.js ở [1]
1.1. Chạy code khi tài liệu sẵn sàng
Theo cách viết javascript thông thường, coder đặt code muốn brower xử lý tương tự như sau:
window.onload = function(){ // Your code here}
Khi sử dụng jQuery, chúng ta sẽ làm việc tương tự bằng cách sau:
$(document).ready(function(){ // <font color=”#ff0000″>(**)</font>});
Chú ý: Từ nay, tôi gọi vùng (**) ở đoạn code trên là vùng js chính.
Sử dụng jq, bạn sẽ thấy quen thuộc với cách viết code này. Bây giờ, bạn hãy đặt đoạn code trên vào phần (*) trong file html hiện thời của bạn.
Thêm thuộc tính onclick
Bạn thêm đoạn HTML sau vào giữa thẻ body của file html hiện thời để hiển thị một liên kết
<a href=”http://pcworld.com.vn”>Hello world</a>
Đoạn code js sau vào phần (**) để thêm thuộc tính onclick cho các thẻ “a”
$(”a”).click(function(){ alert(”Hello! How are you ?”);});
Khi click vào liên kết ở trong trang web, trình duyệt sẽ hiển thị bảng thông báo “Cảm ơn đã ghé thăm!”. Bạn có thể thêm thuộc tính onclick này cho bất kỳ thẻ nào trong trang web của mình.
Thủ thuật
Thay đoạn code js trên bằng đoạn code js sau, khi click vào một liên kết trong trang web, browser sẽ hiển thị bảng thông báo rồi im re, chứ không chuyển sang trang web toila.net
$(”a”).click(function(){ alert(”Thank for your visit!”); return false;});
1.2. Thêm class
Ở mục này, chúng ta sẽ xét một ví dụ để xem cách thêm một class vào một (nhiều) đối tượng DOM.
Thêm đoạn code sau vào phần header của trang web (định dạng cách trình bày cho class ‘test’ của các thẻ HTML có tên ‘a’)
<style type=”text/css”>a.test { font-weight: bold; }</style>
Thay thế vùng js chính bằng đoạn code sau (xóa tất cả nội dung cũ), với mục đích: khi trang web được tải xong, nội dung của các thẻ ‘a’ sẽ được trình bày bằng định nghĩa ở đoạn code trên
$(”a”).addClass(”test”);
Bạn cũng có thể xóa class ra khỏi một DOM
1.3. Các hiệu ứng đặc biệt
Bây giờ bạn thử đặt đoạn code sau vào vùng js chính để thử xem
$(”a”).click(function(){ $(this).hide(”slow”); return false;});
2. Cách gọi dây chuyền
Chúng ta xem và thử đoạn code sau để có cái nhìn sơ qua về lập trình hướng đối tượng với jQuery:
$(”p”).addClass(”test”).show().html(”foo”);
Mỗi phương thức ở đoạn code trên (addClass, show, html) trả về đối tượng jQuery; với đối tượng trả về, bạn có thể tiếp tục áp dụng các phương thức có thể cho tập các phần tử hiện thời. Khi tương đối thành thạo jQuery, bạn có thể sẽ thấy quen thuộc đoạn code sau:
$(”a”).filter(”.clickme”).click(function() { alert(”click!”);}).end().filter(”.hideme”).click(function() { $(this).hide();});
Bạn có thể dùng trang tham khảo [2] API để biết các API mà jQuery hỗ trợ.
3. Callbacks, Functions và đối tượng ‘this’
Callback là một hàm được thực thi sau khi một hàm cha của nó được thực thi xong. Cách khai báo callback trong jQuery có phần khác với cách truyền thống.
3.1 Khai báo callback không có tham số
$.get(’myhtmlpage.html’, myCallBack);
Chú ý là tham số thứ hai ở khai báo trên là tên của một hàm chứ không phải là một chuỗi (không đặt giữa cặp nháy đơn)
3.2 Khai báo callback với tham số
Cách khai báo sai
$.get(’myhtmlpage.html’, myCallBack(param1, param2));
Cách khai báo đúng
$.get(’myhtmlpage.html’, function(){ myCallBack(param1, param2);})
;
[1] http://docs.jquery.com/Downloading_jQuery
[2] http://docs.jquery.com/JQuery_API
( Thegioiwebsite.net ) - Dưới đây là tài liệu hướng dẫn cách viết code theo đúng chuẩn.Nếu bạn muốn trở thành coder chuyên nghiệp xin hãy đọc tài liệu này. Download tại đây.
(Xin mạn phép dịch nôm na dễ hiểu như sau)
( Thegioiwebsite.net ) - Thông thường khi lập trình PHP bạn hay viết lẫn cả phần HTML với mã lệnh PHP trên một trang.Điều này sẽ dẫn đến rất rối nhất là khi bảo trì.Bạn là người viết ra và cũng là người bảo trì thì không sao nhưng nếu bạn viết ra sau đó người khác bảo trì.Chắc họ nhìn vào code của bạn họ sẽ ngất mất vì quá rối.Mặt khác khi làm nhiều trang web có chức năng như nhau.Chỉ khác giao diện nên nếu lập trình theo kiểu như vậy bạn phải viết lại hoàn toàn.Ngoài ra muốn code được bạn phải chờ người thiết kế giao diện cho bạn sau đó cắt ra file HTML… rồi mới code…Tất cả những điều này sẽ làm giảm năng xuất công việc của bạn đi rất nhiều. Smarty ra đời đã giải quyết được các vấn đề nêu trên.Dưới đây là một số ưu điểm của Smarty:
1.Tốc độ load trang rất nhanh ( do tạo được cache)
2.Code ứng dụng của bạn trở lên trong sáng,mạch lạc và dễ bảo trì hơn rất nhiều (do tách biệt phần code và templates)
3.Hiệu quả công việc đạt tối đa ( Người thiết kế và người lập trình làm việc hoàn toàn độc lập.Thay đổi giao diện website nhanh chóng… )
4.Được sử dụng phổ biến ( bên Nhật rất ưa chuộng Smarty )
(Thống kê về việc nên dùng templates engine nào)
Nói chung nếu bạn làm về PHP thì Smarty hoặc Xtemplates( Cái này mình sẽ nói sau ) thì bạn không thể không học.Dưới đây là tài liệu về Smarty bạn download về đọc sẽ hiểu ngay cách làm ( thường chỉ mất 1 tuần đọc là bạn có thể làm tốt Smarty.). Bấm vào đây để download
Chúc các bạn thành công
ducmanh@thegioiwebsite.net
Đây là cuốn sách bằng tiếng Việt viết khá chi tiết về các bước cần thực hiện để tạo ra một templates cho Joomla. Bạn click vào đường link download dưới đây để download ebook này.
RAR: Download tại đây
PDF : Download tại đây
Chúc vui vẻ! ( tech@thegioiwebsite.net )
Tổng hợp ( Internet )
Joomla! xây dựng một loại thẻ riêng cho việc thiết kế Template, đó là thẻ <jdoc>. Thẻ <jdoc> được dùng để nạp các phần tử riêng biệt của Joomla, chẳng hạn như: Nạp phần Head, nạp các Module, nạp các Component.
Thẻ này được khai báo như sau:
<jdoc:include type=”[head|module|component]” />
Bây giờ hãy mở file “index.php” của template và nhúng vào các đoạn mã của Joomla!
Bước 6.1: Nhúng đoạn mã nạp phần HEAD:
<head>
<jdoc:include type=”head”>
</head>
Bước 6.2: Nhúng các đoạn mã để nạp MODULE và COMPONENT:
Thay |-TOP-|, |-USER3-|, |-USER4-|…
bằng các đoạn mã giống như hình dưới:
Hoặc copy đoạn mã đầy đủ sau
<html>
<head>
<jdoc:include type=”head”>
</head>
<body>
<div id=”top”><jdoc:include type=”modules” name=”top” /></div>
<hr />
<div id=”user3-user4″>
<div id=”user3″ style=”float:left; width:350px;”><jdoc:include type=”modules” name=”user3″ /></div>
<div id=”user4″><jdoc:include type=”modules” name=”user4″ /></div>
</div>
<hr />
<div id=”main”>
<div id=”left” style=”float:left; width:150px;”><jdoc:include type=”modules” name=”left” /></div>
<div id=”component” style=”float:left; width:250px;”><jdoc:include type=”component” /></div>
<div id=”right”><jdoc:include type=”modules” name=”right” /></div>
</div>
<div style=”clear:both;”></div>
<hr />
<div id=”footer”><jdoc:include type=”modules” name=”footer” /></div>
</body>
</html>
Mở Website của bạn và kiểm tra kết quả:
Phần 5: Tạo Layout
Bước 5.1: Phác thảo trên giấy về bố cục (layout) của template.
Giả sử chúng ta có giao diện với layout như sau:
Trước đây người ta hay sử dụng kỹ thuật dàn trang bằng bảng (dùng thẻ <table>). Việc dàn trang bằng bảng có ưu điểm là dễ làm nhưng lại có nhược điểm là tốc độ nạp trang chậm và không tối ưu cho các máy tìm kiếm. Do vậy ngày nay chúng ta sử dụng kỹ thuật dàn trang bằng thẻ <div>.
Mở file “index.php” của template “vinaora_template” và gõ vào nội dung sau:
Hoặc copy đoạn mã sau:
<html>
<head>
<title>WELCOME TO VINAORA.COM</title>
</head>
<body>
<div id=”top”>|-TOP-|</div>
<hr />
<div id=”user3-user4″>
<div id=”user3″ style=”float:left; width:350px;”>|-USER3-|</div>
<div id=”user4″>|-USER4-|</div>
</div>
<hr />
<div id=”main”>
<div id=”left” style=”float:left; width:150px;”>|-LEFT-|</div>
<div id=”component” style=”float:left; width:400px;”>|-COMPONENT-|</div>
<div id=”right”>|-RIGHT-|</div>
</div>
<hr />
<div id=”footer”>|-FOOTER-|</div>
</body>
</html>
Bước 5.3: Kiểm tra lại layout
Mở trang web và xem template vừa được tạo.
© 2010 WebArt’s Blog · Proudly powered by WordPress & Green Park 2 by Cordobo.
Valid XHTML 1.0 Transitional | Valid CSS 3
