Selasa, 23 April 2013

TweetThis Button

Membangun page abjad dengan jQuery

MEMBANGUN PAGE ABJAD DENGAN JQUERY

Sebagian pengembang web mungkin akrab dengan solusi anchor link untuk melompat ke bagian halaman. Anda dapat men-setup anchor link dengan atribut nama tertentu, dan menggunakan simbol hash sebagai nilai href untuk melewati bawah halaman. Efek ini telah bekerja fantastis ketika daftar set data yang sangat panjang.
 
Dalam tutorial ini saya ingin mengeksplorasi solusi untuk ini metode antarmuka. Kami akan membuat indeks halaman sederhana yang menggunakan anchor link sebagai batu loncatan pada halaman. Namun "berpindah" denagn animasi dan scrool ke bawah. Saya sangat menikmati script ini karena portabel dan mudah untuk menginstal ke dalam setiap tata letak situs web. [Sumber]
 
pratinjau demo screenshot jQuery JavaScript link index halaman bergulir
Live Demo - Source Code Unduh

Spec Layout

Kita bisa memulai dengan membuat halaman awal yang diperlukan untuk mendapatkan script ini berfungsi. Pertama adalah halaman index.html dasar yang saya menambahkan DOCTYPE HTML5 yang khas. Kita juga perlu membuat dua dokumen kosong digunakan nanti di tutorial - styles.css untuk stylesheet halaman dan indexscroller.js untuk kode kustom jQuery.
 
Pada dokumen header termasuk versi terbaru dari jQuery dari Google CDN hosting. Juga salinan trunk html5shiv perpustakaan untuk browser lama yang tidak mendukung HTML5. Pada bagian body saya menggunakan Google kustom Webfont bernama Milonga , bersama dengan beberapa CSS3 efek artistik.
 
  
 
 
   
    jQuery Alfabetis Scrolling Links Index </ title></span>
  <span> <meta name="author" content="Jake Rocheleau"></span>
  <span> <link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico"></span>
  <span> href="http://spyrestudios.com/favicon.ico"> rel="icon" <link</span>
  <span> <link rel="stylesheet" type="text/css" href="styles.css"></span>
  <span> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Milonga"></span>
  <span> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </ script></span>
  <span> <script type="text/javascript" charset="utf-8" src="indexscroller.js"> </ script></span>
<span> <-! [If lt IE 9]></span>
  <span> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script></span>
<span> <[Endif] -></span>
<span> </ Head></span>
</pre>
<p>
<span> </span></p>
<p>
<span>Sekarang tata letak halaman akan ditata sebagai satu kolom dengan daftar acara TV.</span> <span> Setiap acara memiliki div sendiri yang berisi foto dan beberapa link eksternal untuk Wikipedia dan IMDB.</span> <span> Di bagian paling atas halaman Anda akan menemukan sebuah kotak kecil dari link yang diberi label AG.</span> <span> Link ini akan berperilaku sebagai indeks halaman yang gulungan ke contoh pertama.</span> </p>
<h2>
 <span> Daftar Isi</span> </h2>
<p>
<span> Daerah seluruh body yang terkandung di dalam div wrapper, yang berpisah dengan header dan daftar acara TV.</span> <span>HREF anchor link nilai indeks target pada halaman yang terdaftar menurut abjad.</span> <span> Jadi kita mulai <b># indexa</b> berakhir dengan <b># INDEXG</b> yang semuanya menargetkan anchor link lain pada halaman, menggunakan nilai yang cocok untuk atribut nama.</span></p>
<p>
<span> </span> </p>
<pre style="overflow: scroll;"> <span> <div id="w">
</span>
    <span> <h1>
 jQuery Scrolling Dinamis Links Index </ h1></span>
    
    <span> <div id="container">
</span>
      <span> <nav id="links"></span>
        <span> <ul class="clearfix"></span>
          <span>
<li class="label"> Link Cepat: </ li></span>
          <span>
<li> <a href="#indexa"> A </ a> </ li></span>
          <span>
<li> <a href="#indexb"> B </ a> </ li></span>
          <span>
<li> <a href="#indexc"> C </ a> </ li></span>
          <span>
<li> <a href="#indexd"> D </ a> </ li></span>
          <span>
<li> <a href="#indexe"> E </ a> </ li></span>
          <span>
<li> <a href="#indexf"> F </ a> </ li></span>
          <span>
<li> <a href="#indexg"> G </ a> </ li></span>
        <span> </ Ul></span>
      <span> </ Nav></span>
</pre>
<p>
<span> </span></p>
<p>
<span>Kita bisa melihat salah satu contoh anchor link inline yang dapat ditemukan di antara daftar acara TV.</span> <span> Saya telah meninggalkan ini jangkar di luar wadah apapun karena mereka tidak benar-benar muncul dalam tata letak.</span> <span>
 Ini berada di tempat yang tepat pada awal setiap huruf yang baru 
