Home sweet home
Nav
hide
S1
S2
S3
Name: krWindow
Typ: html4strict
benötigt: jquery Dialog/draggable/resizable
Bei krWindow.js handelt es sich um ein Plugin für jQuery. Ich habe es bisher tatsächlich einmal benutzt – in erster Linie ging es darum, ein wenig mit JavaScript bzw. jQuery zu spielen. Ein Div kann mit Hilfe des Plugins zu einem Fenster gemacht werden. Dazu wird das Dialog Plugin des jQuery UI verwendet.

Voraussetzungen

jQuery und damit auch das darauf aufbauende Plugin nutzen ausschließlich JavaScript und sollten auf halbwegs modernen Browsern laufen. jQuery selbst arbeitet nach eigenen Angaben mit IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome. Ich habe das Plugin krWindow mit Firefox 5.0, IE 9 und Chrome getestet. Minimale Voraussetzungen für den Einsatz sind das jQuery ui mit dem Plugin dialog und den Effekten resizable und draggable. (Man stellt sich auf der seite http://jqueryui.com sein eigenes Paket zusammen.) Mein Beispiel-Programm enthält diese Zusammenstellung, als Theme ist eggplant gewählt.

Verwendung

Das Plugin läßt sich verhältnismäß einfach einbinden. Man benötigt im Header die Zeilen um die JavaScript und CSS Dateien einzubinden, danach reicht dann eine Zeile um aus einem DIV ein Fenster zu machen. Diese wird dann z.B. jQuery-typisch in $(document).ready() eingebaut.

Beispiel 1 – kurze Demo

Ein Click auf reicht z.B., um die obige Tabelle in ein Fenster zu "verwandeln" - der Quellcode ist auch eher übersichtlich, im Kopf bringt man das Folgende unter:
hide
create Window
  <script type="text/javascript">
    $(document).ready(function() 
    {      
      $("#toWindow").click(function() {	$("#divTable").removeAttr("style").krWindow(); });
      //unnoetige /stoerende styles fuer fenster weg, dann window 
    });
  </script>
Parsed using GeSHi 1.0.8.6

Beispiel 2 – 2 Fenster und ein Dock, für die Demo bitte unter der Rubrik Der Html-Anteil auf Download ... klicken

Dieses Beispiel zeigt eine komplette HTML-Datei mit zwei Fenstern und einem Dock. Das Schließen eines Fensters führt dazu, dass dieses Fenster im Dock abgelegt wird. Fährt man mit der Maus über ein "gedocktes" Fenster, wird der Titel eingeblendet, ein Click holt es wieder in den Vordergrund.

Zu diesem Beispiel werden alle Dateien mit Ausnahme der jQuery-Dateien (diese sind "minimalisiert") angezeigt, der Download des gepackten Archivs enthät alle nötigen Dateien.

Der HTML-Anteil (hier Run it für das Beispiel):
show
krWindowExample/krWindow.html
<!DOCTYPE HTML">
<html>
<head>
  <meta name="description" content="krWindow Beispiel">
  <meta name="author" content="Karsten R&ouml;mke">
  <meta name="date" content="2011-08-24">
  <meta  charset="utf-8">
  <title>Beispiel krWindow</title>  
  <!-- der Teil von jQuery, hier im Unterverzeichnis gelassen -->
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <link type="text/css" href="jquery-ui-1.10.3.custom/css/eggplant/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />	
  <script type="text/javascript"  src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
 
  <!-- zu diesem Plugin gehoerend -->
  <link type="text/css" href="css/krWindow.css" rel="stylesheet" />		
  <script type="text/javascript" src="js/krWindow.js"></script>
 
  <script type="text/javascript">
  //standard bei jQuery: 
    $(document).ready( 
      function () 
      {
        //Fenster anlegen
        $('#divVoraussetzungen').krWindow(  //optionen beim initialisieren
        {
          width:600,
          height:250,
          position: [20 , 10],
          opacity: 1 //beim bewegen mal nicht durchscheinend 
        });
        $('#divVerwendung').krWindow(
        {
          width   : 400,
          height  : 200,
          position: [300,300]
        });
        $('#divEnde').krWindow(
        {
          width   : 200,
          height  : 150,
          position: [550,250],
          opacity: 0.1 //beim bewegen mal sehr durchscheinend 
        });
 
        //und ein Dock ausgeben (wird fuer alle verwendet)
        $('#divVoraussetzungen').krWindow("outputDock"); //typischer Methodenaufruf, vergleiche doku zu dialog
      } );
  </script>
</head>
<body>
<p style="margin: 50px; width: 10em; border: solid 1px; padding: 5px"> 
 Ausgenommen dieses Abschnitts, gibt es hier nur divs, die zu einem Fenster
 gemacht werden. </p>
 
<div id='divVoraussetzungen' title="Voraussetzungen">
<h4>Voraussetzungen </h4>
 jQuery und damit auch das darauf aufbauende Plugin nutzen ausschließlich JavaScript und 
 sollten auf halbwegs modernen Browsern laufen. jQuery selbst arbeitet nach eigenen 
 Angaben mit IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome. Ich habe das Plugin 
 krWindow mit Firefox 5.0, IE 9 und Chrome getestet. Minimale Voraussetzungen für den 
 Einsatz sind das jQuery ui mit dem Plugin dialog und den Effekten resizable und draggable. 
 (Man stellt sich auf der seite <a href="http://jqueryui.com">http://jqueryui.com</a> sein
 eigenes Paket zusammen.) Mein Beispiel-Programm enth&auml;lt die komplette Zusammenstellung
 (also auch Teile die hier nicht n&ouml;tig sind), als 
 Theme ist eggplant gew&auml;hlt. 
</div>
 
<div id="divVerwendung" title="Verwendung">
<h4> Verwendung </h4>
 Das Plugin l&auml;&szlig;t sich verh&auml;ltnism&auml;&szlig;ig  einfach einbinden...
 Wie erl&auml;utert reichen einige Zeilen aus, die Konfiguration kann teils &uuml;ber
 Stylesheets erfolgen. 
</div>
<div id="divEnde" title="Nichts mehr zu sagen">
  ... ist doch alles klar &ndash; oder? &ndash; eher durchsichtig? opacity auf 0.1
</div>
</body>
</html>
 
 
Parsed using GeSHi 1.0.8.6
Download / View Source / Run it   (depends on file type)

Die folgenden beiden Dateien gehören zum Plugin, außerdem ist jQuery mit dem Dialog-Plugin und den Effekten resizable und draggable nötig.

Die CSS-Datei:
show
krWindowExample/css/krWindow.css
/**
 * @author roemke
 * css for my first own plugin a window based on dialog plugin from 
 * jquery ui
 * the dialog ist "heavily customized" by styles, so I see no way to strip
 * away the style sheets
 * instead I give "my" class (inherited from dialog) the krDialog css class
 * so you can customize "my dialog/window" by overwriting the css attributes
 * maybe I have to extend this file
 * License: MIT and GPL
 */
 
 /* margin-top/bottom fuer h4 ist  mir zu gross, wenn ich firefox die 
    gestaltung ueberlasse 
 */
 h4 {
  margin-top:    0.5em;
  margin-bottom: 0.1em; 
 }
 
/*id of dock for the windows
  Positionierung und Style des docks */  
#krWindowIdDivDock {
     /* float     : right; nicht mit fixed */
     text-align  : center;
     width       : 30px;
     height      : 600px;
     position    : fixed;     
     top         : 50px;
     right       : 5px; /*5px*/ 
     margin-right: 5px;
     border-left : 1px  solid;
     padding     : 5px 2px;  
   }
 
/*class of Window put in the dock - should be "small" */
.krWindowClDivDockedWindow{
  overflow   : hidden;
  border     : 4px groove #C0C0C0;
  height     : 1.2em; 
}
.krWindowClDivDockedWindow:hover {
  cursor     : pointer;
}
/* class of Window / Titlebar which is shown beside the dock if the user 
 * moves the mouse over the docked window */
.krWindowClDivDockedWindowShown {
  width         : 20em;
  height        : 1.2em;
  overflow      : hidden;
  padding       : 2px 5px;
  border        : 1px solid #231D2B;
  border-radius : 6px 6px 6px 6px;
  color         : black;
  font-weight   : bold;
  background    : #eee;
  z-index       : 5000; /*nicht schoen, aber tuts :-(  */
}
 
/* einiges heraus genommen - findet man ggf. in der entsprechenden 
 jquery datei */
 
/* Component containers
----------------------------------*/
/* da ich es immer vergesse: ohne Leerzeichen .class1.class2 -> ein element muss beide haben
 * es handelt sich um einen Einfach-Selektor
 * mit Leerzeichen .class1 .class2 -> ein element mit class 2, das in Element mit class1
 * enthalten ist, die Verschachtelungstiefe spielt dabei keine Rolle
 * hier handelt es sich um einen Kombinator (Leerzeichen ist der Nachfahrenselektor)
 */
.krWindow.ui-widget { }
.krWindow.ui-widget .ui-widget { font-size: 1em; }
.krWindow.ui-widget input, 
.krWindow.ui-widget select, 
.krWindow.ui-widget textarea, 
.krWindow.ui-widget button { 
  font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; 
  font-size: 0.8em; 
}
 
.krWindow.ui-widget-content {
  background-image: none;
}
 
/*hier dann "kinder" */
 
.krWindow .ui-widget-content {
  padding: 0.5em 0.4em; 
  margin-top: 4px; 
  border: 1px solid;
  color: black;
  background-color: #DDD;
}
.krWindow .ui-widget-content a { color: #000; }
/* die Titelleiste der Fenster ist nur gemeinsam konfigurierbar,
   das reicht mir */
.krWindow.ui-dialog .ui-dialog-titlebar 
{
  padding: 0em 0.6em;
  background-color: #000066;
  color: white; 
}
.krWindow .ui-widget-header { border: 1px solid #231d2b; background: #eee; ; color: #000; font-weight: bold; }
.krWindow .ui-widget-header a { color: #000; }
 
 
 
 
Parsed using GeSHi 1.0.8.6
Download / View Source / Run it   (depends on file type)
und die JavaScript-Datei:
show
krWindowExample/js/krWindow.js
/**
 * @author roemke
 * depends on the dialog plugin from jquery ui
 * could be loaded via http://xhtmlforum.de/64938-lokal-javascript-nachladen.html
 * License: GPL and MIT
 * die Funktionsaufrufe muessten nochmal ueberdacht werden?
 * es wird empfohlen, dies mit strings zu tun
 * werde ich auch tun, dann kann ich die Methoden von dialog
 * einfach rufen - tue ich
 *
 * evtl. sinnvoll - widget-Factory von jquery mal anschauen,
 * wurde in den ersten Tutorials nicht genannt 
 
 */
 
/* selfexecuting function
 see writing plugins
 yes, round braces
 */
 
//gesamte Definition des plugins krWindow in einem closure
//to make sure that your plugin doesn't collide with other libraries 
//that might use the dollar sign, it's a best practice to pass jQuery 
//to a self executing function (closure) that maps it to the dollar 
//sign so it can't be overwritten by another library in the scope of 
//its execution.
//ich denke nur, das ist ein Trick um auch hier das $-Zeichen statt
//jquery zu verwenden
//Die anonyme Funktion (ohne name) wird mit der Variblen jquery aufgerufen,
//lokal heißt die Variable dann $ gleicher code muesste wie folgt gehen
// function generateMeinPluging ($) 
// { $.fn.krWindow .... usw }//
// generateMeinPlugin(jQuery)
 
 
  //console.log("bind");
 
$(document).ready (function ()
{ 
  $(window).unload(function() {
    //wird nicht / nur kurz angezeigt?
    //console.log('Handler for .unload() called.');
    //klappt, daten landen in der db
    if ($(window).data('storeInDB'))
      $().krWindow("storeAllInDB"); //rufe einfach auf - scheint eine Art statischer call zu sein       
     else     
      $.post('ajaxKnechtKrWindow.php', 
           { window: 'x', operation: "delete" } //eintraege des lehrers loeschen falls da
         );
 
  });
}); 
(function($)
{
  $.fn.krWindow = function(method)
  {
    // Do your awesome plugin stuff here
    //defaults public: see http://www.learningjquery.com/2007/10/a-plugin-development-pattern
    // I think this.defaults will not work
    //private defaults
    var dialogDefaults =  //defaults des dialogs
    {
      dialogClass : 'krWindow',
      //width : 'auto',      
      closeOnEscape : false
      //beforeClose: moveToDock - kann ueberschrieben werden, nicht gut
      //so wird es dennoch genommen, da mehrere methoden pro event moeglich sind
      //also: gibt der User eine Callbackfunktion fuer beforeClose in den options an, 
      //wird seine Funktion ausgefuehrt und die unten eingehaengte moveToDock  
    };
    var defaults = //eigene defaults 
    {      
      opacity: 0.8 ,//window becomes opacity if dragged
      dockId: 'krWindowIdDivDock', //if not set close button closes otherwise put Window to this dock
      toolTipAlign: 'left', //  wo wird der titel gezeigt, wenn man über das Fenster im dock faehrt
                            //left, right over under
      storePosition: false, //speichern im cookie
      storePositionInDB: false //in DB, fordert auf Serverseite skript
                               //ajaxKnechtKrWindow.php
                               //speichert dann auch in Cookies -> storePosition wird auf true gesetzt
    }; 
    var opts = $.extend({},dialogDefaults, defaults);//{} -> target ist leer, opts bekommt defaults und dialogDefaults
    var inDockExtension = "_inDock"; //ein Fenster innerhalb des Docks bekommt diese Erweiterung
                                     //der erste Teil besteht aus der id des Fensters, welches in's dock 
                                     //geschoben wird
    var besideDockExtension = "_besideDock";
 
    var cookieNamePrefix    = "krWinPos";
 
 
    var methods = //die eigenen "publics", welche über $().krWindow(methodName, arguments) aufrufbar sind
    {  //diese Art der Umsetzung scheint ein Standard bei jquery Plugins zu sein
      init : function(options) //der alte ctor
      {
        //return this for chainability, this is DOM-Object - no, I would say
        //jquery style DOM-Object, eg. $("div") so the each function is defined
        //because each is defined on $("div")
        //return value of $this.each is  jquery -> chainability
        $.extend(opts, options);
        return this.each(function()
        {
          //wenn mein div per css formatiert ist - kein Problem
          //wenn nicht, dann muss ich die geschichten hier retten
          //es gibt methoden alle styles abzufragen, aber ich versuche erst mal
          //mit den css klassen etwas zu experimentieren
          //hole mir die wesentlichen Eigenschaften aus dem Objekt, dass 
          //mit als Window-Text dienen soll, also des divs auf den das .krWindow
          //angewandt wird           
          var wesentlicheNames = ["font-family", "font-size", "font-style", 
                                          "font-weight",  "color"];
           //                             "background-color"];      
          //background-image wird momentan nicht vergrößert, daher lasse ich das mal
          //background-repeat anscheinend nicht "dynamis" 
          var wesentliche = [];
          for (var i = 0 ; i < wesentlicheNames.length; ++i)//sichern 
            wesentliche.push($(this).css(wesentlicheNames[i]));                  
          $(this).dialog(opts);
          $(this).bind( "dialogbeforeclose", moveToDockHandler);
          $(this).bind( "dialogopen", removeFromDockHandler);
          $(this).bind( "dialogdragstop", dragOrResizeStop); //store position
          $(this).bind( "dialogresizestop",dragOrResizeStop);  
          $(this).parent().draggable( "option", "opacity", opts.opacity );
          $(this).parent().draggable("option","containment",false); //window aus dem Body heraus verschiebbar
          for (var i = 0; i < wesentlicheNames.length; ++i) //und uebernehmen
            $(this).parent().css(wesentlicheNames[i],wesentliche[i]);          
 
 
          if (opts)
          {
 
            //speicherung der Position im Cookie aktiviert?
            var values = null; //gespeicherte Werte
            if (opts.storePositionInDB)
            {
              $(window).data('storeInDB',true);
              opts.storePosition = true; //schalte cookies ein
            }
 
            if (opts.storePosition)
            {
              //nicht mehr klar: warum speicherung via $(this).data, war das die alternative
              //zu opts - wenn ja, warum kann ich nicht einfach im Objekt als Attribut speichern
              //muesste man nochmal recherchieren ...
              $(this).data("inDock",false); //zu Beginn nicht im Dock
              //todo original-Werte laden - wenn keine da, dann ist es
              //der erste Aufruf und sie werden gespeichert
              values = getCookie($(this),"Original");
              if (values == null)   //originalwerte speichern
              {
                storeCookieVal($(this),"Original");
              }
 
              //link fuer restore ausgeben, nur einmal, nicht fuer jedes
              //window
              if (! $('#restoreLink').size())
              {
                $('body').append("<div id='restoreLink'> reset </div>");
                $('#restoreLink').click(function () 
                  {
                    $('.krWindow > .ui-dialog-content').each( function()
                      {           
                        getCookieAndModifyThis($(this), "Original");
                        storeCookieVal($(this));
                      }
                    ); //each window
                  } //click funktion
                );//append html "button" and add click-event
              }//if element does not exist
              values = getCookieAndModifyThis($(this));
              //values = getCookieFromDBandModifyThis($(this)); //test
              if (values==null) //cookies ueberwiegen, habe nach einem drag die daten noch nicht in der db
              //da ich unnoetige zugriffe auf db verhindern moechte - in db nur beim Verlassen / Reload der seite
              {
                if (opts.storePositionInDB)
                {
                  //console.log("Try to load from db");
                  getCookieFromDBandModifyThis($(this));
                }
                else
                  $(this).data("inDock",false); //zu Beginn nicht im Dock
                storeCookieVal($(this));
                //exit();
              }
            }
 
            //folgendes schiebt das Fenster bei Bedarf aus der anzeige heraus
            //funktioniert ueber position des dialogs nicht - so in Erinnerung
            //also eine Korrektur
 
            if (values == null && opts.position && (opts.position instanceof Array)) //sicher gehen, noetig?
            {
              $(this).parent().css("left",opts.position[0]+"px"); 
              $(this).parent().css("top",opts.position[1] +"px");
              //2012-02-09: hatte px vergessen, so keine Wirkung
              //alert("check here");
            }
 
          }  
        });
        //end of init / ctor
      },
      option : function (name, value) //setter / getter fuer optionen
      {
        var result = null;
        if (defaults[name]) //in meinen eigenen Optionen vorhanden
        {
          if(name == "opacity")
          {
            if (value === null ) 
            {
              result = opts.opacity;
            } 
            else
            {
              //hmm, ob das ueber den selector sauber ist?                
              result = $(this.selector).parent().draggable("option","opacity",value);
              opts.opacity = value;  
            }
          }
          else if (name == "dockId")
          {
            if (value === null)
            {               
              result = opts.dockId;
            }
            else
            {
              opts.dockId = value;
              result = this;
            } 
          }
          else if (name == "storePosition")
          {
            if (value === null)
            {
              result = opts.storePosition;
            }
            else 
            {
              opts.storePosition = value;
              result = this;
            }
          }
          else
            alert ("not implemented - found option "+name);
        }  
        else //rufe dialog Methode
        {  //weiss nicht wie ich ausser per selector und $() das jQuery Objekt
          //bekommen soll. Hier ist this dieses jquery-Objekt
          //das war nicht das problem, das jquery-Objekt "bin ich selbst"
          //aber ich konnte dialog nicht direkt darauf aufrufen, da ich ein 
          //Problem mit der variablen Anzahl der Argumente habe, mit
          //apply geht es
          var args = Array.prototype.slice.call(arguments)
          args.unshift("option"); //bei 0 option einfuegen, nichts löschen
          result = this.dialog.apply(this,args);
 
          if (name=="position" && value != null && opts.storePosition)
          {//nicht getestet
             storeCookieVal ($(this));
          }
        }
        return result;
      },
      //dock-Window in den DOM-Baum einbauen 
      outputDock : function ()
      {
        var dockId = opts["dockId"]; 
        if (dockId &&  $('#'+dockId).length == 0 ) //only append if there is no element with the id
        {
          var html =  '<div id="' + dockId+'" >';
          /*html += '<a class="ui-state-default ui-corner-all" href="#" role="button">';
          html += '<span class="ui-icon ui-icon-closethick"></span></a><br>';
           evtl. mal dock zum ausblenden */ 
          html +=  '</div>';
          $('body').append(html);
        }
      },
 
      //wird hier abgefangen, da ein open nur, wenn nicht im Dock
      //klappt nicht, wird nie aufgerufen :-) doch, ich selber rufe
      open: function ()
      {
        var id = $(this).attr("id");
        var idid = '#'+id + inDockExtension; //in dock id
        var dockId = opts["dockId"];
        var pos = $(this).dialog("option","position");
        $(this).dialog("open");
        //beachte: ist ein Fenster aus dem Bildschirm geschoben, so wird es hier
        //wieder herein gepackt, daher per css anpassen
        $(this).parent().css("left",pos[0]+"px"); 
        $(this).parent().css("top", pos[1] +"px");
        //noch ein kleiner Bug: verschieben, f5, to dock wieder herstellen
        //-> zu grosses Fenster sitzt falsch
      }, 
      //evtl noch schnittstellen zu moveToDock und removeFromDock stellen
      //bisher nicht benoetigt, da per UI moeglich, doch ist noetig,
      //beim init muss ggf. moveToDock aufgerufen werden 
      //und wenn ich das tue, bezieht sich $(this) anscheinend nicht 
      //auf das jquery-Element?
 
      //wird ohne "Objekt" verwendet, eine Art statische Methode
      //Aufruf z.B. $().krWindow("storeAllInDB");
      storeAllInDB: function ()
      {
        if (document.cookie)
        {
          var cookies = document.cookie.split(";");
          for (i = 0; i < cookies.length ; ++i)
          {
            var nameValue = cookies[i].split("=");
            var name = $.trim(nameValue[0]);
 
            if (name.indexOf(cookieNamePrefix) >= 0 && name.indexOf(cookieNamePrefix + "Original") == -1)
            { //originalwert nicht speichern - na, ob es so klug war die Daten aus den cookies zu nehmen?
              var values = nameValue[1].split(",");
              $.post('ajaxKnechtKrWindow.php', 
                { window:name,left:values[0] ,top:values[1] , 
                   width:values[2] , height:values[3] , inDock:eval(values[4]) ,  
                   operation: "insert" }
                );
            } //cookie beinhaltet Daten
          }//loop ueber alle cookies
        }//cookie vorhanden
      } //ende Methode storeAll...
    } //ende der Methods
 
 
    //private methods
 
    function moveToDockHandler ( event, ui)
    {
      var object = $(this);
      //console.log("moveToDock" + object);
      var dockId = opts["dockId"];
      var id = object.attr("id");
      var idid = id + inDockExtension; //in dock id
      var besdid = '#'+id + besideDockExtension; //beside dock id
      if(dockId && $('#'+dockId).length == 1 && $('#'+idid).length==0 )
      {
        var title = object.dialog("option", "title");
        dockId = '#' + dockId;
        //pruefe ob eine Position existiert
        var position = $(dockId).data(idid);
       	var html = '<div id=' + idid + ' class="krWindowClDivDockedWindow" > ' + title + '</div>';
		var innerDivs = $(dockId + " > div"); //die vorhandenen
        if (position == undefined) //am Ende einfügen
        {
			position = innerDivs.length +1;
        	$(dockId).append(html);
	        $(dockId).data(idid,position);//Position speichern in $(dockId) - das Objekt ist persistent    	    
   		}
    	else //an der alten Position einfuegen
    	{
    		position = parseInt(position);			
    		var found = false;
    		innerDivs.each(
    			function(index,element)
    			{
    				var aktId = $(element).attr('id');
    				var aktPos = parseInt($(dockId).data(aktId));
    				if (aktPos > position)
    				{
    					$('#'+aktId).before(html);
    					found = true;
    					return false; //break
    				}    				
    			});
    		if (!found)
    			$(dockId).append(html);
    	}
  	    idid = '#' + idid;
     }//hmm, das folgende kann doch eigentlich in die Verzweigung?
      $(idid).mouseenter(
          function() //hier das geschlossene Fenster einblenden, bzw. den Titel
          {          //also eine Art ToolTip
            var html = '<div  id="' + id + besideDockExtension + '" class="krWindowClDivDockedWindowShown" > ' + title + '</div>';
            var pos  = $(idid).offset();                                  
            $('body').append(html);
            if (opts.toolTipAlign == 'right')
              pos.left += parseInt($(idid).css("width"))+20;
            else if (opts.toolTipAlign == 'over')
              pos.top -= 30; //hier eigentlich die hoehe des titles einrechnen
            else if (opts.toolTipAlign == 'under')
              pos.top += parseInt($(idid).css("height"))+10;
            else // (opts.toolTipAlign == 'left')
              pos.left -= parseInt($(besdid).css("width"))+20;
            $(besdid).offset(pos);
          }
        );
        $(idid).mouseleave(
          function() //ausblenden
          {
            $(besdid).remove();
          }          
        );
        $(idid).click(
          function() //show dialog
          {
            $(besdid).remove();
            //$(idid).remove(); -> passiert beim open
            $('#'+id).krWindow("open");            
          }
        );
      object.data("inDock",true); //store
      storeCookieVal(object);
      return true;
      // false verhindert close, wichtig, close soll an das dock heften
    }    //war zum testen gedacht, true schließt
 
    //wird beim oeffnen gerufen, falls das Fenster im Dock existiert, entfernen
    function removeFromDockHandler()
    {
 
      //alert("check"); //erst open, dann diese methode
      var id = $(this).attr("id");
      var idid = '#'+id + inDockExtension; //in dock id
      var dockId = opts["dockId"];
 
      if (dockId && $('#'+dockId).children(idid).length > 0)
      {
        $(idid).remove();
      }
      $(this).data("inDock",false); 
      storeCookieVal($(this)); 
    }
 
 
    /*
      getCookie,
      object und prefix (voreinstellung "", "Original" moeglich)
      liest nur die DAten, gibt array mit den resultaten zurueck
      0/1 -> left/top
      2/3 -> width/height
      4   -> bool - true: inDock 
    */
    function getCookie(object, prefix)
    {
      var id = object.context.id;
      //console.log(id+ " - " +prefix);
      if (prefix==null)
         prefix="";
      //private members nicht ueber this. sondern "direkt"
      var cookieName=cookieNamePrefix + prefix+"_"+id;
      //console.log(cookieName);
      var result = null;
      if (document.cookie)
      {
        var c = document.cookie;
        var index = c.indexOf(cookieName); 
        if (index != -1)
        {
          index += cookieName.length + 1;
          var spos = c.indexOf(";",index);
          if (spos > 0 )
            result = c.slice(index,spos).split(",");
          else 
            result = c.slice(index).split(","); //der letzte cookie
          //console.log("found " + cookieName +" = " + result );                 
          for (i = 0; i< 4; ++i)
            result[i] = parseInt(result[i]);
          result[4]=eval(result[4]); //hoffe, ich bekomme so true / false
        } //aktuellen namen gefunden
      }//document.cookie
      return result;
 
    }
 
 
    /*
      verwendet result-Array s. getCookie
      um das objekt entsprechend anzupassen
      left/top <-> 0/1
      width/height <-> 2/3
      inDock <-> 4
    */
    function modifyThis(object,result)
    {
        object.krWindow("option","position", new Array(result[0],result[1])); 
        object.data("inDock",result[4]); //geht anscheinend nur so
              //kann keine Membervariable in diesem Objekt anlegen
              //wird krWindow erneut gerufen, oder wird auf ein Event reagiert scheinen 
              //die Daten nicht mehr vorhanden zu sein
        //dialog setzen
        object.krWindow("option", "width", result[2]);
        object.krWindow("option", "height", result[3]);
        //setze via css da dialog sich sonst nicht ausserhalb des fensters positionieren laesst
        object.parent().css("left",result[0]+"px"); 
        object.parent().css("top",result[1] +"px");
 
        if (result[4])
        {
          object.krWindow("outputDock"); //schadet nicht, hhm, evtl. doch, nein, wenn values[2] gesetzt ist,
          //sollte ich ein outputDock brauchen  
          //console.log("call to close");
          object.krWindow("close"); //verstehe ich nicht, wenn ich hier moveToDock rufe, dann 
          //ist die Variable this und $(this) weg 
        }
        else
        {
          object.krWindow("open");
        }
        //--------------
        //console.log("load " + cookieName + " = "  +result);
    }
 
 
    //lese das cookie zum objekt und veraendere das objekt
    //entsprechend (position, breite / hoehe, dock )
    //liefere array zuruec x,y,width,height,inDock (true/false)
    //liefere null, falls nicht gefunden
    function getCookieAndModifyThis(object,prefix)
    {
      //console.log(object);
      var result=getCookie(object,prefix);
      if (result != null)
        modifyThis(object,result);
      //console.log(result);
      return result;
    }
 
    /*
      Versuche die Daten eines Fensters  aus der DB zu lesen 
    */
    function getCookieFromDBandModifyThis(object)
    {
      /* unfertig - wollte synchron, warum, kann die Fenster doch danach positionieren
       $.ajax({
         type: 'POST',
         async: false, //will synchron
         url: 'ajaxKnechtKrWindow.php',
         data: { window: name , operation: "select" },
         success: function()
        //dataType: dataType default is intelligent guess - na mal sehen
        });
        */
        var id = object.context.id;
        var cookieName=cookieNamePrefix +"_"+id; 
        $.post('ajaxKnechtKrWindow.php', 
          { window: cookieName , operation: "select" },
          function success(data)
          {
            if (data != "fail")
            {
              var rO = eval('(' + data + ')');
              //console.log(rO);
              var result =  Array(parseInt(rO.left),parseInt(rO.top),parseInt(rO.width),parseInt(rO.height),Boolean(rO.inDock));
              console.log(result);
              modifyThis(object,result);//object tatsaechlich hier vorhanden
            }
          }
         );
    }
 
    //und daten speichern
    function storeCookieVal(object, prefix)
    {
      var id = object.context.id; //object is this wrapped into jquery
      if ( prefix == null)
        prefix="";
      var cookieName = cookieNamePrefix+prefix +"_"+ id +"=";
 
      var setPosition = object.krWindow('option','position');
      var pos = new Array();
      if (setPosition instanceof Array)
      { //nutzer hat positon explizit gesetzt
        pos[0] = parseInt(setPosition[0]);
        pos[1] = parseInt(setPosition[1]);
      }
      else //aktuelle Daten abfragen
      {
        pos[0] = parseInt($(this).offset().left);
        pos[1] = parseInt($(this).offset().top);
      }
      pos[2] = Math.round(object.krWindow('option','width'));
      pos[3] = Math.round(object.krWindow('option','height'));
      pos[4] = object.data("inDock");
      //cookieName += ",";
      //cookieName += object.inDock; 
      cookieName += pos; 
      document.cookie = cookieName;
      //console.log("store " + cookieName);
    }
 
 
    //an das event des dialogs gebunden
    //position speichern
    function dragOrResizeStop()
    {
      storeCookieVal($(this));
    }
    //opts = $.extend(opts, opts); in init Methode / alter ctor
    // so sind die Optionen Privat
    // Method calling logic at last, cause we have to set properties of this object first
    //das folgende müsste logisch zum ctor gehoeren?
    if(methods[method])
    {
      return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1));
    }
    else if( typeof method === 'object' || !method)
    {
      return methods.init.apply(this, arguments);
    }
    else
    {
      //hier die Methode von dialog rufen
      var args = Array.prototype.slice.call(arguments);
      return this.dialog.apply(this,args); //mit apply gehts, da alle argumente alls
      //array uebergeben werden
      //aus dem "Objekt" arguments ein Array machen
             //Call der Methode slice eines Arrays auf dem Objekt / Array 
             //arguments, daher die Methode call
             //apply macht etwas ähnliches - die Methode wird aufgerufen im Kontext
             //von this und mit den Argumenten
      //$.error('Method ' + method + ' does not exist on jQuery.tooltip');
    }
  };
})(jQuery);
 
Parsed using GeSHi 1.0.8.6
Download / View Source / Run it   (depends on file type)

Karsten Römke (k Ponkt roemke at gmx in de), Rechtliches, Datenschutz, etc.
Rein private Seite, lediglich eine Spielerei
Last modified: 2010-08-24
Created: 2011-08-24
Reason: Spielerei mit jQuery / Fenster für Deko2000
Home sweet home