manipulasi style menggunakan jquery

       
Kadang dalam men-desain website ox sering ada masalah, entah itu dari kurangnya penguasaan css ataupun dari bahan(PSD) yang kadang tidak sesuai dengan standard ox. Nah, terlebih project slicing yang terakhir. Ada menu sidebar yang lumayan cantik, tapi teks yang di pakai yaitu rata kanan. Rata kanan ini terus terang hal yang baru bagi ox. Dimana pada sisi meratakan teksnya mudah, tapi disisi lain ox mesti memberi jarak beberapa pixel di kanan.

Pemecahan masalah sebenarnya mudah, ox tambahkan &nbsp; sebanyak 7 x di akhir anchor(<a href), tapi bagaimana kalau si client nanti mau menambah page baru? apakah dia harus menuliskan &nbsp; juga? Selain itu, dari sisi profesionalitas kurang okeh :D.
    
<div class="sidebarmenu">
<ul>
<li><a href="#">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
<li><a href="#">about us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
<li><a href="#">contact us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
</ul>
</div>
<!-- //sidebarmenu -->
Angin segar datang dari jQuery, dengan library javascript itu ox bisa menambahkan content di akhir element anchor, yaitu menggunakan .after();. Lihat javascript ini:
$('.sidebarmenu > ul > li > a').after('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
Sedikit penjelasan:
.sidebarmenu yaitu sebuah element(ox pakai div) yang mempunyai class(tanda titik) bernama sidebarmenu
> berarti setelah element .sidebarmenu itu ada element lagi, yaitu ul (unordered list)

Selesai, silahkan lihat demo dan pilih tab Result.

Post Terkait manipulasi style menggunakan jquery

No comments manipulasi style menggunakan jquery

Post a Comment

Popular Posts