Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Παρασκευή, Οκτωβρίου 2

0

Πως να δημιουργήσετε Tab Navigation χρησιμοποιώντας το jQuery




Η δημιουργία των tabbed Navigation interfaces έχει γίνει πανεύκολη υπόθεση με την χρήση του  jQuery UI Scripts .
Tab navigation  είναι ένα από το πιό θεμελιώδες στοιχείο στην  σύγχρονη ανάπτυξη  ιστού και στοιχείο το οποίο διευκολύνει τους επισκέπτες να  πλοηγούνται πιο εύκολα σε μια  ιστοσελίδα .
Ας δούμε τώρα πως μπορούμε να το δημιουργήσουμε :





ΒΗΜΑ 1ο :

Προκειμένου να δημιουργηθούν τα αποτελέσματα jQuery , θα χρειαστούμε αρχικά την πιό πρόσφατη  jQuery Scripts , και το jQuery UI με το `Core και τα ‘Tabs’ στοιχεία .
Εάν θα προτιμούσατε, μπορείτε να κατεβάσετε αυτά τα αρχεία από την πηγή jQuery UI , αλλιώς κατεβάστε τα από εδώ :    source_files
Μόλις κατεβάσετε το αρχείο  αποσυμπιέστε το rar και ανεβάστε σε μια υπηρεσία δωρεάν φιλοξενίας και αποθήκευσης για τα αρχεία των χρηστών << π.χ.   http://www.4shared.com/ , http://sites.google.com/  η  όποια εσείς χρησιμοποιείτε >> τα παρακάτω αρχεία :

  •      style  
  •     style2 
  •     style3 
  •     jquery-ui-personalized-1.5.2.packed  
  •    sprinkle 
  •     jquery-1.3.2.min


ΒΗΜΑ 2ο :

Τώρα πάμε  Διάταξη >>  Επεξεργασία HTML >>Επέκταση προτύπων γραφικών στοιχείων και ψάχνουμε στο  πρότυπο μας το  </head> και κολλάμε ακριβώς πάνω από το  </head>  τον παρακάτω κώδικα :

<link href="style3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.5.2.packed.js"></script>
<script type="text/javascript" src="sprinkle.js"></script>


Αλλάζουμε τις γραμμές με το κόκκινο χρώμα , με το  URL των αντιστοίχων αρχείων μας ( π.χ.  <script type="text/javascript" src="http://sites.google.com/site/……./jquery-1.3.2.min.js"></script> ) .
Τώρα κάνουμε Αποθήκευση Προτύπου και πάμε στο επόμενο βήμα .


ΒΗΜΑ 3ο :

Τώρα πάμε  Διάταξη Στοιχεία Σελίδας >> Προσθήκη gadget  >> HTML/JavaScript και εισάγουμε τον παρακάτω κώδικα  :

<div id="tabvanilla" class="widget">
<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>
<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div><!--/popular-->
<div id="recent" class="tabdiv">
<p>Lorem ipsum dolor sit amet.</p>
</div><!--/recent-->
<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div><!--featured-->
</div><!--/widget-->

Τώρα μπορούμε να επεξεργαστούμε το Scripts  εφόσον τελειώσαμε  , αλλάζουμε  τους τίτλους , τα λινκς με αυτούς που θέλουμε εμείς , μπορούμε επίσης να εισάγουμε και windgets  . 

DEMO ΕΔΩ

0:

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS