• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo hiệu ứng Tooltip trong trường dữ liệu của Form

7
26/10/2010

Tooltip là một thành phần giao thức người dùng khá phổ biến. Nó được sử dụng để tạo hiệu ứng con trỏ. Người dùng web rê con trỏ qua một đối tượng mà không kích trỏ vào nó, thì hiệu ứng tooltip xuất hiện với một khung nhỏ chứa thông tin về đối tượng đã được rê chuột.

Chúng ta có thể sử dụng tooltip trong những trường dữ liệu (field) của một Form. Bạn có thể di chuyển giữa các trường bằng bàn phím (sử dụng phím TAB) hoặc bằng chuột.

Xem Demo.

Các bước thực hiện như sau:

1. Bước 1: Đặt code CSS vào phần đầu của trang web, giữa 2 thẻ <head>, </head>.
<style type="text/css">

/* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;

/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
#myform {
border:1px outset #ccc;
background:#fff url(http://static.flowplayer.org/img/global/gradient/h600.png) repeat-x;
padding:20px;
margin:20px 0;
width:350px;
font-size:12px;
-moz-border-radius:4px;
}

#myform h3 {
text-align:center;
margin:0 0 10px 0;
}

/* http://www.quirksmode.org/css/forms.html */
#inputs label, #inputs input, #inputs textarea, #inputs select {
display: block;
width: 150px;
float: left;
margin-bottom: 20px;
}

#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}

#inputs br {
clear: left;
}
</style>
2. Bước 2: Đặt đoạn code jQuery bên dưới vào trước thẻ </head>.
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

3. Bước 3: Đặt đoạn code jQuery dưới đây vào trước thẻ </body>.
<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {



// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({

// place tooltip on the right edge
position: "center right",

// a little tweaking of the position
offset: [-2, 10],

// use the built-in fadeIn/fadeOut effect
effect: "fade",

// custom opacity setting
opacity: 0.7

});
});
</script>

4. Bước 4: Thiết lập cấu trúc HTML như dưới đây và đặt vào phần thân của trang web (giữa 2 thẻ <body>, </body>).
<form id="myform" action="#">

<h3>Registration Form</h3>

<div id="inputs">

<!-- username -->
<label for="username">Username</label>
<input id="username" title="Must be at least 8 characters."/><br />

<!-- password -->
<label for="password">Password</label>
<input id="password" type="password" title="Try to make it hard to guess." /><br />

<!-- email -->
<label for="email">Email</label>
<input id="email" title="We won't send you any marketing material." /><br />

<!-- message -->
<label for="body">Message</label>
<textarea id="body" title="What's on your mind?"></textarea><br />

<!-- message -->
<label for="where">Select one</label>
<select id="where" title="Select one of these options">
<option>-- first option --</option>
<option>-- second option --</option>
<option>-- third option --</option>
</select>
<br />
</div>

<!-- email -->
<label>
I accept the terms and conditions
<input type="checkbox" id="check" title="Required to proceed" />
</label>

<p>
<button type="button" title="This button won't do anything">Proceed</button>
</p>

</form>
Những dòng chữ màu đỏ là phần nội dung hiển thị mà bạn cần sửa đổi cho hiệu ứng theo nhu cầu của bạn.

{7 bình luậnAdd yours ?}

22:21:00, 19 thg 3, 2011

Giúp em gấp anh ơi.em đã làm các bước trên thành công rồi nhưng khi test thử thì ấn vào Proceed không thấy gì.nay em muốn nó khi ấn vào đó sẽ liên kết hoặc gửi những thông tin ở trên phần đó vào mail của em.mong anh giúp em làm đc như vậy.em đang rất cần.
cảm ơn anh

Reply
23:10:00, 19 thg 3, 2011

À quên nói với em biết là Form dạng này chỉ dành cho website, còn Blogger không thể áp dụng được, nên nó k hoạt động là đúng rồi. :51)

Reply
12:48:00, 20 thg 3, 2011

vậy anh có thể giúp em tạo một form cho blogger ko như ở trên ý mà mình có thể chỉnh sửa đc ý.mong anh giúp.em đang rất cần.

Reply
12:54:00, 20 thg 3, 2011

em đang rất cần mong anh giúp.để em đưa vào blogger của em
http://admincapcha.blogspot.com/
mong anh viết giúp.
dangxuansang.it@gmail.com

Reply
12:55:00, 20 thg 3, 2011

Nền tảng Blogger vốn chưa thể tạo Registration Form được như kiểu website em à, chờ trong tương lai đi e, ngay cả Contact Form cũng phải nhờ vả đến dịch vụ bên ngoài nữa là.

Reply
12:58:00, 20 thg 3, 2011

Vậy anh có biết trang nào cho làm Registration Form free không?
cảm ơn anh nhiều!

Reply
09:11:00, 9 thg 5, 2011

mình thấy siteform hay dịch vụ free của google cũng ổn định đấy.

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn