iPhone’a özel sayfalarda Hover kontrolü

Steve Jobs, geçtiğimiz ay Flash’ın neden iPhone’da işe yaramayacağını açıklarken, “iPhone’un hover kontrolünü desteklemediğini” de söyledi. Hover kontrolü, yalnızca fare ile belli bir bölgenin üzerine geldiğinizde aktifleşen butonlar ve linklerde kullanılıyor.

Gerçekten iPhone ile interneti dolaşırken hover uygulamasına pek de rastlamıyoruz. Ancak bu, iPhone için hazırlanan sayfalarda hover kontrolü kullanamayacağımız anlamına gelmiyor.

Fare için hazırlanmış bir kontrolün, parmak ile kullanılmasının çok verimli olmayacağını söyleyenler olsa da, basit bir değişiklikle, hover kontrollerini istediğiniz sayfalarda kullanabilirsiniz.

Nasıl mı? İşte şöyle…

Öncelikle sayfada kullanacağımız kontrolleri hazırlayalım:

<ul id="kontroller">

    <li>

        <div class="hover_kontrolleri">

            <a href="#duzenle">Düzenle</a> |

            <a href="#sil">Sil</a>

        </div>

        <a href="#link" class="link">Lorem ipsum dolor...</a>

    </li>

</ul>

Yukarıda yalnızca bir adet bağlantı yer alıyor. “Liste” öğesinin içinde, iki bağlantısı bulunan (Düzenle – sil) hover kontrolleri isimli bir div var. Bunun dışında da bir başka bağlantı yer alıyor. Bu bağlantıya ayrı bir class atıyoruz. Böylece özelliklerini kolayca değiştirebileceğiz.

Kutucukların üzerine fareyle gelindiğinde hover_kontrolleri div’inin gözükmesi için şu CSS kodunu kullanacağız:

#kontroller li {

    display: block;

}

#kontroller li .link {

    display: block;

    padding: 10px;

    border-bottom: solid 1px #CCC;

}

#kontroller li .hover_kontrolleri {

    float: right;

    display: none;

}

#kontroller li:hover .hover_kontrolleri {

    display: block;

}

Üstteki 2 tanımlama kafanıza takılmasın. Hover’la ilişkili kısım, alttaki 2 tanımlama. Hover kontrollerini “display:none” şeklinde belirleyerek, normal şartlarda bu bölümün görünmemesini sağlıyoruz. List öğelerinin üzerine gelindiğindeyse, “display:block” ile aynı bölümü göstereceğiz.

Bir önceki kod parçasındaki bağlantıya, “.link” sınıfını atadığımızı hatırlayalım. iPhone’a özel Hover kontrolünün sırrı da burada. Üzerine tıklanacak bir şey olmadığında hover kontolleri görünmeyeceğinden, liste öğesinin içine, hover_kontrolleri div’inin yanına bir bağlantı yerleştiriyoruz. Böylece bu bağlantıya tıklandığında, kontroller gösterilecek. Örneğimizde bağlantıyı block elementi olarak belirleyip, biraz da padding vererek, tıklama alanını büyütüyoruz. Elbette bu kısmı arzu ettiğmiz şekilde düzenleyebiliriz.

Kod şöyle çalışıyor: iPhone ile bağlantı bulunan her hangi bir noktaya dokunduğumuzda bu bağlantının hover kontrolleri görünür hale gelecek. Ancak ilk tıklamayla herhangi bir bağlantı da aktifleşmeyecek. Daha sonra istersek görünür hale gelen bağlantılara, yahut orijinal “.link” bağlantısına tıklayabileceğiz.

Bu küçük düzenlemeyle, iPhone’da hover kontrollerini 2 tıklamayla aktif hale getirebiliyoruz.

Çalışmanın demosunu, çalışmanın sahibi UsabilityPost’un örnek sayfasından görebilirsiniz.

Hepsi bu kadar.