istedim fakat arşivden direkt alıp sundum o zamanlar
ToggleClass vs. gibi kısa yollar kullanmaktansa böyle uzun bir kod yazmışım :D
Stay elemanına bir fix yazacaktım ama kafam almadı :D
$.UI = {
hoverChange : function(e,$stay,$class,$element){
/* Basit bir hover change fonksiyonu */
$classes = $class.split('->');
var $begin_class = $classes[0];
if($begin_class == "all"){
$remove_old_classes = true;
}else{
$remove_old_classes = false;
}
var $finish_class = $classes[1];
/* Child mi yoksa parentmi olduğunu buluyoruz. */
/* Değiştirilecek eleman dizilişi
child:element>>all
child:element>>first
parent:element>>first
parent:element>>all
*/
var $element = $element.split(':');
var $element_status = $element[0];
/* 2.bir sorgu ile first mi all mu onabakıyoruz.*/
var $element_query = $element[1];
var $element = $element_query.split('>>');
var $element_order = $element[1];
var $element_name = $element[0];
$(document).on({
mouseenter: function () {
/* Element seçiliyor . */
switch($element_status) {
case 'norelation': // ilişkisi yok ise;
/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $($element_name);
}else{
$visual_element = $($element_name+':first');
}
break;
case 'parent': // Büyüğü ise;
/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $(this).parents($element_name);
}else{
$visual_element = $(this).parent($element_name);
}
break;
case 'child': // Alt div ise ;
/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $(this).find($element_name);
}else{
$visual_element = $(this).find($element_name+':first');
}
break;
}
/* Ya hepsi yada belirlenen class lar silinir .*/
if($remove_old_classes == true){
$visual_element.addClass($finish_class);
}else{
$visual_element.removeClass($begin_class).addClass($finish_class);
}
},
mouseleave: function () {
/* Element seçiliyor . */
switch($element_status) {
case 'norelation': // ilişkisi yok ise;
/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $($element_name);
}else{
$visual_element = $($element_name+':first');
}
break;
case 'parent': // Büyüğü ise;
/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $(this).parents($element_name);
}else{
$visual_element = $(this).parent($element_name);
}
break;
case 'child': // Alt div ise ;
/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $(this).find($element_name);
}else{
$visual_element = $(this).find($element_name+':first');
}
break;
}
if($stay !==true){ /* Yapılan işlem geri döndürülsün mü ? */
if($remove_old_classes == true){
$visual_element.addClass($begin_class);
}else{
$visual_element.addClass($begin_class).removeClass($finish_class);
}
}
}
},e);
},
}
/* Kod yapısı itibari ile bir elemanın üstünde veyahut altıda bulunan bir elemana o elemanın üstüne gelinmesi halinde
bile olsa çeşitli işlemler yapabilirsiniz.
$.UI.hoverChange('.ustune_gelinen_eleman',kalsın_mı_?,'old_class->new_class','child:element>>first');
kalsın_mı_? -> True derseniz işlem üzerinden gidildiğinde kaldırılmaz.
old_class -> new_class bölümüne gireceğiniz old_class kaldırılacak eski sınıfı belirtir new_class ise eklenecek
olan yeni sınıfı belirtir.
Eğer old_class yerine all yazarsanız nesnenin üzerindeki tüm sınıfları kaldırır ve new_class ı yazar.
* old class yok ise boşluk bırakın ( ->new_class)
child:element>>first
Bu durumda child durumda olan element isimli divimizin sadece ilk olanına yapılacak işlem uygulanır.
HTML //
CSS //
.display_none {
display:none;
}
.display_none.hover {
display:block;
}
JQUERY
$.UI.HoverChange('.ust_eleman a',true,' ->hover','child:display_none:first');
Şeklinde yaparsak sadece bir kereliğine hoverChange elemanını üstüne geldiğmiz de içindeki display_none elemanın
görünür olacaktır.
*/Kullanımını az da olsa anlatmaya çalıştım. :)
KOD içinde uzun karakterler var kısaltılabilir kısaltmak isteyenler için.
HTML5 İLE ZATEN YAPTIĞI BİRÇOK ŞEY YAPILIYOR AMA ÜST DİVLERE ETKİSİ BÜYÜK :d
