לוגו אתר Fresh          
 
 
  אפשרות תפריט  ראשי     אפשרות תפריט  צ'אט     אפשרות תפריט  מבזקים     אפשרות תפריט  צור קשר     חץ שמאלה ‎print ‎"Hello World!"; if‎ ‎not rules.‎know ‎then rules.‎read();‎ חץ ימינה  

לך אחורה   לובי הפורומים > מחשבים > תכנות ובניית אתרים
רענן עמוד זה יצירת הזזה של אוביקט
שמור לעצמך קישור לדף זה באתרי שמירת קישורים חברתיים
תגובה
« לאשכול הקודם | לאשכול הבא »
 
כלי אשכול חפש באשכול זה



  #1  
ישן 11-05-2007, 21:56
צלמית המשתמש של tnadav1
  משתמש זכר tnadav1 tnadav1 אינו מחובר  
 
חבר מתאריך: 02.10.05
הודעות: 2,355
שלח הודעה דרך MSN אל tnadav1
יצירת הזזה של אוביקט
בהשראה מכל מיני סקריפטים ובגלל שסתם בא לי להכין אחד כזה בעצמי, החלטתי ליצור סקריפט נוח לשימוש ב- JS שמטרתו היא להניע אוביקטים.. ומן הסתם.. כלום לא עובד אני מניח שזה בגלל שאני לא מבין יותר מידי בתכנות מונחה עצמים ב- JS (אני מת למצוא מקור מידע טוב לזה) ומן הסתם.. תכנתתי מונחה עצמים.. בכל מקרה אין שגיאות סינטקס בקוד (אני חושב..) ככה שכנראה הבעיה היא הבנתית..

בכל מקרה הנה מה שהכנתי בינתיים:
קוד PHP:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style>
/*Credit for dhtmlGoodies for the idea of the design*/
.window
{
    position: absolute;
    overflow:hidden;    
    z-index:10000;
}
.window div
{
        position:relative;
}
.window .window_top
{
        width:100%;
        height:17px;
        position:relative;
        background-color: #707070;
}
.window .top_buttons
{
        float:right;
        z-index:10;
        position:absolute;
        right:0px;
        width:35px;
}
.top_buttons img
{
        float:left;
        padding-left:2px;
}
.windowMiddle
{
    border-left:3px solid #707070;
}
.windowContent
{
    border-right:3px solid #707070;
    padding-left:5px;
    padding-right:2px;

    height:100%;
    overflow:hidden;
    background-color:#FFF;
}
.window_bottom
{
    border-left: 3px solid #707070;
    border-right:3px solid #707070;
    border-bottom: 3px solid #707070;
    position:relative;
    height:0px;
    background-color:#FFFFFF;
}
.window_bottom img
{
        float:right;
}
.topCenterImage
{
    position:absolute;
    left:3px;
    width:5000px;
    height:17px;
}
.resizeImage
{
    position:absolute;
    right:1px;
    bottom:1px;
}
</style>
<script language="JavaScript" type="text/javascript">
var i = 0;
var floatWindow = function(weight, height, windowTitle)
{
    //reset all values
    i++;
    this.weight       =  weight;
    this.height       =  height;
    this.windowId     = "window_"+i;
    this.windowTopId  = "window_top_"+i;
    this.windowTitle  =  windowTitle;
    //Creating the element...
    document.write("<div class='window' id='"+this.windowId+"'>");
        document.write("<div class='window_top' id='"+this.windowTopId+"'>"+windowTitle);
            //coming soon...
            //<img src='images/top_left.gif' align='left'>
            //<img src='images/top_center.gif' class='topCenterImage'>
            //<<div class='top_buttons'>
                //<img class='minimizeButton' src='images/minimize.gif'>
                //<img class='closeButton' src='images/close.gif'>
        
                //<img src='images/top_right.gif'>
            //</div>
        document.write("</div>");
        document.write("<div class='windowMiddle'>");
    
            document.write("<div class='windowContent'>");
                //Starting window content...
                document.write("Testing..Testing..123");
                //End of window content...
            document.write("</div>");
        document.write("</div>");
        document.write("<div class='window_bottom'>");
            //<img class="resizeImage" src="images/bottom_right.gif">
        document.write("</div>");
    document.write("</div>");
    //end of creating element...
    //other functions...
    this.findX = function()
      {
        obj = document.getElementById(this.windowId);
        var curleft = 0;
        if(obj.offsetParent)
            while(1) 
            {
                  curleft += obj.offsetLeft;
                      if(!obj.offsetParent)
                        break;
                  obj = obj.offsetParent;
            }
        else if(obj.x)
            curleft += obj.x;
        
        return curleft;
    }    
    this.findY = function()
      {
        obj = document.getElementById(this.windowId);
        var curtop = 0;
        if(obj.offsetParent)
            while(1)
            {
                  curtop += obj.offsetTop;
                  if(!obj.offsetParent)
                    break;
                  obj = obj.offsetParent;
            }
        else if(obj.y)
            curtop += obj.y;
        return curtop;
      }
    this.updatePos = function(e)
    {
        if(document.all)
            e = event;
        //-------------------------
        windowObj             = document.getElementById(this.windowId);
        windowObj.style.left  = this.startClient[x] + e.clientX - this.findX  + 'px';
        windowObj.style.top   = this.startClient[y] + e.clientY - this.findY  + 'px';
    }
    this.stopUpdatePos = function()
    {
        document.onmousemove  = null;
        document.onmouseup    = null;
    }
      //starting evant..
    document.getElementById(this.windowTopId).onmoused  own = function (e)
    {
        if(document.all)
            e = event;
        this.startClient[x]   = e.clientX;
        this.startClient[y]   = e.clientY;
        document.onmousemove  = this.updatePos;
        document.onmouseup    = this.stopUpdatePos;
    }
    //end of evants
}
var window1 = new floatWindow(200, 300, "test");
</script>
</head>

