PDA

Orijinalini görmek için tıklayınız : JQuery ile Basit Alfabetik Sözlük



Ümit
11-11-2011, 21:40
1617

HTML, CSS, jQuery ve Photoshop (Butonların arkaplan tasarımı için) kullanılarak tasarlanmış. Her biri için ayrı <div> etiketleri tanımlandığından CSS ile istediğiniz görünümü verebileceğiniz jQuery sözlük uygulaması.


HTML

<div id="body-container">
<div class="glossary-container">
<ul class="firstUL">
<li id="a" class="selected">A</li>
<li id="b">B</li>
<li id="c">C</li>
<li id="d">D</li>
<li id="e">E</li>
<li id="f">F</li>
<li id="g">G</li>
<li id="h">H</li>
</ul>
</div> <!-- Close of glossary-container -->
<div class="content-container">
<!-- A -->
<div id="content-for-a" style="background-color:#d2e2fc">
<!-- Content for A -->
</div>

<!-- B -->
<div id="content-for-b">
<!-- Content for B -->
</div>

<!-- C -->
<div id="content-for-c">
<!-- Content for C -->
</div>

<!-- D -->
<div id="content-for-d">
<!-- Content for D -->
</div>
</div> <!-- Close of content-container -->
</div> <!-- Close of body-container -->


CSS

<style>

/* Making margin and padding to 0, since by default the body will be allocated some amount
of pixels of margin and padding. */
body{
margin:0;
padding:0;
}

#body-container{
width:415px; /* Given a constant width of 415px to body-container div */
height:500px; /* Given a constant height of 500px to the div */
margin:0 auto; /* This will align the div to center */
border:1px solid #3285ef; /* Giving the border */
}

#body-container .glossary-container{
clear:both; /* This will not allow floating elements on either sides */
}

#body-container .content-container{
height:430px; /* Given a constant height of 430px to the div */
width:415px; /* Given a constant width of 415px to the div */
overflow:auto; /* Scroll bar is shown when content is more than specified height */
font-family:'Arial',Verdana,Tahoma; /* Taken the default font to 'Arial' */
font-size:10pt; /* Making font size to 10 points */
clear:both; /* This will not allow floating elements on either sides */
}

#body-container .content-container div{
padding-left:10px; /* Left padding given as 10px */
border-bottom:1px #666666 solid; /* In order to separate each terms given bottom
border color as #666666 (gray) with 1px */
}

#body-container .content-container div h2{
margin-top:0px; /* Making the top margin to 0px */
}

#body-container .content-container p.return-to-top{
color:#0066FF; /* Giving text color to Return to top text */
text-decoration:underline; /* The text will be underlined */
text-align:right; /* Text will be aligned to right */
margin-right:10px; /* Given some margin 10px to right */
cursor:pointer; /* Making the cursor to 'hand' */
}

.firstUL{
padding:0px 0px 0px 10px; /* Given some padding to left and 0 padding to
top, right, bottom */
margin:0px; /* margin to 0px */
background-color:#3285ef; /* Given background color */
}

.firstUL li {
background:transparent url(images/link_sprite_img.jpg) no-repeat scroll 0 0;
/* For all li’s(listings) given default background image using CSS Sprite concept */
display:inline; /* Listings will be placed in a line */
font-family:'Arial',Verdana,Tahoma; /* Setting the font to 'Arial' */
font-size:16pt; /* Setting the font size to 16 points */
font-weight:bold; /* Making the text to bold */
padding:10px 15px 22px; /* Given some padding to top, right, bottom and left */
line-height:70px; /* This property specifies the line height */
cursor:pointer; /* Making the cursor to 'hand' */
}

.firstUL li.selected{
background:transparent url(images/link_sprite_img.jpg) no-repeat scroll 0px -57px;
/* When any listing is highlighted, we are given the background to image using CSS
Sprite concept */
color:#ffffff; /* Making the font color 'white' */
font-weight:bold; /* Making text bold */
}
</style>


jQuery

<script language="javascript" type="text/javascript">
$(document).ready(function() {
//below code is for high-lighting the link and scroll to particular DOM Element as well
$(".firstUL li").each(function() {
$(this).click(function() { //On click of any Alphabet
$(".firstUL li").removeClass("selected"); //Initially remove "selected" class if any
$(this).addClass("selected"); //Add "selected" class for the clicked one
elementClick = $(this).attr("id"); //get respective 'Id' for example 'a','b','c'.. etc.,
$(".content-container").scrollTo($("#content-for-"+elementClick), 800);
//scrollTo particular DOM Element
$(".content-container div").css({'background-color' : '#ffffff'});
//set the background color to default, that is white
$(".content-container #content-for-"+elementClick).css({'background-color' : '#d2e2fc'});
//set the background color to light-blue to that div
});
});

//When "Return to Top" is clicked highlight the first Alphabet that 'A' and scroll to top.
$('.return-to-top').click(function(){
$(".firstUL li").each(function() {
$(".firstUL li").removeClass("selected"); //Remove classname "selected"
});
$("#a").addClass("selected"); //Add a class named "selected" to the first Alphabet
$(".content-container").scrollTo($("#content-for-a"), 800);
//This is for scrolling to particular element that is "A" here...
$(".content-container div").css({'background-color' : '#ffffff'});
//set the background color to default, that is white
$(".content-container #content-for-a").css({'background-color' : '#d2e2fc'});
//set the background color to light-blue to that div
});
});
</script>


Örnek Sayfa (http://www.developersnippets.com/snippets/jquery/alphabetical_glossary/alphabetical_glossary.html)

İndir (http://www.developersnippets.com/snippets/jquery/alphabetical_glossary.zip)

Kullanım (http://www.packtpub.com/article/simple-alphabetical-glossary-using-jquery)