‫Htm - אחלה טיפים לבניית אתרים » jQuery‬

‫הוספת כתוביות לתגית וידאו‬

‫אורן רוט‬ — Tue, 15 Dec 2009 14:48:31 +0000

הוספת כתוביות לסרטון וידאו זה בהחלט לא דבר חדש. בטכניקת הארדסאב (hard-sub) ניתן לצרוב את הכתוביות על גבי הסרטון ולעלות אותו לאינטרנט ובטכניקת סופטפאב (soft-sub) ניתן להציג סרטון עם כתוביות באמצעות שילוב של טכנולוגיית פלאש. מה שאני אלמד אתכם היום היא טכניקת סופטסאב להוספת כתוביות לסרטון המתנגן בתגית וידאו.

במדריך היום אנו נשתמש בסרטון וידאו בפורמט OGG או OGV (פורמט OGV הוא למעשה מקרה פרטי של OGG מכיוון ו-OGG יכול להתייחס גם לסאונד) ובכתוביות בפורמט SRT.

היתרונות של הטכניקה שנלמד היום היא שהיא משתמשת בפורמטים פתוחים (OGG ו-SRT), היישום שלה מאוד פשוט ודינאמי ובתוך קובץ הכתוביות אנחנו יכולים לשלב תגיות HTML שיופיעו מאוחר יותר כחלק מן הכתוביות.

<דוגמא><קוד>

קוד ה-HTML

בואו תחילה נביט בקוד ה-HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
<script type="text/javascript" src="video_subtitles.js"></script>

<style type="text/css">
#subtitle {
background-color: rgba(255, 255, 255, 0.7);
padding:10px 0;
position: absolute;
bottom: 0;
width: 100%;
color: black;
visibility: hidden;
font-size: 1em;
text-align:center;
direction:rtl;
}

#video {
width:432px;
height:240px;
direction:ltr;
}
</style>

</head>

<body>

id="video" src="video5.ogv" controls="" subtitles="en.srt"></video>
<div id="subtitle" style="visibility: hidden;"></div>

</body>
</html>

וכעת ההסבר. בשורה 4 אנחנו למעשה מוסיפים כהרגלנו בקודש את ספריית ה-jQuery מתוך google. בשורה הבא אנחנו נוסיף את הסקריפט שיגרום לכל הכתוביות להופיע (מקורהסקריפט הוא מהבלוג mozbox).

לאחר מכן בין שורות 7-26 אנחנו מגדירים עיצוב CSS לוידאו ולשורת הכתוביות, אני לא ארחיב על נושא העיצוב.

ועכשיו הגענו לעיקר, שורות 32-33 בואו נביט בהם שוב:

1 2	id="video" src="video5.ogv" controls="" subtitles="en.srt"></video> <div id="subtitle" style="visibility: hidden;"></div>

הוספנו למעשה שני דברים:

תגית וידאו - התגית מכילה id בשם video, קישור לקובץ הוידאו (בפורמט OGV), לחצני פעולה (המאפיין controls לא צריך לקבל שום ערך) וקישור לקובץ הכתוביות שלנו (בפורמט SRT).

אלמנט div ריק - האלמנט מכיל id בשם subtitles והוא מוסתר.

אם פעלתם לפי כל ההוראות עד עכשיו צריך להיות גם לכם סרטון עם כתוביות. אתם מוזמנים להוריד את קבצי המקור ולהביט בקוד הJS שמפעיל את הכתוביות.

שימו לב! הסרטון נתמך אך ורק בדפדפנים מודרנים שתומכים בתגית video (תקן HTML 5). קרי Firefox 3.1/3.5 או chorme.

עוד באותו נושא:

‫מפת אתר צבעונית בעזרת jQuery‬

‫אורן רוט‬ — Sun, 15 Nov 2009 10:25:32 +0000

בתור בוני אתרים אנחנו נתקלנו לא פעם אחת בצורך ליצירת מפת אתר, אם זו מפת אתר XML או מפת אתר מעוצבת. הסיבות לבניית מפות אתר הם מגוונות, סיפוק מנועי החיפוש ועזרה לגולש בניווט באתר. למרות שהצורך המקורי ליצירת מפות אתר היה דווקא השני (עזרה למנווט באתר), היום כמעט ולא נראה גולשים מנווטים דרך מפת האתר. אם את שואלים מה הסיבה לכך, לדעתי, מפות אתר פשוט לא ידיותיות למשתמש. בסרטון ההדכה שאני אתן לכם היום אני מסביר איך להוסיף קוד jQuery דינמאי ופשוט, על-מנת ליצור מפת אתר ידודתית יותר ומסודרת יותר. את המדריך הזה לקחתי מכריס קויר מאתר css-tricks, שפרסם מאמר על הטכניקה הזו באתר Smashing Magazine.