sehingga jQuery yang tahu persis di mana untuk menghentikan pengguliran.</span></p>
<p>
<span> </span> </p>
<pre style="overflow: scroll;"> <span> <div class="show">
</span>
  <span> <h2>
 Arrested Development <span class="meta"> <a href="http://en.wikipedia.org/wiki/Arrested_Development_(TV_series)" target="_blank"> Wikipedia </ a> - <a href = "http://www.imdb.com/title/tt0367279/" target = "_blank"> IMDB </ a> </ span> </ h2></span>
  <span> <p>
<img src="images/arrested-development.png" Pengembangan TV alt="Arrested Show" width="570" height="280"> </ p></span>
<span> </ Div></span>

<span> <a name="indexb"> </ a></span>
<span> <div class="show">
</span>
  <span> <h2>
 The Big Bang Theory <span class="meta"> <a href="http://en.wikipedia.org/wiki/The_Big_Bang_Theory" target="_blank"> Wikipedia </ a> - <a href = "http://www.imdb.com/title/tt0898266/" target = "_blank"> IMDB </ a> </ span> </ h2></span>
  <span> <p>
<img src="images/big-bang-theory.png" alt="The Big Bang TV Teori Show" width="570" height="280"> </ p></span>
<span> </ Div></span>
</pre>
<p>
<span> </span></p>
<p>
<span>Perhatikan bahwa sebelum pindah ke surat baru, saya telah menempatkan 
jangkar tunggal dengan menggunakan tidak lebih dari atribut <b>namanya.</b></span> <span> Kita tidak memerlukan teks internal atau nilai href atau apa pun.</span> <span>
 Karena kita mengikuti HTML semantik pengguna juga bisa mematikan 
JavaScript dan fallback masih akan bekerja dengan baik, sama seperti 
anchor link generik.</span> </p>
<h2>
 <span> Halaman CSS Styles</span> </h2>
<p>
<span> Beberapa isi standar stylesheet yang benar-benar unik dan membantu dalam situasi ini.</span> <span> Selain me-reset CSS yang khas Saya juga menempatkan gaya untuk memposisikan tubuh dengan benar.</span> <span> Saya menggunakan bayangan CSS3 kotak kecil pada wadah tubuh sehingga tata letak menonjol dari tekstur BG.</span></p>
<p>
<span> </span> </p>
<pre style="overflow: scroll;"> <span> / * Tata letak gaya tampilan * /</span>
<span> # W {width: 620px; margin: 0 auto; padding-top: 55px;}</span>

<span> # Kontainer {</span> 
  <span> padding: 14px 20px;</span>
  <span> background: # fff;</span>
  <span> -Webkit-box-shadow: 2px 2px 1px RGBA (0,0,0,0.35);</span>
  <span> -Moz-box-shadow: 2px 2px 1px RGBA (0,0,0,0.35);</span>
  <span> box-shadow: 2px 2px 1px RGBA (0,0,0,0.35);</span>
  <span> -Webkit-border-radius: 5px;</span>
  <span> -Moz-border-radius: 5px;</span>
  <span> border-radius: 5px;</span>
<span> }</span>
</pre>
<p>
<span> </span></p>
<p>
<span>Sekarang untuk kotak TV acara saya telah menyertakan sebuah properti yang benar-benar penting saja.</span> <span>
 Karena link anchor berperilaku sebagai menghentikan poin di halaman, 
saya telah menyertakan padding tambahan di bagian atas setiap kontainer 
acara TV.</span> <span style="">
 Dengan cara ini efek bergulir kami tidak berhenti tepat di atas setiap 
judul, dan ada beberapa spasi tambahan untuk ruang untuk bernapas.</span></p>
<p>
<span style=""> </span> </p>
<pre style="overflow: scroll;"> <span> / * Acara tv layar * /</span>
<span> # Menunjukkan {display: block;}</span>

