| jQuery Sabit Tablo Başlığı Eklentisi |
Sabit tablo başlığı ve diğer açıklamaları görmek için sayfayı aşağı doğru kaydırınız.
Sayfayı kaydırdığınızda her tablo için sabitlenmiş başlık satırlarını görebilirsiniz. Ayrıca satır renklendirmesi aktif
olan tablolarda mouse ile satırların üzerine geldiğinizde renklendiğini göreceksiniz.
| School |
Date |
Time1 |
Time2 |
Time3 |
Facility |
| School1 |
01.01.2009 |
08:00 |
10:00 |
11:00 |
Location of Event |
| School2 |
02.01.2009 |
10:00 |
12:00 |
16:00 |
Location of Event |
| School3 |
03.01.2009 |
8:00 |
10:00 |
17:00 |
Location of Event |
| School4 |
04.01.2009 |
10:00 |
10:43 |
10:00 |
Location of Event |
| School5 |
05.01.2009 |
10:00 |
10:00 |
10:00 |
Location of Event |
| School6 |
06.01.2009 |
10:00 |
21:00 |
10:00 |
Location of Event |
| School7 |
07.01.2009 |
09:00 |
10:00 |
14:00 |
Location of Event |
| School8 |
08.01.2009 |
10:00 |
14:00 |
10:00 |
Location of Event |
| School9 |
09.01.2009 |
6:00 |
10:00 |
10:00 |
Location of Event |
| School10 |
10.01.2009 |
10:00 |
10:00 |
10:00 |
Location of Event |
| School11 |
11.01.2009 |
10:00 |
10:00 |
10:00 |
Location of Event |
| School12 |
12.01.2009 |
7:00 |
10:00 |
10:00 |
Location of Event |
| School13 |
13.01.2009 |
10:00 |
15:00 |
16:00 |
Location of Event |
| School14 |
14.01.2009 |
10:00 |
18:00 |
19:00 |
Location of Event |
| School15 |
15.01.2009 |
10:00 |
10:00 |
13:00 |
Location of Event |
| School16 |
16.01.2009 |
6:00 |
10:00 |
12:00 |
Location of Event |
| School17 |
17.01.2009 |
10:00 |
16:00 |
20:00 |
Location of Event |
| School18 |
18.01.2009 |
10:00 |
11:00 |
17:00 |
Location of Event |
Eklentiyi kullanabilmek için jquery.min.js ve jquery.fixedtableheader.min.js dosyalarını sayfanıza aşağıdaki gibi
ekleyiniz :
<script src="jquery.min.js" type="text/javascript"> </script>
<script src="jquery.fixedtableheader.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function() {
$('.tbl').fixedtableheader();
});
</script>
Son olarak başlığını sabitlemek istediğiniz tablonun class özelliğini "tbl" yapınız.
<table id="tblTest1" class="tbl" >.....
Eklentide 3 tane seçenek bulunmaktadır.
Birinci Seçenek = headerrowsize:1
Varsayılan 1 dir. Bu seçeneği kullanarak birden çok satır içeren tablo başlığını ayarlayabilirsiniz .
Eğer tablonuzdaki başlık satırı tek ise bu ayarı kullanmanıza gerek yoktur.
<script type="text/javascript">
$(document).ready(function() {
$('.tbl').fixedtableheader({
headerrowsize:2
});
});
</script>
İkinci Seçenek = highlightrow: false
Varsayılan false dir. Bu seçenek mouse ile satırların üzerine geldiğiniz renklendirilmesini sağlamaktadır.
<script type="text/javascript">
$(document).ready(function() {
$('.bestupper').bestupper({
highlightrow: true
});
});
</script>
|
Courses -- Autumn 2009 |
|
Course Name
|
Course Tutor
|
Summary
|
Code
|
Fee
|
| Course Name 1 |
Dr. John |
The course will ... .... ..... .... .... ... |
H27 |
$32 |
| Course Name 2 |
Dr. John |
The course will ... .... ..... .... .... ... |
H28 |
$18 |
| Course Name 3 |
Dr. John |
The course will ... .... ..... .... .... ... |
H30 |
$43 |
| Course Name 4 |
Dr. John |
The course will ... .... ..... .... .... ... |
H27 |
$32 |
| Course Name 5 |
Dr. John |
The course will ... .... ..... .... .... ... |
H28 |
$18 |
| Course Name 6 |
Dr. John |
The course will ... .... ..... .... .... ... |
H30 |
$18 |
| Course Name 7 |
Dr. John |
The course will ... .... ..... .... .... ... |
H27 |
$32 |
| Course Name 8 |
Dr. John |
The course will ... .... ..... .... .... ... |
H28 |
$18 |
| Course Name 9 |
Dr. John |
The course will ... .... ..... .... .... ... |
H30 |
$18 |
| Course Name 10 |
Dr. John |
The course will ... .... ..... .... .... ... |
H27 |
$32 |
| Course Name 11 |
Dr. John |
The course will ... .... ..... .... .... ... |
H28 |
$18 |
| Course Name 12 |
Dr. John |
The course will ... .... ..... .... .... ... |
H30 |
$18 |
Üçüncü Seçenek = highlightclass: "highlight"
Varsayılan "highlight" dır. Bu seçenek renklendirilecek satırın css class parametresidir.
Eğer "highlightrow: true" seçeneğini aktifleştirdiyseniz. Renklendirilecek satırın css class parametresini atayabilirsiniz. Etkinleştirmediyseniz bu ayarı kullanmanıza gerek yoktur.
<script type="text/javascript">
$(document).ready(function() {
$('.tbl').fixedtableheader({
highlightclass: 'rowhlite'
});
});
</script>
| TIME TABLE |
| STATION A |
STATION B |
| Work Days |
Saturday |
Sunday |
Work Days |
Saturday |
Sunday |
| 05:50 |
06:00 |
06:20 |
06:20 |
06:30 |
07:25 |
| 06:10 |
06:15 |
06:40 |
06:50 |
07:00 |
07:45 |
| 06:30 |
06:30 |
07:00 |
07:10 |
07:15 |
08:00 |
| 06:45 |
06:45 |
07:20 |
07:30 |
07:30 |
08:20 |
| ¦07:00¦ |
07:00 |
07:35 |
07:50 |
07:45 |
08:35 |
| 07:10 |
07:15 |
07:50 |
08:10 |
08:00 |
08:50 |
| ¦07:10¦ |
07:30 |
08:00 |
08:30 |
08:20 |
09:00 |
| ¦07:20¦ |
07:40 |
08:10 |
08:45 |
08:35 |
09:15 |
| 07:30 |
07:50 |
08:20 |
08:55 |
08:50 |
09:30 |
| ¦07:40¦ |
08:00 |
08:30 |
09:05 |
09:05 |
09:45 |
| 07:50 |
08:10 |
08:50 |
09:15 |
09:15 |
10:00 |
| 08:00 |
08:20 |
09:10 |
09:30 |
09:30 |
10:15 |
| ¦08:15¦ |
08:30 |
09:30 |
09:45 |
09:40 |
10:35 |
| 08:15 |
08:45 |
09:45 |
10:00 |
09:50 |
10:50 |
| 08:30 |
09:00 |
10:00 |
10:15 |
10:05 |
11:05 |
| 08:50 |
09:15 |
10:10 |
10:30 |
10:20 |
11:15 |
| 09:10 |
09:30 |
10:20 |
10:45 |
10:30 |
11:25 |
| 09:30 |
09:45 |
10:35 |
11:00 |
10:45 |
11:45 |
| 09:45 |
10:00 |
10:45 |
11:15 |
11:00 |
11:55 |
| 10:00 |
10:10 |
10:55 |
11:30 |
11:15 |
12:05 |
| 10:15 |
10:25 |
11:10 |
11:45 |
11:30 |
12:20 |
| 10:30 |
10:35 |
11:25 |
12:00 |
11:45 |
12:35 |
| 10:45 |
10:50 |
11:40 |
12:15 |
12:00 |
12:50 |
| 11:00 |
11:05 |
11:55 |
12:35 |
12:20 |
13:05 |
| 11:15 |
11:20 |
12:10 |
12:55 |
12:35 |
13:20 |
| 11:30 |
11:35 |
12:20 |
13:10 |
12:50 |
13:30 |
| 11:45 |
11:55 |
12:35 |
13:25 |
13:00 |
13:45 |
| 12:05 |
12:15 |
12:50 |
13:40 |
13:20 |
14:00 |
| 12:20 |
12:35 |
13:00 |
14:00 |
13:40 |
14:10 |
| 12:35 |
12:50 |
13:10 |
14:20 |
13:55 |
14:20 |
| 12:50 |
13:05 |
13:25 |
14:35 |
14:10 |
14:35 |
| 13:05 |
13:25 |
13:40 |
14:55 |
14:25 |
14:50 |
| 13:20 |
13:45 |
13:55 |
15:10 |
14:40 |
15:05 |
| 13:35 |
14:05 |
14:10 |
15:30 |
15:00 |
15:20 |
| 13:50 |
14:20 |
14:25 |
15:50 |
15:20 |
15:35 |
| 14:10 |
14:35 |
14:35 |
16:05 |
15:40 |
15:45 |
| 14:30 |
14:55 |
14:50 |
16:25 |
16:10 |
16:00 |
| 14:50 |
15:10 |
15:05 |
16:40 |
16:30 |
16:15 |
| 15:10 |
15:25 |
15:15 |
17:00 |
16:50 |
16:25 |
| 15:30 |
15:40 |
15:25 |
¦17:10¦ |
17:05 |
16:35 |
| 15:50 |
15:55 |
15:40 |
17:15 |
17:20 |
16:50 |
| 16:05 |
16:15 |
15:55 |
17:30 |
17:35 |
17:05 |
| 16:20 |
16:35 |
16:10 |
17:45 |
17:50 |
17:20 |
| 16:35 |
16:55 |
16:25 |
17:55 |
18:10 |
17:30 |
| 16:55 |
17:10 |
16:40 |
18:15 |
18:30 |
17:50 |
| 17:15 |
17:30 |
16:50 |
¦18:30¦ |
18:45 |
18:00 |
| 17:30 |
17:45 |
17:05 |
18:45 |
19:00 |
18:20 |
| 17:45 |
18:00 |
17:25 |
19:05 |
19:15 |
18:30 |
| 18:00 |
18:15 |
17:40 |
19:20 |
19:30 |
18:45 |
| ¦18:10¦ |
18:30 |
17:55 |
¦19:35¦ |
19:45 |
19:00 |
| 18:20 |
18:50 |
18:15 |
19:45 |
20:00 |
19:15 |
| 18:40 |
19:10 |
18:35 |
20:05 |
20:20 |
19:40 |
| 19:00 |
19:30 |
18:50 |
20:25 |
20:40 |
19:55 |
| 19:15 |
19:50 |
19:05 |
20:40 |
21:00 |
20:10 |
| 19:30 |
20:10 |
19:20 |
20:55 |
21:20 |
20:25 |
| 19:45 |
20:35 |
19:35 |
21:15 |
21:45 |
20:40 |
| 20:05 |
21:00 |
19:55 |
21:30 |
22:10 |
21:00 |
| 20:30 |
21:30 |
20:15 |
21:50 |
22:40 |
21:25 |
| 21:00 |
22:00 |
20:45 |
22:10 |
23:10 |
21:55 |
| 21:30 |
|
21:10 |
22:40 |
|
22:20 |
| 22:00 |
|
|
23:10 |
|
|
Eklentiyi jquery plugin sayfasından indirebilirsiniz