יצירת Dynamic Web Slices בפחות מחמש דקות (פיצ'ר מקסים של IE8)

11 במרץ 2009

9 תגובות

 


כבר כתבתי בעבר על IE8,

שאני אוהב אותו, ומחכה שהוא ייצא בגרסה רשמית,

 

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

אבל , זה לא כולל את IE7,

 

בכל מקרה, רציתי להציג את אחד מהדברים היותר נחמדים שקיים ב IE8, (ממש התלהבתי מזה).

 

אנחנו מדברים על: Dynamic Web Slices.

 

הרעיון לפוסט הגיע מהבלוג הרשמי של IE8,  תוכלו לקרוא שם הרבה יותר, מאשר כאן,

 

אני רוצה להציג בקצרה מה אפשר לעשות, ואיך, בפוסט שם יש מעבר על כל המאפיינים של ה  Dynamic Web Slices.

 

 

לפני שנראה קוד, בואו נראה תוצאה:

WebSliceDemo

 

 

אנחנו רואים, WebSlice, שמציג את השער היציג של המטבעות , ישר מבנק ישראל.

 

נחמד, לא ?,

 

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

 

אז איך עושים את זה ?

 

 

דבר ראשון כמובן שאתם צריכים לייצר את הדף שאתם רוצים, שהוא יהיה התוכן של ה WebSlice,

בדוגמא שלנו, יצרתי דף שמתחבר לבנק ישראל, מוריד קובץ xml, שמכיל את שערי המטבע, ומציג את התוצאות בגריד.

 

תוכלו להוריד את כל הפרויקט מכאן:

 

כעת אחר שיצרנו את הדף,

נכתוב את הקוד שגורם לו להיות מוצג כ WebSlice.

 

הנה:

 



    1 <div class="hslice" id="slCurrency">


    2     <span class="entry-title">Currencies</span>


    3     <a rel="entry-content" href="http://localhost:1731/Default.aspx"


    4         style="display: none;"></a>


    5     <span class="entry-content">Add the Currencies Slice</span>


    6     <span class="ttl" style="display: none;">15</span>


    7     <a rel="bookmark" href="http://localhost:1731/Default.aspx"


    8         style="display: none;"></a>


    9 </div>


 

 

ה class=hslice, גורם ל IE, להבין שה div הוא WebSlice,

וכשתעמדו עם העכבר על ה div, הוא יציע לגולש להוסיף את התוכן כ WebSlice.

 

צריך לתת Id, ל div.

 

ה  span, שמכיל את הclass של entry-titke, יהיה הכותרת של ה WebSlice.

 

ה ttl, מגדיר כל כמה שמן זה יתרפרש (ניתן לשינוי על ידי המשתמש) 

 

וה a של entry-content, יחיל את הלינק להיכן נמצא התוכן שאמור להיות מוצג.

 

ה span הבא אחריו, הוא תוכן כלשהו, (לא ב WebSlice – אלא בדף שבו נמצא הלינק להוספת ה Slice)

 

WebSlice2

 

הלינק שמוגדר כ bookmark, הוא מה שמוצג בשורה התחתונה ב WebSlice,

תוכלו לקבוע שם url שונה  מה url של ה slice, שהגולש יוכל ללחוץ עליו.

 

שימו לב שגודל ברירת מחדל של ה Slice, הוא: 320 על 240.

 

אני לא אאריך מעבר לכך, אבל אני ממליץ לכם לעבור על הפוסט שמסביר בפירוט על הנושא.

 

 

 

דרך אגב, הייתי חייב להתקין את IE8, עבור הפוסט הזה, וגילית באג נחמד בו.

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

אני רואה החזרה את התוכן.

הוסף תגובה
facebook linkedin twitter email

להגיב על יעלה לבטל

האימייל לא יוצג באתר. שדות החובה מסומנים *

9 תגובות

  1. Rotem Bloom11 במרץ 2009 ב 12:58

    נראה פיצ'ר ממש נחמד תודה על השיתוף ועל האיזכור שלי 🙂
    גם אני מחכה ל-IE8 אבל אתקין אותו עד שיצא רישמית ויהיה בשוק כחודשיים.

    ביי רתם

    הגב
  2. יעלה11 במרץ 2009 ב 19:44

    זה נחמד.

    תודה.

    הגב
  3. Avi Pinto11 במרץ 2009 ב 23:05

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

    הגב
  4. משה13 במרץ 2009 ב 19:19

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

    אתם במיקרוסופט נשארים מאחור, רק 2009 ועכשיו נזכרתם.

    : )

    הגב
  5. Shlomo14 במרץ 2009 ב 21:02

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

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

    הגב
  6. תזונה16 בינואר 2010 ב 18:33

    אני ההיתי רוצה להשתמש בפיצר הזה על תוכן של האתר שלי כיצד משנים את הקוד

    הגב
  7. צמחי מרפא4 באוקטובר 2010 ב 19:27

    האתר שלי ב ASP, זה יכול להתאים גם עבורי?

    תודה

    הגב
  8. shlomo4 באוקטובר 2010 ב 19:59

    כן, זה לא קשור לסביבת הפיתוח – ראה כאן http://blogs.microsoft.co.il/blogs/shlomo/archive/2010/06/15/ie8-table-of-content.aspx עבור על רשימת הפוסטים של web slice

    הגב