Script dan Ebook JQuery [Archive] - Webmaster Cafe - Tongkrongan Webmaster Indonesia

akupasrah

11-17-2008, 02:33 PM

JQuery adalah framework sekaligus kumpulan script-script yang berguna untuk membuat web menjadi lebih interaktif, terlihat powerfull dan animasi yang bagus. Jquery ditulis dengan menggunakan javascript sebagai sebuah file tunggal. JQuery ini memiliki keunggulan pluginable,artinya JQuery bisa ditambahi dengan berbagai plugin. Sayangnya JQuery ini cukup sulit untuk dipelajari bahkan ampe skarang gw kagak ngarti :P,
paling tidak klo mau bisa harus mengenal javascript dan konsep OOP. Nah, bagi yang ingin belajar JQuery, gw udah mengumpulkan ebook dan script JQuerynya. Ebook ini adalah manual JQuery yang berisi penjelasan singkat, tutorial dan contoh kode.

Saya sendiri belum begitu menguasai JQuery, karena masih berkecimpung dengan cakephp. Kabarnya JQuery bisa diintegrasikan dengan cakephp, sehingga gabungan dari framework ini akan menghasilkan suatu aplikasi yang stabil dan interaktif.

Silahkan download ebook dan script tersebut disini. (http://www.ziddu.com/download/2677702/ebook-script-jquery.zip.html)

klo dah pada nguasain, ajarin yach........ :tinosidin

sastro

11-17-2008, 02:59 PM

Gua sering dengar nich JQuery tapi blom pernag tau kayak apaan. Bisa nyontohin web yang pake jquery?

akupasrah

11-17-2008, 03:42 PM

Gua sering dengar nich JQuery tapi blom pernag tau kayak apaan. Bisa nyontohin web yang pake jquery?

ada tutorial membuat web dengan animasi flipping book dengan jquery.
tp, ampe skarang, gw lom bisa memecahkannya...
klo bisa dan udah nemuin caranya... ajarin yup
klik aja (http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/)

Eclipse

11-17-2008, 03:55 PM

JQuery adalah engine ajax yang bisa kita pake utk kebutuhan pembuatan situs...

Gw pernah pake utk pembuatan KG, silahkan view source www.kafegaul.com

atau lihat source di bawah ini

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Slider Gallery</title>
<style type="text/css" media="screen">

</style>

<script src="slider_files/jquery_002.js" type="text/javascript" charset="utf-8"></script>
<script src="slider_files/jquery.js" type="text/javascript" charset="utf-8"></script>

<script src="slider_files/ui_002.js" type="text/javascript" charset="utf-8"></script>
<script src="slider_files/ui.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);

var itemsWidth = ul.innerWidth() - container.outerWidth();

$('.slider', container).slider({
minValue: 0,
maxValue: itemsWidth,
handle: '.handle',
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
</head>
<body>
<div id="container">
<div class="sliderGallery">
<ul>
<li><img src="images/headerKGNation.gif" usemap="#Map1" class="pb-airportexpress" border="0">

<map name="Map1" id="Map1">
<area shape="rect" coords="250,4,327,90" href="http://forum.kafegaul.com" target="_blank" alt="" title="Forum KG" />
<area shape="rect" coords="425,3,502,88" href="http://video.kafegaul.com" target="_blank" alt="" title="Video - Sight & Sound"/>
<area shape="rect" coords="622,4,706,87" href="http://photo.kafegaul.com" target="_blank" alt="" title="Photo"/>
<area shape="rect" coords="749,3,841,88" href="http://www.kafegaul.com/jepret/" target="_blank" alt="" title="Jepret"/>
<area shape="rect" coords="923,4,1014,85" href="http://www.kafegaul.com/musik/" target="_blank" alt="" title="Musik"/>
<area shape="rect" coords="1128,5,1214,88" href="http://plener.kafegaul.com" target="_blank" alt="" title="Plener"/>
<area shape="rect" coords="1307,5,1417,87" href="http://www.kafegaul.com/sinema/" target="_blank" alt="" title="Sinema"/>
<area shape="rect" coords="1497,6,1589,84" href="http://www.kafegaul.com/girls/" target="_blank" alt="" title="Girls"/>
<area shape="rect" coords="1635,3,1714,88" href="http://www.kafegaul.com/kontes/" target="_blank" alt="" title="Kuis"/>
<area shape="rect" coords="1805,4,1890,85" href="http://www.kafegaul.com/horoskop/" target="_blank" alt="" title="Horoskop"/>
<area shape="rect" coords="2004,3,2118,89" href="http://video.kafegaul.com/kgfrend" target="_blank" alt="" title="Teman KG" />
</map></li>
</ul>

<div class="slider ui-slider">

<a href="javascript:void(0)">
<div class="handle"></div>
</a>
<span class="slider-lbl1" title="Klik forum, kemudian klik icon di atasnya.">Forum</span>
<span class="slider-lbl3" title="Klik video, kemudian klik icon di atasnya">Video</span>
<span class="slider-lbl4" title="Klik photo, kemudian klik icon di atasnya"">Photo</span>
<span class="slider-lbl5" title="Klik jepret, kemudian klik icon di atasnya">Jepret</span>

<span class="slider-lbl6" title="Klik musik, kemudian klik icon di atasnya">Musik</span>
<span class="slider-lb17" title="Klik plener, kemudian klik icon di atasnya">Plener</span>
<span class="slider-lbl8" title="Klik sinema, kemudian klik icon di atasnya">Sinema</span>
<span class="slider-lbl9" title="Klik girls, kemudian klik icon di atasnya">Girls</span>
<span class="slider-lb20" title="Klik horoskop, kemudian klik icon di atasnya">Horoskop</span>
<span class="slider-lb21" title="Klik kuis, kemudian klik icon di atasnya">Kuis</span>

<span class="slider-lb22" title="Klik teman KG, kemudian klik icon di atasnya">Teman KG</span>
</div>
</div>
</div>
</body></html>

akupasrah

11-18-2008, 06:48 AM

itu yg dipake di menu ya gan....
klo untuk flipping book dah pernah nyoba lom?
klo udah share disini yach gan...:toel

the-dons

11-19-2008, 07:12 AM

lebih tepatnya sih jquery itu javascript framework (http://en.wikipedia.org/wiki/Jquery)... CMIIW

akupasrah

11-19-2008, 08:09 AM

setelah gw pelajari, akhirnya gw dapat jg maksudnya untuk membuat animasi flipping book menggunakan jqury.

siapkan jquery.js , bisa didownload disini (http://www.ziddu.com/download/2677702/ebook-script-jquery.zip.html)

siapkan gambar2nya contoh

http://www.sitepoint.com/images/books/javascript1/10page.jpg

http://www.sitepoint.com/examples/jquery/3d.png

lalu buat file htmlnya seperti dibawah ini

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test aja</title>

<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
}

h2 {
clear:both;
}
div#turner {
float:left;
padding-top:11px;
width:302px;
height:210px;
position:relative;
background: transparent url(/images/books/frame.jpg) 0px 6px no-repeat; /* this graphic gives us the book edges and the shadows around the edges */
}

#leftpage, #rightpage {
float:left;
position:relative;
background-image:url(http://www.sitepoint.com/images/books/javascript1/10page.jpg);
overflow:hidden;
width:146px;
height:189px;
left:5px;
cursor:pointer
}
#leftpage{
background-position:0 0;
}
#rightpage{
background-position:146px 0
}
div#flip {
background: transparent url(http://www.sitepoint.com/examples/jquery/3d.png) top center;
height:210px;
width:118px;
position:absolute;
top:0;
left:90px;
z-index:99;
margin-bottom:0;
padding-bottom:0
}
#js {
font-family:"Courier New", Courier, monospace;
font-size:small;
padding:2em;
clear:both
}
#js strong{
color:#003399
}
#js em{
color:#aaa
}
#js p.sc{
color:#c00;
font-weight:700;
margin:0;
padding:0
}
#js .function{
color:#090;
font-weight:700;
}
#js .css{
color:#900;
font-weight:700;
}
</style>
<script type="text/javascript" src="tempat naro jquery.js"></script>
<script type="text/javascript">
// set constants
var $pageheight = 189; // the single page height we're using
var $pagewidth = 146; // the single page width we're using

