Beberapa pembaca woork diminta untuk saya bagaimana menerapkan seperti itu scrollpane dalam proyek-proyek web mereka. Hal ini sangat sederhana menggunakan jSrcollPane , sebuah plugin jquery yang memungkinkan Anda untuk menggantikan scrollbar vertikal browser standar pada setiap elemen tingkat blok dengan overflow: auto gaya.
Saya mempersiapkan versi sederhana siap untuk menggunakan kembali dalam proyek Anda menggunakan jQuery dan beberapa baris kode CSS3. Anda dapat mendownload kode sumber sini .
Langkah 1. HTML kode
Pertama-tama, Anda harus menyertakan jQuery dan JScrollPane ke dalam tag <head> dari halaman web Anda:
<script type= "text/javascript" src= "jquery-1.3.2.min.js"> </ script>
<script type= "text/javascript" src= "jScrollPane.js"> </ script>
<script type= "text/javascript" src= "jScrollPane.js"> </ script>
Sekarang membuat elemen DIV ke <body> tag halaman Anda. Lapisan ini akan berisi sejumlah elemen anak, untuk tag <p> contoh:
<div id= "section-scroll" class= "scroll-pane">
<p> ... </ p>
<p> ... </ p>
<p> ... </ p>
<p> ... </ p>
</ Div> <p> elemen yang terkandung dalam div dengan id "bagian scroll" =. Anda harus menetapkan kelas CSS gulir-pane dengan properti.:
. Gulir-pane {
width: 400px;
height: 250px;
overflow: auto;
} height: 250px;
overflow: auto;
Sangat penting mengatur ketinggian tetap dan overflow properti untuk "auto". Ini adalah hasilnya:
Sekarang tambahkan kode JavaScript dibawah masuknya JScrollPane (pada tag <head>) untuk menginisialisasi script untuk lapisan dengan ID = "bagian-gulir":
<script type= "text/javascript">
$ (Function ()
{
</ Script> {
$ ('# Bagian-scroll') JScrollPane ().;
}); Anda juga dapat menggunakan script ini dengan beberapa elemen dalam halaman yang sama. Satu-satunya hal yang harus Anda lakukan adalah membuat beberapa lapisan seperti ini:
<div id= "section-scroll-1" class= "scroll-pane"> ... </ div>
<div id= "section-scroll-2" class= "scroll-pane"> ... </ Div>
<div id= "section-scroll-3" class= "scroll-pane"> ... </ Div>
<div id= "section-scroll-2" class= "scroll-pane"> ... </ Div>
<div id= "section-scroll-3" class= "scroll-pane"> ... </ Div>
... Dan mengubah kode JavaScript sebelumnya untuk menginisialisasi scrollpane untuk setiap elemen dengan cara ini:
<script type= "text/javascript">
$ (Function ()
{
</ Script> {
$ ('# Bagian-gulir-1') JScrollPane ().;
$ ('# Bagian-gulir-2') JScrollPane ().;
$ ('# Bagian-gulir-3') JScrollPane ().;
}); $ ('# Bagian-gulir-2') JScrollPane ().;
$ ('# Bagian-gulir-3') JScrollPane ().;
Langkah 2. Kode CSS
Sekarang kita lihat kode CSS. Saya mempersiapkan kode yang sangat dasar Anda dapat dengan cepat menyesuaikan dalam proyek-proyek web Anda. Saya menggunakan border-radius properti untuk merancang elemen HTML dengan sudut membulat. Bagaimana Anda tahu CSS3 border-radius properti native didukung di Safari, Firefox dan Chrome tapi untuk beberapa alasan misterius properti ini tidak didukung di Internet Explorer. Saya sudah menulis posting ini tentang bagaimana memecahkan masalah ini dengan setiap browser saya sarankan anda untuk membaca.
. Gulir-pane {
/ * JScrollPane CSS * /
. JScrollPaneContainer {
}
. JScrollPaneTrack {
. JScrollPaneDrag {
. Gulir-pane {padding: 0;}
Gulir-pane hal. {
width: 400px;
tinggi : 250px ;
melimpah : Auto ;
mengapung : Meninggalkan ;
} tinggi : 250px ;
melimpah : Auto ;
mengapung : Meninggalkan ;
/ * JScrollPane CSS * /
. JScrollPaneContainer {
position: relative;
overflow: tersembunyi;
z-index: 1;
padding-right: 20px;
overflow: tersembunyi;
z-index: 1;
padding-right: 20px;
}
. JScrollPaneTrack {
position: absolute;
kursor: pointer;
kanan: 0;
atas: 0;
height: 100%;
} kursor: pointer;
kanan: 0;
atas: 0;
height: 100%;
. JScrollPaneDrag {
position: absolute;
latar belakang : # CCC;
kursor : pointer;
melimpah : tersembunyi;
-Moz-border-radius : 6px;
-Webkit-border-radius : 6px;
} latar belakang : # CCC;
kursor : pointer;
melimpah : tersembunyi;
-Moz-border-radius : 6px;
-Webkit-border-radius : 6px;
. Gulir-pane {padding: 0;}
Gulir-pane hal. {
-Moz-border-radius: 6px;
-Webkit-border-radius: 6px ;
background: # 232323 ;
padding: 12px ;
warna : # CCC ;
font-size : 14px ;
line-height : 16px ;
} -Webkit-border-radius: 6px ;
background: # 232323 ;
padding: 12px ;
warna : # CCC ;
font-size : 14px ;
line-height : 16px ;
Hasil akhir adalah sesuatu seperti ini:
Anda dapat mengubah bagaimana Anda lebih memilih untuk situs web Anda. Itu saja! Ambil kode sumber.
Untuk informasi lain tentang JScrollPane, thake lihat di halaman resmi .
Tidak ada komentar:
Posting Komentar