מידע מורחב

  • תאריך
  • שעה 13:56
  • ע"י
  • צפיות 1597
  • תגובות 1
  • דירוג 0 /5

Resizable Ui jQuery

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

אם תרצו לשחק עם הקוד יותר לעומק יש את הקובץ תצטרכו ללמוד יותר על jQuery UI CSS Framework
ניתן להוריד את קובץ flora.resizable.css בקישור הבא.
כמו כן מצורף קישור לספרית הדמו.

מבוא:
  • הגדרת קבצים בתוך קובץ html
  • - מצב התחלתי
  • - מצב סופי
  • עבודה עם פונקציה ()resizable
  • - הוספת תמונות
  • - פרמטרים עם דוגמאות.



הגדרת קבצים בתוך קובץ html

לפני שנתחיל אנחנו צריכים להגדיר את הקבצים הבאים בקובץ html:
1 - jquery-ui.css
2 - jquery.min.js
3 - jquery-ui.min.js

4 – ואפשרות לא חובה, אם כבר אז למה לא.
- resizable-s.gif
- resizable-e.gif
- resizable-n.gif
- resizable-w.gif
- resizable-nw.gif
- resizable-sw.gif
- resizable-ne.gif
- resizable-se.gif


שנמצאים ב בספרייה הבאה


מצב התחלתי:

קישור לדוגמה: step 1
יש לנו div עם קטע טקסט כל שהוא כמו בדוגמא הבאה:
Html code:

<div id="div_id">Show text inside window resizable </div>

Css code:

#div_id {
   background: none repeat scroll 0 0 #EeF7D4;
    border: 1px solid #78A029;
    width:100px;
    height:100px;
    text-align: center;
    display: table-cell;
    vertical-align: middle; 
  }




מצב סופי: jQuery Ui Resizable: Complete





עבודה עם פונקציה ()resizable

1 - כלומר אני יוכל לשנות את גודל החלון(div) לגודל שאני ארצה ולהוסיף לו מסגרת יפה.
כדי לשנות את החלון ממצב קבוע לגודל משתנה אני צריך לעבוד עם ספריית ui
שזו ספריית הרחבה ל jQuery.
2 – אני צריך לעבוד עם פונקציה resizable(); שהיא בעצם השוני שמוסיפים לdiv במצב רגיל לחלון שמשנה את
גדלו.

$(document).ready(function(){
  $( "#div_id " ).resizable();
});
<div class="leftDir"></div>


3 – ע"י הוספת הקוד שמעלינו הגדרנו שאנחנו יכולים להשתמש בגבולות החלון ולמתוח או לקצר את גודל החלון
והוספנו אלמנט קטן בפינה למטה בצד ימין אשר מאפשר לנו למתוח את החלון למטה או ימינה.
לפי התמונה הבאה:






הוספת תמונות:

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

על ידי הוספת הקוד הבא:step 2
.ui-resizable-se {
    background: url("http://www.centerwow.com/window1/window/pic/resizable-se.gif") 
                repeat scroll 0 0 transparent;
    bottom: 0;
    cursor: se-resize;
    height: 9px;
    right: 0;
    width: 9px;
   z-index:100000 !important;
}

קישור לדוגמה:resizable-se



5 – נוסיף תמונה לגבול הימני ולגבול התחתון.

.ui-resizable-s {
    background: url("http://www.centerwow.com/ui/resizable-s.gif") 
                repeat scroll center top transparent;
    bottom: 0;
    cursor: s-resize;
    height: 6px;
    left: 0;
    width: 100%;
}
.ui-resizable-e {
    background: url("http://www.centerwow.com/ui/resizable-e.gif") 
                repeat scroll right center transparent;
    cursor: e-resize;
    height: 100%;
    right: 0;
    top: 0;
    width: 6px;
}  


כך ניראה החלון לאחר הוספת הקוד.step 3




פרמטרים עם דוגמאות:

disabled
enable
alsoResize
animate
animateDuration
autoHide
containment
ghost
grid
maxHeight
maxWidth
minHeight
minWidth
aspectRatio

אשמח לשמוע תגובות.

תודה יוסי לוי.

עדיין לא נרשמת לאתר ? לחץ כאן להרשמה מהירה
נא המתן...
דירוג
  1. מדריך מצוין


עליך להתחבר כדי להגיב. לחץ כאן להתחברות.