var $pageYpos = 0; // the current Y position of our background-image (in both pages)

// When the page is ready
$(document).ready(function(){
/* things in here happen as soon the document is ready */
/* left page turner */
$("#leftpage").click( function() {
$pageYpos = $pageYpos + $pageheight;
$("#leftpage")
.css("background-position", "0px "+$pageYpos+"px");

$("#flip")
.css("background-position", "top right");
setTimeout ('$("#flip").css("background-position", "top center");', 200);
setTimeout ('$("#rightpage").css("background-position", "146px "+$pageYpos+"px");', 200);

}); // close leftpage click function

/* right page turner */
$("#rightpage").click( function() {
$pageYpos = $pageYpos - $pageheight; // note minus page height
$("#rightpage")
.css("background-position", "0px "+$pageYpos+"px");

$("#flip")
.css("background-position", "top left");
setTimeout ('$("#flip").css("background-position", "top center");', 200);
setTimeout ('$("#leftpage").css("background-position", "146px "+$pageYpos+"px");', 200);

}); // close rightpage click function
}); // close doc ready

</script>
</head>

<body>

<div id="turner">
<div id="flip"></div>
<div id="leftpage"></div>
<div id="rightpage"></div>
</div>

</body>

</html>

hasilnya dapat dilihat di sini (http://fahmi.kokarga.com/fahmi_test.htm)

Sorry om....:P

Eclipse

11-19-2008, 08:37 AM

what the maksud....? :gila