Szerettem volna egy nagyon egyszerű, dialógus ablakot, ami könnyen átlátható.
A legfontosabb kitétel az volt, hogy egy divet hozzon létre, amibe majd bármit bele tudok illeszteni.
Találtam is egyet
Sajnos az én stilusomnak nem felelt meg. Ezért módosítanom kellett.
A módosítás 2 fontosnak vélt ok miatt vált szükségszerűvé.

• Egyrészt szeretek névtereket létrehozni
• Másrészt a létrehozásnál minden alkalommal újra és újra létrehoztuk a dialógus ablakot és a layert is, így a nyitások számával nőtt az elemek száma is.

var PrototypeWindow = {
 Dialog : function (content, container)
 {
 // Manage arguments and assign defaults,
 if (typeof container == 'undefined' ) container = document.body;
 if (null == (this.container = $(container))) throw("container is not valid");

 // Assign instance variables
 this.content = content;
 if ($('dialogBoxOverlay') == null)
 {
   this.overlay = new Element('div', {'id':'dialogBoxOverlay', 'class': 'overlay' }).hide();
 }
 else
 {
   this.overlay = $('dialogBoxOverlay').hide();
 }
 if ($('dialogBox') == null)
 {
   this.dialog  = new Element('div', {'id':'dialogBox', 'class': 'dialog' }).hide();
 }
 else
 {
   this.dialog = $('dialogBox').hide();
 }

 // Hide the overlay when clicked. Ignore clicks on the dialog.
 Event.observe(this.overlay, 'click', this.hide.bindAsEventListener(this));
 Event.observe(this.dialog, 'click',  function(event) { Event.stop(event) });

 // Insert the elements into the DOM
 this.dialog.insert(this.content);
 this.container.insert(this.overlay);
 this.container.insert(this.dialog);

 // Content may have been hidden if it is embedded in the page
 content.show();
 this.dialog.hide();

 }
}

PrototypeWindow.Dialog.prototype.show = function() {
 new Effect.Appear(this.overlay, { duration: 0.5,  to: 0.8 });
 this.dialog.show();
 return this;
};
PrototypeWindow.Dialog.prototype.hide = function(event) {
 this.dialog.hide();
 this.overlay.hide();
 this.dialog.innerHTML='';
 return this;
};

A dialógus ablak használata egyszerű

<script type="text/javascript">
  var dialog = new Element('div'); // létrehozzunk egy divet
  dialog.insert(new Element('h2').insert('Dialogue')); // felötljük adatokkal, ez a sor opcionális...
  var overlay = new DialogOverlay(dialog); // divünket beletesszük a dialógus ablakba
  overlay.show(); // megjelenítjük a dialógus ablakot
</script>

Szükségünk lehet még némi css-re a működéshez:

.overlay {
 width: 100%;
 height: 100%;
 background: black;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 2;
}
.dialog {
 width: 50%;
 min-height: 50%;
 background: white;
 position: fixed;
 top: 25%;
 left: 25%;
 z-index: 3;
}

Ide kerülnek azok a javascriptes megoldások, amiket hasznosnak vélek, de nem érdemelnek egy komplett bejegyzést

Prototype Tabla rendezés példák:
Egyszerű Példa
JSON-os példa
Javascript függvény létezésének vizsgálata:

if(typeof yourFunctionName == 'function')
{
  yourFunctionName();
}

<div id="datepicker"></div>
<script type="text/javascript">
jQuery(function() {
	jQuery( "#datepicker" ).datepicker({
	  dateFormat: 'yy-mm-dd',
	  onSelect: function(dateText, inst) {
             // a kiválasztott hónap utolsó napja
	     var d = (new Date((new Date(inst.currentYear, inst.currentMonth+1, 1))-1)));
             // a datepicker használható a formázáshoz
	     console.log( jQuery.datepicker.formatDate( 'yy-mm-dd', d );
	  }
	});
});
</script>

Az alábbi kis javascript kóddal lehet egy xml objektumot(fájlt) letölteni és feldolgozni

Az xml dokumentum lekérése

function loadXMLDoc(dname)
{
var xmlDoc;
// code for IE
if (window.ActiveXObject)
{
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else
{ // code for Mozilla, Firefox, Opera, etc.
  if (document.implementation && document.implementation.createDocument)
  {
    xmlDoc=document.implementation.createDocument("","",null);
  }
  else
  {
    alert('Your browser cannot handle this script');
  }
}
xmlDoc.async=false;
xmlDoc.load(dname);
cleanWhitespace(xmlDoc); // itt törlöm a white space karaktereket
return(xmlDoc);
};

lekérem az webpage xml-ből az adatokat egy tömbbe

function XMLtoArray(webpage)
{
var data=new Array();
try {
     xmlDoc=loadXMLDoc(webpage);
     var x=xmlDoc.documentElement;
     //document.location.href = webpage;
	 for (j=0;j<x.childNodes[0].childNodes.length;j++)
     {
       data[x.childNodes[0].childNodes[j].getAttribute("name")] =
	     x.childNodes[0].childNodes[j].childNodes[0].nodeValue;
	 }
	 return data;
	 }
catch(err)
    {
	  return data
	};
};

Amikor ezt a scriptet írtam, a firefox még nem volt képes feldolgozni az xml fájlt, ha az white space karaktereket tartalmazott. Azóta nem tudom, hogy változott-e, de íme a kód, ami törli és amire az első függvényünk hivatkozik:

var notWhitespace = /\S/
function cleanWhitespace(node) {
  for (var x = 0; x < node.childNodes.length; x++) {
    var childNode = node.childNodes[x]
    if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue)))
	{	// that is, if it's a whitespace text node
	  node.removeChild(node.childNodes[x]);
      x--;
    }
    if (childNode.nodeType == 1)
	{ // elements can have text child nodes of their own
      cleanWhitespace(childNode)
    }
  }
}

Teszt

Legyen ez a teszt.xml fájlunk. Mint látható 2 mezőt tartalmaz: város és irányítószám.

<?xml version='1.0' encoding='UTF-8' standalone='yes'?>
<select>
<record id='1'>
<field name='varos' type='string'><![CDATA[Budapest]]></field>
<field name='iraszam' type='int'>1131</field>
</record>
</select>

tesztlejük le, hogy működik-e. Tegyük be a javascript függvényeket egy xmldom.js nevű fájlba. És hozzuk létre az alábbi html fájlt (index.html):

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript" src="xmldom.js"></script>
 <script type="text/javascript">
 console.log(XMLtoArray("/teszt.xml"));
 </script>
</head>
<body></body>
</html>

A console.log használatához szükségünk lesz a Firefox Firebug nevű kiegészítőjére. Annak a konzolján fog megjelenni a tömb.