Foruma sākums Ieeja Jaunākie ieraksti Dalībnieki Noteikumi
  • Lappuse 1 no 1
  • 1
Forums » JavaScript (arī jQuery u.t.t.) » Vispārīgs forums par JavaScript jautājumiem » Bloku stūrīšu noformējums, izmantojot jQuery bibliotēku
Bloku stūrīšu noformējums, izmantojot jQuery bibliotēku
FisherLVDatums: Trešdiena, 30 Decembrī 2009, 14:47 | Ziņojums # 1
Projekta autors
Grupa: Administratori
Ziņu: 33
Balvas: 0
Reputācija: 0
Bloku stūrīšus var ērti noformēt arī neizmantojot tam attēlus.
Šim nolūkam jāizmanto jQuery bibliotēka, kuru mūsdienās lieto daudz dažādu efektu iegūšanai.
Nepieciešamie faili atrodami zemāk.

1) Piwslēdzam jQuery bibliotēku :

Code
<script type="text/javascript" src="jquery-1.3.1.js"></script>

2) Pieslēdzam stūrīšu noformēšanas skriptu :

Code
<script type="text/javascript" src="jquery.corner.js"></script>

3) Pievienojam nelielu stila bloku :

Code
<style type="text/css">
div.inner { margin: 0; background: #585858; padding: 10px; border:0; zoom:1;} /* Iekšējā bloka izskats */
div.outer { float: left; margin: 15px; background: #c82; padding: 8px; width: 22em } /* Rāmīša izskats */
</style>

4) Aktivizējam stūrīšu formēšanas skriptu :

Code
<script type="text/javascript">
     
$(document).ready(function(){
$("div.inner").wrap("<div class='outer'></div>");
$("div.inner").corner("round 12px").parent().corner("round 18px");
}); /* Rāmīša stūru iekšējais un ārējais diametri */

</script>

5) Šāds izskatīsies bloks ar noapaļotiem stūrīšiem :

Code
<div class="inner"><h1>Virsraksts</h1>Bloka saturs</p></div>

Piemērus var apskatīt šeit un šeit.

Pievienoti faili: jquery-1.3.1.js (118.7 Kb) · jquery.corner.js (8.5 Kb)
 
Forums » JavaScript (arī jQuery u.t.t.) » Vispārīgs forums par JavaScript jautājumiem » Bloku stūrīšu noformējums, izmantojot jQuery bibliotēku
  • Lappuse 1 no 1
  • 1
Meklēšana: