MooTools - Chú giải công cụ
MooTools cung cấp các chú giải công cụ khác nhau để thiết kế các kiểu và hiệu ứng tùy chỉnh. Trong chương này, chúng ta sẽ tìm hiểu các tùy chọn và sự kiện khác nhau của chú giải công cụ, cũng như một số công cụ sẽ giúp bạn thêm hoặc xóa chú giải công cụ khỏi các phần tử.
Tạo một chú giải công cụ mới
Tạo một chú giải công cụ rất đơn giản. Đầu tiên, chúng ta phải tạo phần tử mà chúng ta sẽ đính kèm chú giải công cụ. Hãy để chúng tôi lấy một ví dụ tạo thẻ liên kết và thêm thẻ đó vào lớp Mẹo trong hàm tạo. Hãy xem đoạn mã sau.
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>Hãy xem mã được sử dụng để tạo chú giải công cụ.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Thí dụ
Ví dụ sau giải thích ý tưởng cơ bản của Chú giải công cụ. Hãy xem đoạn mã sau.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
});
</script>
</head>
<body>
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>
</body>
</html>Bạn sẽ nhận được kết quả sau:
Đầu ra
Tùy chọn chú giải công cụ
Chỉ có năm tùy chọn trong Mẹo và chúng đều khá dễ hiểu.
showDelay
Một số nguyên được đo bằng mili giây, điều này sẽ xác định độ trễ trước khi chú giải công cụ hiển thị khi người dùng di chuột vào phần tử. Giá trị mặc định được đặt là 100.
hideDelay
Cũng giống như showDelay ở trên, số nguyên này (cũng được đo bằng mili giây) xác định thời gian chờ đợi trước khi ẩn mẹo sau khi người dùng rời khỏi phần tử. Giá trị mặc định được đặt là 100.
tên lớp
Điều này cho phép bạn đặt tên lớp cho bọc chú giải công cụ. Giá trị mặc định được đặt thành Null.
Bù lại
Điều này xác định khoảng cách từ phần tử mà chú giải công cụ sẽ xuất hiện. 'x' đề cập đến phần bù bên phải, trong đó 'y' là phần bù đi xuống (cả hai đều liên quan đến con trỏ NẾU tùy chọn 'cố định' được đặt thành false, nếu không thì phần bù tương ứng với phần tử ban đầu). Mặc định là x: 16, y: 16
đã sửa
Điều này đặt liệu chú giải công cụ có di chuyển theo chuột của bạn hay không nếu bạn di chuyển xung quanh phần tử. Nếu bạn đặt nó thành true, chú giải công cụ sẽ không di chuyển khi bạn di chuyển con trỏ, nhưng sẽ cố định so với phần tử ban đầu. Giá trị mặc định được đặt thành false.
Sự kiện chú giải công cụ
Các sự kiện chú giải công cụ vẫn đơn giản, giống như phần còn lại của lớp này. Có hai sự kiện - onShow và onHide, và chúng hoạt động như bạn mong đợi.
onShow ()
Sự kiện này thực thi khi chú giải công cụ xuất hiện. Nếu bạn đặt độ trễ, sự kiện này sẽ không thực thi cho đến khi hết thời gian trễ.
onHide ()
Chú giải công cụ ẩn khi thực hiện sự kiện này. Nếu có độ trễ, sự kiện này sẽ không thực thi cho đến khi hết thời gian trễ.
Phương pháp chú giải công cụ
Có hai phương pháp cho chú giải công cụ - đính kèm và tách rời. Điều này cho phép bạn nhắm mục tiêu một phần tử cụ thể và thêm nó vào một đối tượng chú giải công cụ (và do đó, vốn có tất cả các cài đặt trong phiên bản lớp đó) hoặc tách một phần tử cụ thể.
đính kèm ()
Để đính kèm một phần tử mới vào một đối tượng chú giải công cụ, chỉ cần nêu đối tượng tip, nhấn vào .attach () ;, và cuối cùng đặt bộ chọn phần tử trong dấu ngoặc ().
Syntax
toolTips.attach('#tooltipID3');tách ra ()
Phương thức này hoạt động giống như phương thức .attach, nhưng kết quả hoàn toàn ngược lại. Đầu tiên, nêu đối tượng tip, sau đó thêm .dettach (), và cuối cùng đặt bộ chọn phần tử của bạn trong ().
Syntax
toolTips.dettach('#tooltipID3');Example
Hãy để chúng tôi lấy một ví dụ giải thích chú giải công cụ. Hãy xem đoạn mã sau.
<!DOCTYPE html>
<html>
<head>
<style>
.custom_tip .tip {
background-color: #333;
padding: 5px;
}
.custom_tip .tip-title {
color: #fff;
background-color: #666;
font-size: 20px;
padding: 5px;
}
.custom_tip .tip-text {
color: #fff;
padding: 5px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips, {
showDelay: 1000, //default is 100
hideDelay: 100, //default is 100
className: 'custom_tip', //default is null
offsets: {
'x': 100, //default is 16
'y': 16 //default is 16
},
fixed: false, //default is false
onShow: function(toolTipElement){
toolTipElement.fade(.8);
$('show').highlight('#FFF504');
},
onHide: function(toolTipElement){
toolTipElement.fade(0);
$('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //default is null
});
$('tooltipID1').store('tip:text',
'You can replace the href with whatever text you want.');
$('tooltipID1').store('tip:title', 'Here is a new title.');
$('tooltipID1').set('rel', 'This will not change the tooltips text');
$('tooltipID1').set('title', 'This will not change the tooltips title');
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
});
</script>
</head>
<body>
<div id = "show" class = "ind">onShow</div>
<div id = "hide" class = "ind">onHide</div>
<p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' of 1"
href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
<p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
rel = "here is the default 'text' of 2"
href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
<p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
rel = "here is the default 'text' of 3"
href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
<p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
rel = "here is the default 'text' of 4, i was detached then attached"
href = "http://www.tutorialspoint.com">Tool tip detached then attached
again. </a></p>
<p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
rel = "here is the default 'text' of 'other style'"
href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
</body>
</html>Bạn sẽ nhận được kết quả sau:
Output