Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini


10. MEMASANG SCRIPT JQUERY
December 31, 2009
Posted by: Fauzie


Sebelum kita pasang script, kita akan membuat sedikit styling untuk mendapatkan saiz font dan jenis font (font family) yang sesuai dan juga meletakkan image sebagai background.

Sila cari kod ini yang berada di bahagian atas sekali kod-kod CSS kita (iaitu di bawah "author information").

html, body {
margin: 0px;
padding: 0px;
}

Sila padam atau delate apa-apa yang berada di antara { dan } (margin: 0; dan padding: 0px;) dan gantikan dengan kod berwarna maroon seperti di bawah ini:

html, body {
margin: 25px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #fff; background: url(http://i425.photobucket.com/albums/pp331/
fauzi6009/squaredpaperimage.jpg) repeat fixed;

}

Klik Preview and Save Template.

Disamping itu sila copy kod di bawah ini dan paste di bahagian bawah <head>:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>


Sila lihat di bawah ini di mana kod ini telah diletakkan:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

Di bawah ini pula ialah script jQuery. Anda dikehendaki copy dan paste di bahagian atas kod </body>. Kod </body>ini terletak di bahagian bawah sekali iaitu di atas </html>

<script type='text/javascript'>
$(document).ready(function(){

$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});

});
</script>


Nota: Sila pastikan anda salin dengan betul script ini dan pastikan tiada kod yang tertinggal.

Selamat mencuba.