Hướng Dẫn Tạo Tooltip bằng Jquery Ajax Cho Website
! Nếu bài lap này giúp ích cho bạntrong việc thiết kế web thì thanks 1 phát nha
Sau Khi hoàn thành Bài lab bạn sẽ được kết quả:
live demo: http://vu.nhatnghe.vn/tooltip/index.html
Source download:
Begin:
Bước 1: Sau khi download source về các bạn Dùng DW tạo site trỏ vào folder TOOLTIP
Bước 2: Tạo 1 trang html trắng với tên là test.php
Bước 3: Vào Insert->html->Script Object->Script
Chèn 2 file javascript jquery và jtip vào
Bước 4: Attach file Css global.css vao(nằm trong folder css)!!
Sau khi chèn xong bạn sẽ được đoạn code như sau
Bước 5: Trong thẻ body bạn paste đoạn code sau vào:
Code:
<p><a href="nhatnghe.html" name="NhatNghe..." id="yahooCopy" class="jTip">TRUNG TAM DAO TAO MANG MAY TINH NHAT NGHE</a></p>
Code:
<p>Thành lập vào tháng 3 năm 2003, Nhất Nghệ đã nhanh chóng trở thành Trung Tâm Đào Tạo Mạng Máy Tính Hàng Đầu tại thành phố Hồ Chí Minh.
Vị Thế Hàng Đầu của Nhất Nghệ có được nhờ vào chất lượng đào tạo ưu việt cùng với những chính sách hộ trợ Học viên
</p>
<img src="images/ajaxImage.jpg" />
Bài 2:
Hướng dẫn Làm Tootip cho website bằng CSS(rất nhẹ và gọn))
Sau khi hoàn thành bài lap bạn sẽ được kết quả
Live DEMO(các bạn rê chuột vào tên các sản phẩm nha)
Bắt đầu:
Bước 1:
-Tạo trang test.html tại thẻ <head> paste đoạn code sau vào
Code:
<style>
#rollover a {
text-decoration:none;}
#rollover a span {
visibility:hidden;
display:block;
position:absolute;
/**adjust disjointed text position in % or px**/
left:10%;
color:#666;
background-color:#CCFF99;
border: 2px solid silver;
padding: 5px; }
#rollover a:hover span, #rollover a:active span, #rollover a:focus span {
visibility:visible;
}
#rollover a:hover, #rollover a:focus{
text-decoration: none;
color:#FF6600;
visibility:visible; }
</style>
Trong thẻ <body> paste doạn code sau vào
Trích:
| <div id="rollover"> <a href="http://nhatnghe.com">Trung Tâm đào tạo mạng Nhất Nghệ<span><img src="http://nhatnghe.com/forum/nn/banner11.jpg" align="left"/>Nội dung của bạn</span></a> </div> |
Trích:
| <span><img src="http://nhatnghe.com/forum/nn/banner11.jpg" align="left"/>Nội dung của bạn</span> |
Test thử !! chúc bạn thành công
Bài 3;
Hướng Dẫn Tạo Tooltip bằng Jquery Cho Website
Tình hình là mình thấy trên forum có nhiều bạn hỏi về tooltip jquery này nhiều!!Nên viết 1 bài đơn giản về tooltip sử dụng jquery!! Nếu bài lap này giúp ích cho bạntrong việc thiết kế web thì thanks 1 phát nha
Sau Khi hoàn thành Bài lab bạn sẽ được kết quả:
live demo: http://vu.nhatnghe.vn/tooltip/demo.html
Source download:
http://vu.nhatnghe.vn/jquerytol.rar
Begin:
Bước 1: Sau khi download source về các bạn Dùng DW tạo site trỏ vào folder jquery
Bước 2: Tạo 1 trang html trắng với tên là test.php
Bước 3: Vào Insert->html->Script Object->Script
Chèn 2 file javascript jquery và jquerystcky tootips vào
Bước 4: Attach file Css stickyTootips.css vao!!
Sau khi chèn xong bạn sẽ được đoạn code như sau
Bước 5: Trong thẻ body bạn paste đoạn code sau vào:
<p><a href="#" data-tooltip="sticky1">NHẤT NGHỆ</a></p>
<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky1" class="atip" style="width:200px">
<img src="http://nhatnghe.com/images/ads/ads_07_new2.gif" /><br /> TRUNG TÂM ĐÀO TẠO MẠNG CHUYÊN SÂU VÀ WEB DESIGNER </div>
</div>
<div class="stickystatus"></div>
</div>
Nguồn: nhatnghe.com/forum
0 Response to "Hướng Dẫn Tạo Tooltip bằng Jquery Ajax Cho Website"
Đăng nhận xét