<דוגמא><קוד>

ברשותכם חילקתי את הסרטון לשני חלקים, כל חלק כ-5 דקות:

להלן התכנים שהוסברו בסרטון:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<link rel="stylesheet" href="../demoStyle.css" type="text/css" media="screen, projection">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #222; }

h1,p {color:#e6e6e6;}

a { text-decoration: none; color: #eee; display: block; padding: 4px 0;}
a:hover { text-decoration: underline;color: #eee; }

ul{
padding: 8px 25px;
list-style: none;
background: #282828;
}
ul ul { background: #393939; }
ul ul ul { background: #4b4b4b; }
ul ul ul ul { background: #5a5a5a; }
</style>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script src="js/sitemap.js" type="text/javascript"></script>
</head>
<body>
<div class="push-2">
<ul>
<li>
<a href="/category/בניית_אתרים">בניית אתרים</a>
<ul>
<li>
<a href="/tag/html-5">HTML 5</a>
<ul>
<li><a href="/2009/10/26/html-5-מה-נכנס-ומה-יוצא-חלק-א/">HTML 5 – מה נכנס ומה יוצא? – חלק א'</a></li>
<li>
<a href="/category/חדשות/">הרצאות</a>
<ul>
<li><a href="/2009/11/13/סיכום-של-יום-השימושיות/">כנס יום ה-Usability</a></li>
<li><a href="/2009/09/28/סיכום-מפגש-העשרה-של-איגוד-האינטרנט-היש">סיכום מפגש העשרה של איגוד האינטרנט הישראלי 2009</a></li>
</ul>
</li>
<li><a href="/2009/10/26/html-5-מה-נכנס-ומה-יוצא-חלק-ב/">HTML 5 – מה נכנס ומה יוצא? – חלק ב' </a></li>
</ul>
</li>
<li><a href="/2009/09/22/ולידציה-נעה-לשליחת-טפסים/">ולידציה נעה לשליחת טפסים</a></li>
<li><a href="/2009/10/25/קוד-קצר-להצגת-תוכן-תיקייה">קוד קצר להצגת תוכן תיקייה</a></li>
<li>
<a href="/tag/jquery/">jQuery</a>
<ul>
<li><a href="/2009/10/21/תיבת-הצעות-לשורת-טקסט-בעזרת-תוסף-json-ו-jquery">תיבת הצעות לשורת טקסט בעזרת תוסף JSON ו-jQuery</a></li>
<li><a href="/2009/10/22/הפיכת-טופס-לתהליך-הרשמה/">הפיכת טופס לתהליך הרשמה</a></li>
<li><a href="/2009/10/14/שיתוף-תכנים-בגרירה">שיתוף תכנים בגרירה</a></li>
<li><a href="/2009/09/30/היפוך-של-אנגלית-לעברית-באמצעות-ajax">היפוך של אנגלית לעברית באמצעות AJAX</a></li>
</ul>
</li>
<li><a href="/2009/09/19/שינוי-כתובות-עם-mod_rewrite">שינוי כתובות עם mod_rewrite</a></li>
<li><a href="/2009/09/23/יישום-שינוי-כתובות-עם-mod_rewrite-פרק-ב/">יישום שינוי כתובות עם mod_rewrite – פרק ב'</a></li>
<li><a href="/2009/09/17/fusion-charts-דרך-יפה-להציג-נתונים/">Fusion Charts – דרך יפה להציג נתונים </a></li>
</ul>
</li>
<li><a href="/category/עיצוב_אתרים/">עיצוב אתרים</a></li>
<li><a href="/category/חדשות/">חדשות</a></li>
<li><a href="/category/המלצות/">המלצות</a></li>
</ul>
</div>

</body>
</html>

JavaScipt – sitemap.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

$(function(){
$("ul").css("opacity","0.7");

$("ul").doFade({ fadeColor : "#362b40"});
$("ul ul").doFade({ fadeColor : "#354668"});
$("ul ul ul").doFade({ fadeColor : "#304531"});
$("ul ul ul ul").doFade({ fadeColor : "#72352d"});
});

jQuery.fn.doFade = function(settings) {

settings = jQuery.extend({
fadeColor: "black",
duration: 200,
fadeOn: 0.95,
fadeOff: 0.7
}, settings);

var duration = settings.duration;
var fadeOff = settings.fadeOff;
var fadeOn = settings.fadeOn;
var fadeColor = settings.fadeColor;

$(this).hover(function(){
$(this)
.stop()
.data("origColor", $(this).css("background-color"))
.animate({
opacity: fadeOn,
backgroundColor: fadeColor
},duration)
}, function() {
$(this)
.stop()
.animate({
opacity: fadeOff,
backgroundColor: $(this).data("origColor")
},duration)
});

};

עוד באותו נושא:

‫הפיכת טופס לתהליך הרשמה‬

‫אורן רוט‬ — Thu, 22 Oct 2009 07:38:31 +0000

בהרבה אתרים, במיוחד אתרי קניות, אנחנו נתקלים בטפסים ארוכים. הטפסים מכילים פרטים אישיים, פרטי חשבון, פרטי משלוח ועוד ועוד ועוד. בהרבה מקרים צריך לגלול מטה מכיוון והטופס גבוה יותר מגובה העמוד. כל התיאור הנ"ל יוצר תוצאה לא כל-כך נוחה ורצויה, בהתחשב בכך שאנחנו מעוניינים שבסוף התהליך המשתמש ימלא את פרטי האשראי שלו וישלח לנו את כספו הטוב. אפשר אחרת! במדריך הבא אני אתן לכם פלאגין שהופך טופס פשוט, לתהליך של הרשמה שמחולק לפי שלבים ונושאים.

לפני הכל אני חייב לציין שאת הקוד לקחתי מאתר אהוב עליי "ג'אנקו את וורפ ספיד", החלפתי את האנגלית לעברית ועכשיו אתם יכולים להשתמש בזה בקלות.

<דוגמא><קוד>

מה אנחנו צריכים?

טופס. זה כמעט ומספיק, עוד דבר אחר שאנחנו צריכים לוודא שהטופס מחולק לfieldset שלכל אחד יש legend. בואו נביט במבנה:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form id="SignupForm">
<fieldset>
<legend>פרטי חשבון</legend>
//...חלק אחד....
</fieldset>
<fieldset>
<legend>פרטי חברה</legend>
//...חלק שני...
</fieldset>
<fieldset>
<legend>פרטי תשלום</legend>
//...חלק שלישי...
</fieldset>

<input id="SaveAccount" type="button" value="שלח טופס" />
</form>

המהות של fieldset הוא לחלק את הטופס לחלקים, בתוך כל fieldset אנחנו נתחום חלקי טופס הקשורים אחד לשני (הוא מחלק את הטופס לקבוצות). תפקיד ה-legend הוא לתת כותרת ל-fielset, הוא חייב לבוא מיד לאחר פתיחת התאג fieldset.

זה הכל מבחינת ה-HTML. כעת כל שעלינו לעשות זה להוסיף את הקוד ה-jQuery (שהורדתם בכפתור הקוד למעלה), ולהפעיל אותו על הטופס הרצוי. מה שקוד ה-JS שאנחנו נתמיע יעשה, זה להציג כל פעם fieldset שונה, ובעזרת הכפתורים שהסקריפט יצור יהיה אפשר לנווט בין ה-fieldsets.

הוספת קוד הפלאגין

ראשית נוסיף שלושה קבצים חיוניים:

jQuery
סקריפט הפיכת טופס לתהליך (formToWizard.js)
גליון עיצוב לתהליך (formToWizard.css)

ככה זה נראה (בין תגיות ה-Head):

1
2
3

כעת נוסיף את קוד ההפעלה (נשים לב שלמעלה ה-ID של ה-form הוא SignupForm וה-ID של כפתור השליחה הוא SaveAccount):

1
2
3
4
5
6
7

כעת הטופס אמור להפוך לתהליך. את השם לכל תהליך הוא לוקח מה-legend של כל fieldset.

זה הכל! אני ממש אהבתי את הסקריפט הזה מכיוון והוא לא מתערב (פולשני) בתוך קוד ה-HTML, ונותן מענה אמיתי לטפסים ארוכים.

מה איתכם? אהבתם? חושבים שהסקריפט שימושי? אשמח לשמוע על כך בתגובות!

עוד באותו נושא:

‫תיבת הצעות לשורת טקסט בעזרת תוסף JSON ו-jQuery‬

‫אורן רוט‬ — Wed, 21 Oct 2009 09:59:57 +0000

במדריך הוידאו הבא אני אספר לכם כיצד תוכלו להוסיף תוסף פשוט לשורת טקטס וליצור שורת טקסט דינאמית. התוסף גורם לכך שכאשר מקלידים אות בשורת הטקסט מופיעות הצעות מתחת לתיבת עם אפשרויות השלמה למה שהקלידו בשורת הטקסט. אפשר להוסיף תמונה ואפשר גם להוסיף תיאור.

<דוגמא><קוד>

לינקים קשורים לסרטון:

הורדת התוסף מאתר jQuery

קוד:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<html>
<head>
<link rel="stylesheet" href="css/jsonSuggest.css" type="text/css" media="screen, projection">
</head>
<body>
<input type="text" id="suggest" size="40" style="margin:3px -2px;" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
<script language="JavaScript" src="js/jquery.jsonSuggest.js"></script>
<script language="JavaScript" src="js/json2.js"></script>
<script type="text/javascript">
var mySuggestions = [
{
text: 'דלישס',
image: 'icons/Delicious.png',
extra: 'דוגמא מתוך אתר <a href="http://htm.co.il">htm.co.il</a>'
},
{
text: 'דיג',
image: 'icons/Digg.png',
extra: 'דוגמא מתוך אתר <a href="http://htm.co.il">htm.co.il</a>'
},
{
text: 'פליקר',
image: 'icons/Flickr.png',
extra: 'דוגמא מתוך אתר <a href="http://htm.co.il">htm.co.il</a>'
},
{
text: 'מיספייס',
image: 'icons/MySpace.png',
extra: 'דוגמא מתוך אתר <a href="http://htm.co.il">htm.co.il</a>'
},
{
text: 'יוטיוב',
image: 'icons/Youtube.png',
extra: 'דוגמא מתוך אתר <a href="http://htm.co.il">htm.co.il</a>'
},
{
text: 'רדיט',
image: 'icons/Reddit.png',
extra: 'דוגמא מתוך אתר <a href="http://htm.co.il">htm.co.il</a>'
},
{
text: 'סטמבל-אפון',
image: 'icons/StumbleUpon.png',
extra: 'דוגמא מתוך אתר <a href="http://htm.co.il">htm.co.il</a>'
},
{
text: 'טוויטר',
image: 'icons/Twitter.png',
extra: 'דוגמא מתוך אתר <a href="http://htm.co.il">htm.co.il</a>'
}

];
$(function(){
$('#suggest').jsonSuggest(mySuggestions);
});

</script>
</body>
</html>

עוד באותו נושא:

‫שיתוף תכנים בגרירה‬

‫אורן רוט‬ — Wed, 14 Oct 2009 09:22:46 +0000

שיתוף תכנים היא אחת המאפיינים של רשת האינטרנט, הכל משותף. ראית משהו יפה או מעניין, כנראה זה כבר בדרך לרשימת התפוצה שלך במייל, מפורסם בפייסבוק או שלחת טוויט בנושא. בתור בעלי אתרים, יש לנו אינטרס גדול מאוד להגדיל את שיתוף התכנים מתוך האתר שלנו. המתמטיקה פשוטה, יותר שיתוף = יותר כניסות לאתר. באמצעות התמאת הקוד שאני אתן לכם כאן, תוכלו להוסיף class וכותרת לקטעי וידאו או תמונות ובאמצעות קוד jQuery יתווסף לשונית קטנה בשם: "שתף בגרירה!", לכל וידאו או תמונה.

<דוגמא><קוד>

שיתוף תכנים באמצעות גרירה

את הרעיון לסקריפט הזה שאבתי מאתר meebo. הם יצרו סקריפט דומה (קצת יותר משוכלל) שמאפשר לשתף בגרירה, שלחתי להם מייל בבקשה לקבל את הקוד לשימוש באתר שלי, אך הם סירבו לעת עתה. לא יכלתי לבזבז זמן אז פשוט החלטתי לבנות את הסקריפט בעצמי ובעברית.
אם תסתכלו בדוגמא, תוכלו לראות שמעל לסרטון ישנה תווית קטנה שאומרת, "שתפו בגרירה!". כאשר ננסה לגרור את התווית, המסך יוחשך ויופיע תפריט עם ארבע אפשרויות: טוויטר, פייסבוק, גוגל ואימייל. עם נשחרר את התווית שגררנו על כל אחת מן האפשרויות, תפתח לנו לשונית חדשה בדפדפן שמציגה את מסך השיתוף של האתר הנבחר, כל השדות של השיתוף כבר מוזנים כל שנותר על המשתמש לעשות הוא ללחוץ שלח.

איך מטמיעים את הקוד

דבר ראשון שצריך לעשות הוא להוריד את כל קבצי הקוד מהקישור כאן הוא למעלה (קוד). לאחר שנפתח את קובץ ה-rar נראה שמה שהקבצים שהורדנו הם:

dragShare.js
dragShare.css
קובץ html
תיקיית js
תיקיית תמונות

על מנת שהקוד יפעל, אנו צריכים לטעון לתוך האתר שלנו את תיקיית ה-JS וכמו כן את שתי הקבצים הראשונים (קובץ JS וקובץ CSS).

1
2
3
4
5
6
7
8
9

//ספריות jQuery
<script type="text/javascript" src="js/jquery-1.3.2.min.js">script>
<script type="text/javascript" src="js/ui.core.js">script>
<script type="text/javascript" src="js/ui.draggable.js">script>
<script type="text/javascript" src="js/ui.droppable.js">script>

//שני הקבצים הראשונים
<script type="text/javascript" src="dragShare.js">script>
<link rel="stylesheet" type="text/css" href="dragShare.css" />

ארבעת קבצי ה-JS הראשונים בגררנו הם (לפי הסדר): ספריית jQuery, ספריית UI של jQuery, ספריית גרירה וספריית השמטה. לאחר מכן טענו את קוד ה-JS שאני הכנתי (חשוב מאוד לשמור על סדר הטעינה הזה).

האמת שאנחנו ממש קרובים לסוף, לאחר שטענו את הקבצים החיוניים, כל שעלינו לעשות הוא למצוא אלמנט מסוג object או img ולהוסיף לו שני משתנים: class ו-title.

1	<object class="share" title="שיתוף תכנים באמצעות גרירה" ...>

בדוגמא זו הוספנו תווית גרירה לאלמנט של וידאו, object. המאפיין class צריך להכיל את הערך "share" והמאפיין title צריך להכיל את הכותרת המתאימה לתוכן המשותף (כותרת זו תוצג כאשר ישתפו את התוכן).

זה הכל! כעת לאחר טעינת העמוד, קוד jQuery יעבור אוטומטית על כל האלמנטים שמכילים class="share" ויוסיף להם תווית גרירה.
תטמיעו את הקוד באתרכם ותזמינו את המבקרים באתרכם לשתף בגרירה.

עוד באותו נושא:

‫היפוך של אנגלית לעברית באמצעות AJAX‬

‫אורן רוט‬ — Wed, 30 Sep 2009 08:35:40 +0000

אתם בטוח מכירים את זה שאתם רוצים לכתוב טקסט בעברית ואז במקום "לא נראה לי" אתם מקבלים על המסך "kt brtv kh", אבל לא לפני שהחבר לידכם מספיק להוציא צעקת יאוש של "אווו אוו אוו, אתה כותב באנגלית". אם הזדהתם עם הראשון אז אתם בטוח מכירים את זה שיש שדות טקסט מסויימים שמוכנים לקבל רק עברית, אז עד שימציאו שדות יעודיים לשפה אחת (אולי HTML5?) אני מגיש לכם כאן פתרון פשוט למימוש, שיגרום להחלפה מידית של טקסט שמוזן באנגלית בשדה מסויים לעברית.

<דוגמא><קוד>

חוץ מבאתר "אגד" אני לא זוכר איפה ראיתי דוגמא לשדה טקסט שהופך תווים באנגלית לעברית, תוך כדי הזנתם. מה שאגד עשו שם ואני מימשתי בדוגמא הזאת, הוא למעשה שדה טקסט פשוט שמאפשר להכניס לתוכו רק תווים בשפה העברית וכאשר מנסים להכניס תווים בשפה האנגלית הוא הופך תוך כדי (בלי שהגולש אפילו שם לב) את התווים לעברית.
מה שטוב בקוד כזה הוא שהוא חוסך הרבה זמן לגולש (ותסכול) במידה והוא טעה, וכן נותן אינדקציה לכך ששדה הטקסט הנוכחי חייב להיות בעברית בלבד.

בואו נעבור כעת לקוד, אנחנו נתחיל עם ה-HTML:

1
2
3
4
5
6
7
8
9
10
11

<html>
...
<body>

<form>
<p><label for="textHeb">הכנס כאן את הטקסט (כדאי לנסות אנגלית): </label></p>
<textarea type="text" name="textHeb" id="textHeb" onkeyup="ajaxFunction();"></textarea>
</form>
....
</body>
</html>

כל מה שיצרנו זה טופס ובתוכו textarea עם ID ושם-"textHeb". בנוסף הוספנו לו קריאה לפונקציה ajaxFunction (שאותה ניצור בהמשך) כאשר לוחצים על תו – כלומר, כאשר מקלידים בתוך הטופס, לאחר כל הקלדה קוראים לפונ' ajaxFunction.

כעת נעבור לכתיבת קוד ה-AJAX. למי שלא יודע AJAX היא לא שפה, אלא למעשה טכניקה לשילוב של JS עם גישה לשרת (דרך פרוטוקול XMLHttpRequest). ישנם כמה דרכים למימוש הטכניקה הזו, אני בחרתי לדעתי בפשוטה מכולם והיא מימוש AJAX בשילוב עם ספריית ה-JS השימושית, jQuery.
היתרון הגלום בשילוב הזה הוא כמו בכל קוד jQuery, המימוש הרבה יותר פשוט וקצר. אז בואו נעיף מבט בקוד שמתווסף לנו בין תגיות ה-Head:

1
2
3
4
5
6
7
8
9
10
11

אם זה נראה קצת מסובך אז עוד מעט הכל יראה מאוד פשוט. נתחיל, בשורה הראשונה אנחנו מוסיפים קישור לספריית ה-jQuery. עוד לא הסברתי את זה באף מאמר כאן אבל הסיבה שאני מקשר לספריה שנמצאת בגוגל ולא מקשר לספריה שנמצאת בשרת שלי היא מכיוון ו-jQuery היא ספרייה מאוד שימושית ויש הרבה מאוד סיכוי שהגולש שנכנס לאתר שלי כבר היה באתר אחר בו השתמשו ב-jQuery (דרך גוגל) והספרייה שמורה לו במטמון. כך אני יכול לחסוך את זמן הטעינה של הספרייה.
בשורה השלישית אנחנו יוצרים את הפונקציה ajaxFunction, הפונקציה שקוראים לה לאחר כל הקלדה בתיבת הטקסט שלנו.
כעת אנחנו פונים למימוש של ajax ב-jQuery (שורה 4). בפנייה לאג'קס נפתחים לפנינו הרבה אופציות. אני השתמשתי כאן בארבעה משתנים:

url
type
timeout
success

המשתנה הראשון מכיל את כתובת אליה וממנה האג'קס שולח ומקבל נתונים, אנחנו נחזור אליו. המשתנה השני קובע באיזה צורה אנחנו שולחים את הנתונים (get או post). המשתנה השלישי דיי מובן משמו, משך הזמן ל-timeout (במילי שניות, 1000 = שניה אחת). במשתנה הרביעי אנחנו כותבים את הפעולות שאנחנו רוצים לבצע ברגע שהפעולה בוצעה בהצלחה.

בואו נחזור שנייה לתאוריה, מה שאנחנו רוצים שיקרה הוא שכאשר משתמש כותב בתיבת הטקסט שלנו, הטקסט ישלח לאחר כל הקלדה של אות לקובץ חיצוני (במקרה שלנו heb.php). קובץ זה יעבור על הטקסט שנשלח אליו, ויחליף כל תו באנגלית לתו המקביל לו (במקלדת) בעברית, ולבסוף ידפיס את המחרוזת בעברית.

בואו נביט שוב במשתנה ה-url (שורה 5). אנחנו בעצם פונים לקובץ ה-PHP שלנו ומעבירים לו משתנה GET בשם, textHeb. המתשנה מכיל את הערך של תיבת הטקסט שלנו. אני לא אעבור איתכם על קובץ ה-PHP (אתם מוזמנים להוריד את הקובץ ולהביט בעצמכם דרך הכפתור "קוד" בתחילת המדריך), אבל אני אדגיש שתי שורות חשובות מתוך הקובץ.

1 2	header("Cache-Control: no-cache"); header('Content-Type: text/html; charset=utf-8');

השורה הראשונה בעצם אומרת לדפדפן לא לשמור את הדף במטמון (חשוב, על מנת שנוכל לקבל נתונים עדכניים כל הזמן). בשורה השנייה אנחנו קובעים את המסמך בקידוד utf-8 – הנקודה הזו מאוד קריטית אם אנחנו רוצים לראות עברית ולא רק קישקושים.

זה הכל לקובץ ה-PHP, כמו שאמרנו הקובץ מקבל מחרוזת מלאה בתווים (גם עברית גם אנגלית), כל תו אנגלי נהפך לתו המקביל-מקלדת בעברית שלו ולבסוף מוחזרת המחרוזת בעברית בלבד. כעת אנחנו צריכים לעדכן את תיבת הטקסט, הפעולה הזו מתרחשת תחת המתשנה success.

חזרנו לקוד ה-JS שלנו, כעת בואו נראה מה מופיע תחת המשתנה success:

1
2
3
4
5
6
7
8
9
10
11
12

success:
function(text){
textLen = $("textarea[name=textHeb]").val().length;
if(text.length == textLen)
{
$("textarea[name=textHeb]").val(text);
}
else if($("textarea[name=textHeb]").val().charAt(textLen-1) == ' ' && text.length+1 == textLen)
{
$("textarea[name=textHeb]").val(text+' ');
}
}

בתוך המשתנה success יצרנו פונקציה עם משתנה text. המתשנה text הוא למעשה הערך שמוחזר (הודפס) בקובץ ה-PHP.
למעשה יכלנו לקצר את כל הקוד ולכתוב רק:

1
2
3
4

success:
function(text){
$("textarea[name=textHeb]").val(text);
}

הקוד הנ"ל למעשה מכניס את הערך המוחזר מקובץ ה-PHP לתוך תיבת הטקסט שלנו. הבעיה היא שאנחנו נתקלים בשני באגים. הבאג הראשון מופיע כאשר המשתמש מקליד טקסט והשרת מחזיר תגובה בזמן ההקלדה ומוחק לו את סוף המשפט שהוא כתב (פעולת המרת האנגלית בעברית לוקחת זמן ובנתיים המשתמש יכול להכניס עוד תווים). לשם כך העברתי את המחרוזת החוזרת בדיקה לראות אם אורך המחרוזת שווה לאורך תיבת הטקסט שלנו, ורק במקרה כזה יתבצע ההחלפה (שורה 4).
הבאג השני הוא שכאשר התו האחרון שנשלח המחרוזת הוא סימן רווח, התו יעלם מכיוון ולא ניתן לשלוח רווחים בוסף מחרוזות. במקרה כזה אני שוב מוודא שאורך תיבת הטקסט שווה לאורך המחרוזת שחזרה מהשרת (+1) ומעדכן את תיבת הטקסט במחרוזת המוחזרת + סימן רווח.

לסיום אני רק רוצה לציין שהמימוש כאן ב-AJAX הוא לא הכרחי ואפשר לעשות את הבדיקות וההחלפה ב-JS בלבד, הסיבה שהשתמשתי ב-AJAX היא על מנת להדגים את הטכנולוגיה ואת הפשטות של הפעלת AJAX באמצעות jQuery.
זה הכל, מקווה שהייתי ברור לכם, אשמח לשמוע מה אתם חושבים על הקוד וגם לענות על שאלות כאן למטה בתגובות.

עוד באותו נושא:

‫טעינת תמונות באמצעות jQuery‬

‫אורן רוט‬ — Thu, 24 Sep 2009 09:46:13 +0000

הצגת אנימצית טעינה בזמן טעינת תמונות הפכה לדבר מקובל, אנחנו רואים את זה בפייסבוק, באתרים עמוסים בתמונות וסתם באתרים שהחליטו להשקיע קצת יותר. האמת, זה ממש פשוט- אז למה לא? במדריך זה אני אסביר לכם איך תוכלו להציג אנימציית טעינה בזמן שהתמונות באתרכם נטענות וכאשר התמונה טעונה היא תוצג בפייד אין. בנוסף אני אצ'פר אתכם בשני לינקים לאתרים מהם תוכלו לבחור מבין מבחר עצום של אנימציות טעינה.

<דוגמא><קוד>

אם אתם שואלים את עצמכם למה בכלל צריך את זה, התשובה היא לא צריכים. הסיבה שמשתמשים באנימציית טעינה זה על מנת לתת לגולש באתר אינדקציה שהוא מחכה למשהו שיטען ובנוסף, לדעתי, זה מוסיף נופח מקצועי לאתר שלכם.

ונעבור לקוד:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

מה שעשיתי כאן הוא ליצור DIV עם הקלאס loading וה-ID שלו הוא loader, הוספתי קצת CSS כדיי ליפיף את הDIV אבל מה שחשוב זה שהוספתי לקלאס רקע עם תמונת הטעינה ממורכזת:

1
2
3

DIV#loader.loading {
background: url(images/spinner.gif) no-repeat center center;
}

כאשר התמונה תטען אנחנו נמחוק את הקלאס מה-DIV וכך תמונת הטעינה תעלם.

כעת נעבור לקוד ה-jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

בשורה הראשונה אנחנו טוענים את ספריית ה-jQuery. בשורה מס' 5 אנחנו יוצרים אלמנט של תמונה (ריק), בשורה 12 אנחנו מגדירים את מאפיין ה-src של התמונה (לינק לקובץ אותו הוא ינסה לטעון).
מה שנותר לנו זה להוסיף שתי פונקציות, אחת לכאשר התמונה נטענת (שורות 6-9) ואחת לכאשר יש בעיה בטעינת התמונה (10-11).
בפונקציה הראשונה, load, מה שקורה הוא שדבר ראשון מעלימים את התמונה (על מנת ליצור אפקט הופעה אח"כ), מוחקים את קלאס הטעינה מה-DIV ומוסיפים ל-DIV את התמונה (שורה 8), לאחר מכן יוצרים אפקט של פייד אין לתמונה וכך התמונה מופיעה בצורה נעימה.
את הפונקציה השנייה לא מימשתי אבל אתם מוזמנים לממש אותה כרצונכם.

וזה הקוד המלא של הדף:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

ועכשיו כפי שהבטחתי שני אתרים להורדת אנימציית טעינה (קבצי gif):

אתר ajaxload
אתר LoadInfo

שני האתרים הללו מציעים הורדה של תמונות gif מונפשות. אפשר להגדיר מאוד בפשטות את צבע הרקע של התמונה ואת צבע האנימציה להתאמה מושלמת לאתרכם. את התמונה הרצויה לכם תוסיפו כתמונת רקע ל-DIV הטעינה (בהגדרת הקלאס שלו).

עוד באותו נושא:

‫ולידציה נעה לשליחת טפסים‬

‫אורן רוט‬ — Tue, 22 Sep 2009 16:18:43 +0000

כבר זה הרבה זמן שבשליחת טפסים (כמו ביצירת קשר, מתן פידבק…) אנחנו משתמשים בולידציה צד לקוח, שזה אומר, שלפני שאנחנו שולחים טופס מלא בנתונים אנחנו בודקים כי אכן הנתונים תואמים לדרישות השדות (איימיל יהיה מלא בכתובת מייל תיקנית, טלפון יהיה מורכב ממספרים בלבד). שדה שלא בר-תוקף (הביטוי העברי המקביל לולידציה) יסומן לרוב בצבע אדום ותופיע הודעה על מסך המשתמש שהוא אכן צריך למלא מחדש את השדה בצורה נכונה. מה שאני אסביר לכם במדריך זה הוא על אפקט פשוט ב-jQuery שיוצר אפקט תזוזה בשדות שלא מולאו נכון.

<דוגמא><קוד>

את הרעיון למדריך הזה לקחתי מהאתר המומלץ (janko at warp speed) והדוגמא שאני אתן לכם פה היא למעשה מאוד פשוטה. נעשית בדיקה פשוטה ב-jQuery, אם אחד מהשדות הקיימים ריק ואם כן נוצרת אנימציה על אותה שדה והוא נצבע באדום. זוהי הבדיקה:

1
2
3
4
5
6
7
8
9
10

$(document).ready(function() {
$("#signup").click(function() {
var emptyfields = $("input[value=]");
if (emptyfields.size() > 0) {
emptyfields.each(function() {
//האנימציה מתרחשת כאן
});
}
});
});

מה שבעצם קורה כאן, כאשר לוחצים על כפתור השליחה הסקריפט עובר על כל השדות (input) הריקים, אם יש לפחות שדה אחד, הוא מבצע עליו אנימציה.

האנימציה

בואו נסתכל על הקוד לאחר הוספת האנימציה:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {
$("#signup").click(function() {
var emptyfields = $("input[value=]");
if (emptyfields.size() > 0) {
emptyfields.each(function() {
$(this).stop()
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "0px" }, 100)
.addClass("required");
});
}
});
});

האנימציה שהסקריפט מבצע הוא למעשה הזזה שמאלה וימינה של השדה הריק והוספת class שצובע את השדה בצבע אדום.

שימו לב! על-מנת שהסקריפט יעבוד חייבים להגדיר position:relative לכל השדות הנעים (input)

אנחנו ממש קרובים לסיום, הדבר היחידי שחסר לנו הוא הסרת הצבע האדום כאשר השדה הופך להיות בר תוקף.

כל שאנחנו צריכים להוסיף לסקריפט את השורות הבאות:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function() {
$("#signup").click(function() {
resetFields();
var emptyfields = $("input[value=]");
if (emptyfields.size() > 0) {
emptyfields.each(function() {
$(this).stop()
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "0px" }, 100)
.addClass("required");
});
}
});
});
function resetFields() {
$("input[type=text], input[type=password]").removeClass("required");
}

מה שעשינו הוא הוספנו בתחילת הסקריפט קריאה לפונקציה resetFields וכמובן הוספנו את הפונקציה עצמה אשר מוחקת מכל שדות הinput את מאפיין ה-class.

כעת סיימנו. כמובן שהטופס הזה לא שולח שוב דבר, מה שהראתי לכם פה זה איך לבצע אנימציה חמודה על-מנת להראות לגולש בביוור אילו שדות הוא לא מילא כראוי (לא בדקנו שאימייל הוא אימייל תקין או ששדה וידוא סיסמא באמת מכיל את הסיסמא), אתם מוזמנים לשלב את הקוד שהוצג פה יחד עם המדריך המעולה של אינטרנט ישראל ליצירת ולדציה לטפסים ובכך ליצור טופס עם ולדציה מלאה ואנימציה מבהירה.

בהצלחה!