<body>
<div class="window">
    <div class="window_top">
        <!--<img src="images/top_left.gif" align="left">
        <img src="images/top_center.gif" class="topCenterImage">-->
        <!--<div class="top_buttons">
            <img class="minimizeButton" src="images/minimize.gif">
            <img class="closeButton" src="images/close.gif">

            <img src="images/top_right.gif">
        </div>-->
    </div>
    <div class="windowMiddle">
        <div class="windowContent">
        <!-- This is where you put the content -->
        Try to resize and/or move the window. Then refresh the page. As you can see, the script remember the size and position of the floating windows.
        <!-- End of where you put the content -->
        </div>
    </div>    
    <div class="window_bottom">
        <!--<img class="resizeImage" src="images/bottom_right.gif"> //-->
    </div>
</div>
</body>
</html> 

יש פה כל מיני קטעים ששמתי בהערה ואני יטפל בהם בהמשך.. גם העליתי את הדף לאינטרנר:
https://2007-uploaded.fresh.co.il/2...1/85069333.html

אשמח גם להערות בקשר לשיפור הסקריפט..
כמו שאתם רואים הבעיה היא שהסקריפט... לא עושה כלום.. :S
החלון שאי-אפשר להזיז אותו הוא סתם הדגמה ל- מה אני רוצה לעשות.. כמובן, בלי עיצוב.. סתם בשביל לראות שה- CSS עובד..
_____________________________________


נערך לאחרונה ע"י tnadav1 בתאריך 11-05-2007 בשעה 21:58.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #2  
ישן 12-05-2007, 01:11
צלמית המשתמש של maxim k
  maxim k maxim k אינו מחובר  
 
