MooTools - Araç ipuçları
MooTools, özel stiller ve efektler tasarlamak için farklı ipuçları sağlar. Bu bölümde, araç ipuçlarının çeşitli seçeneklerini ve olaylarının yanı sıra, öğelerden araç ipuçlarını eklemenize veya kaldırmanıza yardımcı olacak birkaç aracı öğreneceğiz.
Yeni Bir Araç İpucu Oluşturma
Araç ipucu oluşturmak çok basittir. İlk önce, ipucunu ekleyeceğimiz öğeyi oluşturmalıyız. Bir bağlantı etiketi oluşturan ve bunu yapıcıdaki Tips sınıfına ekleyen bir örnek alalım. Aşağıdaki koda bir göz atın.
<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>Araç ipucu oluşturmak için kullanılan koda bir göz atın.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Misal
Aşağıdaki örnek, Araç İpuçlarının temel fikrini açıklamaktadır. Aşağıdaki koda bir göz atın.
<!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>Aşağıdaki çıktıyı alacaksınız -
Çıktı
Araç İpucu Seçenekleri
İpuçları bölümünde yalnızca beş seçenek vardır ve hepsi oldukça açıklayıcıdır.
showDelay
Milisaniye cinsinden ölçülen bir tam sayı, bu, kullanıcı fareyi öğenin üzerine getirdikten sonra araç ipucu gösterilmeden önceki gecikmeyi belirleyecektir. Varsayılan 100 olarak ayarlanmıştır.
hideDelay
Yukarıdaki showDelay gibi, bu tam sayı (milisaniye cinsinden de ölçülür), kullanıcı öğeden ayrıldıktan sonra ipucunu gizlemeden önce ne kadar bekleyeceğini belirler. Varsayılan 100 olarak ayarlanmıştır.
sınıf adı
Bu, araç ipucu sarma için bir sınıf adı belirlemenizi sağlar. Varsayılan, Null olarak ayarlanmıştır.
Ofset
Bu, araç ipucunun öğeden ne kadar uzakta görüneceğini belirler. 'x' sağ ofseti ifade eder, burada 'y' aşağı ofsettir (her ikisi de imlece göre 'sabit' seçeneği false olarak ayarlanmışsa, aksi takdirde ofset orijinal öğeye göre değişir). Varsayılan x: 16, y: 16'dır
Sabit
Bu, öğenin etrafında hareket ettiğinizde araç ipucunun farenizi takip edip etmeyeceğini belirler. Bunu true olarak ayarlarsanız, ipucu imlecinizi hareket ettirdiğinizde hareket etmeyecek, ancak orijinal öğeye göre sabit kalacaktır. Varsayılan, yanlış olarak ayarlanmıştır.
İpucu Etkinlikleri
Araç ipucu olayları, bu sınıfın geri kalanı gibi basit kalır. İki olay vardır - onShow ve onHide ve beklediğiniz gibi çalışırlar.
gösteri()
Bu olay, araç ipucu göründüğünde yürütülür. Bir gecikme ayarlarsanız, bu olay gecikme bitene kadar yürütülmeyecektir.
onHide ()
Araç ipucu, bu olayın yürütülmesiyle birlikte gizlenir. Bir gecikme varsa, bu olay, gecikme bitene kadar yürütülmeyecektir.
Araç İpucu Yöntemleri
Araç ipuçları için iki yöntem vardır - takma ve çıkarma. Bu, belirli bir öğeyi hedeflemenize ve onu bir araç ipucu nesnesine eklemenize (ve böylece, bu sınıf örneğindeki tüm ayarları yapmanıza) veya belirli bir öğeyi ayırmanıza olanak tanır.
ekle ()
Bir araç ipucu nesnesine yeni bir öğe eklemek için, sadece uç nesnesini, .attach (); üzerine tack'i belirtin ve son olarak öğe seçiciyi parantezlerin () içine yerleştirin.
Syntax
toolTips.attach('#tooltipID3');dettach ()
Bu yöntem .attach yöntemi gibi çalışır, ancak sonuç tamamen tersidir. Önce, ipucu nesnesini belirtin, ardından .dettach () ekleyin ve son olarak öğe seçicinizi () içine yerleştirin.
Syntax
toolTips.dettach('#tooltipID3');Example
Araç ipucunu açıklayan bir örnek alalım. Aşağıdaki koda bir göz atın.
<!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>Aşağıdaki çıktıyı alacaksınız -
Output