<span> Acara {display: block; padding-top: 8px; margin-bottom: 23px;}.</span>
<span> Meta {font-family: Arial, Verdana, sans-serif, warna: # 222; font-size: 0.8em; font-weight: bold; float: right;}.</span>

<span> / * Clearfix * /</span>
<span> . Clearfix: setelah {isi:; display ".": Block; clear: both; visibility: hidden; line-height: 0; height: 0;}</span>
<span> Clearfix {display: inline-block;}.</span>
 
<span> . html [xmlns] clearfix {display: block;}</span>
<span> * Html clearfix {height: 1%;}.</span>
</pre>
<p>
<span> </span></p>
<p>
<span>Juga informasi meta yang terkandung di dalam setiap blok header, untuk menghemat ruang dalam HTML markup.</span> <span> Jadi kita mengambang konten ini dan menggunakan <a href="http://translate.googleusercontent.com/translate_c?depth=1&ei=7LFjUdG6JIfmrAe0s4HYDQ&hl=id&prev=/search%3Fq%3Dtutorial%2Bjquery%2Bmobile%26hl%3Did%26client%3Dfirefox-a%26hs%3DrFT%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.com&sl=en&u=http://www.webtoolkit.info/css-clearfix.html&usg=ALkJrhiRVhdbveuwk_XvAn7OokvCUzRgdw">clearfix CSS</a> untuk menjaga tata letak dalam struktur.</span> <span> Dengan desain tata letak tampak murni, kita sekarang harus pindah ke tugas akhir scripting efek animasi indeks.</span> </p>
<h2>
 <span> jQuery scrollTop</span> </h2>
<p>
<span> Solusi ini datang bersama-sama setelah mencari secara online untuk sementara waktu dan akhirnya tersandung atas <a href="http://translate.googleusercontent.com/translate_c?depth=1&ei=7LFjUdG6JIfmrAe0s4HYDQ&hl=id&prev=/search%3Fq%3Dtutorial%2Bjquery%2Bmobile%26hl%3Did%26client%3Dfirefox-a%26hs%3DrFT%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.com&sl=en&u=http://css-tricks.com/forums/discussion/17757/jquery-smooth-scroll-to-a-name-and-id/p1&usg=ALkJrhgM8HEC6-umQzaLuEzNIITmyaIz9Q">ini thread forum CSS-Trik</a> .</span> <span> jQuery memiliki metode bernama <a href="http://translate.googleusercontent.com/translate_c?depth=1&ei=7LFjUdG6JIfmrAe0s4HYDQ&hl=id&prev=/search%3Fq%3Dtutorial%2Bjquery%2Bmobile%26hl%3Did%26client%3Dfirefox-a%26hs%3DrFT%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.com&sl=en&u=http://api.jquery.com/scrollTop/&usg=ALkJrhjfqa-MW6D37sSkVEYtjQ2PSOQPew">scrollTop (.)</a> yang dapat menarik nilai saat ini dalam pixel dari atas halaman untuk setiap elemen yang dipilih lainnya.</span> <span style="">
 Dengan menggunakan teknik ini kita dapat menentukan nilai offset untuk 
setiap daftar acara TV dan alami gulir ke bawah dengan anchor link yang 
tepat.</span></p>
<p>
<span style=""> </span> </p>
<pre style="overflow: scroll;"> <span> $ (Dokumen) siap (function (). {</span>
  <span> $ ('# Link> ul> li> a') pada (. 'Klik', function (e) {</span>
    <span> e.preventDefault ();</span>
    <span> var anchorid = $ (this.hash);</span>
    
    <span> if (anchorid.length == 0) anchorid = $ ('[name = "' + this.hash.substr (1) + '"]');</span>
    <span> lain anchorid = $ ('html');</span>
    
    <span> $ ('Html, body') animate ({scrollTop:. Anchorid.offset () atas}, 450).;</span>
  <span> });</span>
<span> });</span>
</pre>
<p>
<span> </span></p>
<p>
<span>Jadi ini adalah semua kode yang Anda akan menemukan di dalam indexscroller.js.</span> <span> Itu tidak tampak seperti terlalu banyak, dan itu benar-benar tidak semua yang rumit untuk diikuti.</span> <span> Tapi mari kita memecah apa yang terjadi setelah DOM telah selesai loading.</span></p>
<p>
<span> </span> </p>
<p>
<span> Setelah salah satu link jangkar internal yang # diklik kita segera memanggil <b>e.preventDefault ().</b></span> <span> Ini akan menghentikan nilai hash dari menambahkan ke URL dan melompat ke bawah halaman seketika.</span> <span> Kemudian menggunakan baru <a href="http://translate.googleusercontent.com/translate_c?depth=1&ei=7LFjUdG6JIfmrAe0s4HYDQ&hl=id&prev=/search%3Fq%3Dtutorial%2Bjquery%2Bmobile%26hl%3Did%26client%3Dfirefox-a%26hs%3DrFT%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.com&sl=en&u=http://forum.jquery.com/topic/this-hash&usg=ALkJrhh6tKIWINWgX-G06jc563Y0OP4_uQ">jquery.hash</a> properti kita dapat menarik nilai href yang tepat yang datang setelah simbol hash.</span> <span> Jadi misalnya, link indeks pertama kami akan mengembalikan nilai "indexa".</span></p>
<p>
<span> </span> </p>
<p>
<span> Menggunakan nilai baru kita dapat menargetkan link anchor yang sesuai pada halaman dengan atribut nama yang cocok.</span> <span> Kami setup ini variabel anchorid baru dan sekarang dapat mengakses jumlah mutlak piksel dari atas <b>anchorid.offset</b> menggunakan <b>(). Atas.</b></span> <span> Akhirnya menambahkan semua kode ini menjadi sebuah jQuery sederhana <a href="http://translate.googleusercontent.com/translate_c?depth=1&ei=7LFjUdG6JIfmrAe0s4HYDQ&hl=id&prev=/search%3Fq%3Dtutorial%2Bjquery%2Bmobile%26hl%3Did%26client%3Dfirefox-a%26hs%3DrFT%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.com&sl=en&u=http://api.jquery.com/animate/&usg=ALkJrhhSAPpJNQzFnmmkrwmt8YFq3kvvOg">bernyawa ().</a> metode dan kami memiliki scroller kerja indeks kami.</span></p>
<p>
<span> </span> </p>
<p class="nobrdr">
<a href="http://translate.googleusercontent.com/translate_c?depth=1&ei=7LFjUdG6JIfmrAe0s4HYDQ&hl=id&prev=/search%3Fq%3Dtutorial%2Bjquery%2Bmobile%26hl%3Did%26client%3Dfirefox-a%26hs%3DrFT%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.com&sl=en&u=http://spyrestudios.com/demos/jquery-page-index/&usg=ALkJrhjQkCB8p285z5lJ2lsH9ORglNgSTg"><img src="http://spyrestudios.com/wp-content/uploads/jquery-scrolling-index-demo-preview.png" class="frame" alt="jQuery scrollTop Link indeks jangkar bergulir"></a> </p>
<p>
<span> <a href="http://translate.googleusercontent.com/translate_c?depth=1&ei=7LFjUdG6JIfmrAe0s4HYDQ&hl=id&prev=/search%3Fq%3Dtutorial%2Bjquery%2Bmobile%26hl%3Did%26client%3Dfirefox-a%26hs%3DrFT%26rls%3Dorg.mozilla:en-US:official&rurl=translate.google.com&sl=en&u=http://spyrestudios.com/demos/jquery-page-index/&usg=ALkJrhjQkCB8p285z5lJ2lsH9ORglNgSTg"><b>Live Demo</b></a> - <a href="http://spyrestudios.com/downloads/dynamic-page-index-source.zip"><b>Source Code Unduh</b></a></span> </p>
<h2>
 <span> Final Thoughts</span> </h2>
<p>
<span style=""> Trik ini sangat cocok untuk pengembang web yang mencari untuk meningkatkan ramah-an dari setiap user interface digital.</span> <span> Website masih dalam tahap yang sangat muda pertumbuhan, namun maju pesat dengan revolusi kode open source.</span> <span>
 Saya salut setiap pengembang yang dapat menempatkan script ini dengan 
baik, atau bahkan menambahkan ke atasnya melalui fungsionalitas 
tambahan.</span></p>
<p>
<span> </span> </p>
<p>
<span> Anda dapat merasa bebas untuk memeriksa live demo saya di atas dan juga ambil salinan kode sumber proyek.</span> <span style="">
 Semuanya harus cukup mudah untuk mengimplementasikan ke tata letak Anda
 sendiri, dan semua yang perlu Anda ubah adalah nilai-nilai anchor link</span></p>
<p>
<span style=""> </span></p>
<p>
<span style=""><font size="3">SUMBER</font> : http://spyrestudios.com/how-to-build-alphabetical-index-using-jquery/ <br></span></p>
</div>

0 komentar:

Posting Komentar

.:Tutorial DHTML DLL:.

Tutorial tentang Dhtml scripts, Jquery plugins ,Javascript, CSS, CSS3, Html5 Library dll dan penerapannya pada Website, langsung aja kunjungi Website nya dan yang nggak kalah penting Free Yaa !!

.:distrowatch:.

Pengin Banyak tau tentang distro linux Langsung Aja Kunjungi DistroWatch Hmmm, banyak banget distronya, Download dan Pasang Linuxnya Lets Go Boss !!

.:jQuery Tutorial:.

Tutorial jQuery Widget ada disini semua Langsung Ke TKP Boss !!

.:Hirens Boot CD:.

Hiren's Boot CD cukup ampuh untuk membuat Clonning Atau Copy windows, dan banyak tool yang sangat berguna bagi para teknisi komputer maupun yang masih pemula silahkan Download filenya Disini kalo mau lihat tutorialnya membuat Flashdisc Bootable Disini Lumayan buat nambah ilmu dan Tool, Langsung aja Boss !!

Hiren’s BootCD

Bookmark and Share