חבר מתאריך: 05.08.06
הודעות: 2,860
שלח הודעה דרך MSN אל maxim k
בתגובה להודעה מספר 1 שנכתבה על ידי tnadav1 שמתחילה ב "יצירת הזזה של אוביקט"
הערות(מהפחות חשוב ליותר חשוב):
-כאשר מדובר בpublic functions, ניתן לרשום function f כרגיל, וזה סתם מיותר כל ה this.f=function (לא רשמתי באף מקום סוגריים כי הן קופצות לצד השני)
-אין צורך להוציא את i מחוץ להגדרת המחלקה. i אמור להיות משתנה סטטי פרטי של המחלקה.
-במקום לקבל כל פעם את האובייקטים שלך בעזרת getElementById, פשוט תשמור אותם. זה יאיץ בהרבה את המהירות של הסקריפט.
-
קוד:

this.startClient[x/y]

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

אני מקווה שלא פספסתי כלום
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #3  
ישן 12-05-2007, 16:39
צלמית המשתמש של tnadav1
  משתמש זכר tnadav1 tnadav1 אינו מחובר  
 
חבר מתאריך: 02.10.05
הודעות: 2,355
שלח הודעה דרך MSN אל tnadav1
בתגובה להודעה מספר 2 שנכתבה על ידי maxim k שמתחילה ב "הערות(מהפחות חשוב ליותר..."
סבבה אני אשפר את זה..

בכל מקרה, כמה שאלות:
1) במה להשתמש במקום document.write?
2) עד עכשיו המחלקה שלי עושה.. כלום.. למה?
3) אז איך להשתמש באירועים?..
אמ.. זהו
_____________________________________


תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #4  
ישן 13-05-2007, 00:31
צלמית המשתמש של maxim k
  maxim k maxim k אינו מחובר  
 
חבר מתאריך: 05.08.06
הודעות: 2,860
שלח הודעה דרך MSN אל maxim k
בתגובה להודעה מספר 3 שנכתבה על ידי tnadav1 שמתחילה ב "סבבה אני אשפר את זה.. בכל..."
1. יש שתי דרכים: שימוש במאפיין innerHTML, ושימוש בשיטות createElement ולאחר מכן appendChild.
innerHTML הרבה יותר מהיר, אבל createElement וappendChild הרבה יותר אלגנטי ו"נכון".
2.תוריד את שאר הHTML מהbody ותוכל לראות מה היא כן עושה. זה לא בדיוק מה שצריך, אבל זה התחלה.
3. כאן יש לך 3 דרכים: שימוש inline באטריבוט של האירוע, שימוש במאפיין של האירוע באובייקט של האלמנט, או שימוש ב attachEvent/addEventListener. לכל אחת מהשיטות יש יתרונות וחסרונות. תבחר מה שהכי מתאים לך. תעיין פה, ותדאג לכך שthis תמיד יצביע על האובייקט שלך בכל אחת מהשיטות של האובייקט.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
תגובה
« לאשכול הקודם | לאשכול הבא »

כלי אשכול חפש באשכול זה
חפש באשכול זה:

חיפוש מתקדם
מצבי תצוגה דרג אשכול זה
מצב כלאיים מצב כלאיים
דרג אשכול זה:

מזער את תיבת המידע אפשרויות משלוח הודעות
אתה לא יכול לפתוח אשכולות חדשים
אתה לא יכול להגיב לאשכולות
אתה לא יכול לצרף קבצים
אתה לא יכול לערוך את ההודעות שלך
קוד vB פעיל
קוד [IMG] פעיל
קוד HTML כבוי
מעבר לפורום



כל הזמנים המוצגים בדף זה הם לפי איזור זמן GMT +2. השעה כעת היא 13:03

הדף נוצר ב 0.30 שניות עם 12 שאילתות
צור קשר - Fresh - למעלה

הפורום מבוסס על vBulletin, גירסא 3.0.6
כל הזכויות לתוכנת הפורומים שמורות © 2024 - 2000 לחברת Jelsoft Enterprises.
כל הזכויות שמורות ל Fresh.co.il ©

צור קשר | תקנון האתר