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

נוצר בתאריך אוקטובר 21, 2009 ע"י אורן רוט

קטגוריות: בניית אתרים · תגיות: , ,

הערות: 7 תגובות

 

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

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

קוד:

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>
שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

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

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
אורןNo Gravatar 21 באוקטובר

תודה! פוסט ממש טוב!
אני כמעט בטוח אשתמש בזה בעתיד.

[תגובה]

מישוNo Gravatar 2 בנובמבר

אתה לא אומר גי-קוורי נכון :)
אומרים גיי (כמו שהתחלת) ואז קוורי (כמו קווקר עם "רי" בסוף)

אבל אחלה מדריך :)

[תגובה]

יניבNo Gravatar 8 במרץ

באיזה עורך אתה משתמש?

[תגובה]

אורן רוט8 במרץ

לפרוייקטים בPHP/Zend אני משתמש ב-eclipse
שאר הדברים אני משתמש בnotepad++

ד"א פרסמתי מאמר ממש באתר הזה על notepad++ ועל התוסף שלו

[תגובה]

יניב8 במרץ

כן ראיתי אני עובד עם eclipse ואם היה לו את התוסף הזה זה יכל להיות טוב

[תגובה]

אורן רוט9 במרץ

יש מצב שיש לו משהו כזה צריך לבדוק…

מה שכן, יש לו קיצורים מגניבים, למשל:
/ + Alt – משלים מילה שכתבת זה עוזר

יניבNo Gravatar 9 במרץ

טוב לדעת לא ידעתי את זה^^
אגב האתר שלך מאד שימושי ומענין!! אז קבל ח"!
היה נחמד אם היתה כותב מדריך על דרכי עבודה בPHP… שילוב של OOP כיצד להפריד נכון בין קוד הHtml לPHP ועוד כאלה נושאים ואחרים…
כי זה חלק שחסר להרבה

[תגובה]

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון