טאבים לחלופת עמודים מבוססת jquery
במהלך פיתוח האתר שלנו נוצר צורך בין השאר ליצור מנגנון מבוסס טאבים עבור עמוד האודות.
הדבר הראשון שעשינו היה לבדוק את היצע התוספים והספריות הקיימים היום עבור jquery. מהר מאד הגענו לפרוייקט jqueryui שכולל גם את הטיפול בממשק טאבים.
קבצי הג'אווהסקריפט הנדרשים הם:
קוד ה-HTML נראה כך:
<div id="tabs"> <ul> <li> <a href="#tabs-1">tab 1</a> </li> <li> <a href="#tabs-2">tab 2</a></li> <li> <a href="#tabs-3">tab 3</a></li> </ul> <div id="tabs-1"> <p> Text for tab 1.</p> </div> <div id="tabs-2"> <p> text for tab 2.</p> </div> <div id="tabs-3"> <p> text for tab 3.</p> </div> </div>
וקוד הפונקציה נראה בצורתו הבסיסית כך:
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
אנחנו רצינו להוסיף גם אפקטים של פייד
ולכן השתמשנו בקוד הבא
<script type="text/javascript">
$(function() {
$("#tabs").tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
</script>
ניתן לראות כאן את האפשרויות השונות של ממשק הטאבים.
כלומר קוד ה-HTML שאנחנו צריכים הוא:
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.3.2'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">tab 1</a>
</li>
<li>
<a href="#tabs-2">tab 2</a></li>
<li>
<a href="#tabs-3">tab 3</a></li>
</ul>
<div id="tabs-1">
<p>
Text for tab 1.</p>
</div>
<div id="tabs-2">
<p>
text for tab 2.</p>
</div>
<div id="tabs-3">
<p>
text for tab 3.</p>
</div>
</div>
</body>
</html>
עכשיו רק צריך לשלב את העסק הזה עם מערכת הוורדפרס שלנו.
כאמור אנחנו למעשה רצינו ממשק שמחליף תוכן בין עמודים שונים, השלב הראשון היה לייצר תבנית ייחודית עבור עמוד האודות
לאחר מכן הוספנו לקובץ function.php את הקריאה ל-jquery
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
wp_enqueue_script('jquery');
}
ולקובץ header את הקריאה ל-jqueryui ולסקריפט שלנו
<?php wp_head(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
</script>
חשוב לשים לב לקרוא להן אחרי הקריאה לפונקציה wp_head כדי שיטענו רק אחרי הקריאה ל-jquery עצמו.
הדברה האחרון שנותר הוא לייצר את הטאבים, יצרנו מבנה עמודים כך שכל הטאבים הם תתי עמודים של עמוד אודות ואז ניתן להשתמש בקוד הבא:
<div id="tabs">
<!-- tabs navigation menu -->
<ul>
<?
query_posts("post_parent=$post->ID&orderby=order&post_type=page&order=ASC");
while(have_posts()) {
the_post();
echo "<li><a href='#".get_the_ID()."'>".get_the_title()."</a></li>";
}
?>
</ul>
<div class="main">
<?
reset($posts);
/* The tabs loop, each div is a different tab */
while(have_posts()) { the_post();
?>
<div id="<? the_ID(); ?>" class="tabdiv">
<h2><? the_title();?></h2>
<?
the_content();
?>
</div>
<?
}
?>
</div>
</div>
אחלה קוד, פשוט ויפה. רק שימי לב שלא מומלץ לטעון את קוד הג'אווהסקריפט של jQuery בהדר, אלא בפוטר. זה מאט את פעילות הדפדפן כי הוא עוצר להוריד ולהריץ את הקוד הזה לפני שהוא ממשיך הלאה, ובינתיים המשתמש מחכה שהעמוד יטען.
הטיפ הזה ועוד רבים וטובים פה:
http://developer.yahoo.com/performance/rules.html
שים לב שכשעובדים בוורדפרס אני לא טוענת את הקוד ב-header אלא בעזרת wp_enqueue_script
הדרך הנכונה להשתמש בו היא:
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
ואז הוא נטען בפוטר.
כמובן שהשלב הבא הוא להעביר את כל פונקציות ה-js לפוטר
תודה רבה על הקוד,
מה שלא הבנתי..
מה ששמת בקובץ ה function.php
לאיזה פונקציה להוסיף אותו?
או שזה אמור לשבת מחוץ לפונקציה מסויימת?
I admit, I have not seen this web page for a long time, however, it was another pleasure to see such an fantastic topic and overpass it. Thanks for helping making people more aware of wonderful points.
This is usually a remarkable post by the best way. I am going to don't wait and bookmark this post for my sis to try in a while tomorrow. Keep up the great quality work.
Greetings your website seems to be great .I agree you are working your straight knowledge.I would love to know many more features of your website
I am speechless. It is a fantastic blog and really engaging too. Great work! That is not likely a lot coming from an amateur blogger like me, nevertheless it's all I may assume after enjoying your posts. Nice grammar and vocabulary. Unlike other blogs. You actually know what you're speaking about too. A lot that you just made me need to read more. Your weblog has change into a stepping stone for me, my fellow blogger. Thanks for the detailed journey. I really enjoyed the 6 posts that I've read so far.