LightFace:Facebook Lightbox pro MooTools

Jednou z webových komponent, kterou jsem vždy miloval, byl modální dialog Facebooku. Tento „lightbox“ není jako ostatní: žádné tmavé překrytí, žádné nepříjemné animace na velikost a nesnaží se dělat „příliš mnoho“. S ohledem na dialog Facebooku jsem vytvořil LightFace:klon Facebook lightbox pro MooTools. LightFace a jeho rodina tříd dobře fungují s prvky iFrame, obrázky, obsahem požadovaným AJAX, statickým umístěním a statickým obsahem.

Funkce LightFace

LightFace má hodně oporu v dobrotě!

• Pět kompaktních tříd:LightFace , LightFace.Request , LightFace.IFrame , LightFace.Image a LightFace.Static
• Omezuje velikosti obrázků změnami velikosti okna
• Poskytuje řadu možností přizpůsobení každé instance
• Reaguje na určené události klávesnice
• Funguje s Drag MooTools More třída, aby byl lightbox pohyblivý (Přetažení *není* součástí úložiště)
• Přidejte tolik tlačítek, kolik chcete
• Přidává a odebírá události podle potřeby, aby se minimalizovalo zatížení prohlížeče
• Automaticky umísťuje a mění velikost pomocí změny velikosti a posouvání okna
• Podporuje IE6+, Safari, Chrome, Opera a iPad/iPhone

Jádro LightFace

LightFace.js je základní součástí LightFace. Všechny následující třídy rozšiřují základní funkce poskytované LightFace. Vytvoření nového lightboxu LightFace je stejně snadné jako:

// Create instance
var modal = new LightFace({
	height: 200,
	width: 300,
	title: 'My Profile,
	content: 'Lorem ipsum....'
});

// Open Sesame!
modal.open();

//Update Content
modal.load('This is different content....');

LightFace poskytuje velkou flexibilitu tím, že poskytuje četné možnosti přizpůsobení lightboxu, jak chcete:

• šířka - (*integer|řetězec*, výchozí hodnota je 'auto') Požadovaná šířka modálního boxu.
• výška - (*řetězec|řetězec*, výchozí hodnota je 'auto') Požadovaná výška modálního boxu.
• přetahovatelné - (*boolean*, výchozí hodnota je false) Měl by být modální rámeček přetahovatelný podle názvu?
• název - (*řetězec*, výchozí hodnota je '') Počáteční název modalu.
• obsah - (*řetězec*, výchozí hodnota je '

  Zpráva není zadána.

  ') Počáteční obsah modalu.
• tlačítka - (*pole*, výchozí je []) Pole obsahující libovolný počet objektů obsahujících informace o tlačítku.
• fadeDelay - (*celé číslo*, výchozí hodnota je 150) Prodleva před zadáním pokynu překryvnému náběhu/ztmavení.
• fadeDuration - (*celé číslo*, výchozí hodnota je 150) Doba slábnutí překryvné vrstvy během načítání obsahu.
• klíče - (*objekt*, výchozí je objekt s esc ovladač klíče) Obslužné nástroje pro přidávání událostí, když je modální pole otevřené.
• zIndex - (*celé číslo*, výchozí hodnota je 9001) Požadovaný zIndex modalu.
• omezení - (*boolean*, výchozí hodnota je false) Měl by modální rámeček omezit obsah při změně velikosti okna?
• errorMessage - (*řetězec*, výchozí hodnota je '

  Požadovaný soubor nebyl nalezen.

  ') Chybová zpráva se zobrazí, pokud zdroj nebyl nalezen.
• resetOnScroll - (*boolean*, výchozí hodnota je true) Udržuje modální pole na stejném místě na obrazovce, pokud uživatel posouvá.

LightFace nabízí mnoho metod, které vám umožní ovládat obsah a tok každé instance LightFace:

• načíst(obsah,název?) - načte zadaný obsah do lightboxu
• otevřít (rychle?) - otevře lightbox
• zavřít - zavře lightbox
• vyblednout - slábne v "načítání" překryv
• rozplynout - zhasne překryvnou vrstvu „načítání“
• getBox - vrátí celý uzel DOM, takže samotný uzel můžete libovolně aktualizovat
• addButton - přidá tlačítko do zápatí lightbox
• showButton - zobrazí tlačítko
• hideButton - skryje tlačítko

LightFace.Request

LightFace.Request spojuje schopnosti LightFace a třídy MooTools' Request (AJAX) pro načtení obsahu do lightboxu podle potřeby. LightFace je vybaven vnitřním překrytím a indikátorem ve stylu Facebooku, který se během běhu požadavku AJAX elegantně rozsvítí a zhasne. LightFace přidává dvě další možnosti: url a request . request volba představuje objekt, který má být předán přímo interní instanci třídy Request LightFace. Zde je návod, jak by vypadalo použití LightFace.Request:

// Create the instance
var modal = new LightFace.Request({
	width: 400,
	height: 300,
	title: 'User Information',
	url: 'user.php',
	request: {
		method: 'post',
		data: {
			userID: 3
		}
	}
});

// Open!
modal.open();

// Load a different url!
modal.load('content.php','Static Content');

Na zadanou adresu URL se odešle požadavek AJAX. LightFace.Request kombinuje nastavení poskytnutá s výchozím nastavením interní třídy Request, takže po dokončení požadavku budete mít vždy zpětná volání!

LightFace.Image

LightFace.Image se specializuje na načítání obrázků v rámci lightboxu. Výhodou použití LightFace.Image je, že lightbox omezí obrázky na vhodnou výšku a šířku ve vztahu k velikosti okna. Pokud uživatel změní velikost prohlížeče, velikost obrázku se přiměřeně změní.

var light = new LightFace.Image({
	title: 'Image ' + (index + 1),
	fadeDuration: 100,
	fadeDelay: 400,
	keys: {
		left: function() { //load the previous image
			if(index!= 0) this.load(images[--index],'Image ' + (index + 1));
		},
		right: function() { //load the next image
			if(index != images.length-1) this.load(images[++index],'Image ' + (index + 1));
		},
		esc: function() {
			this.close();
		}
	}
});

Pokud chcete, aby se určité obrázky načetly do prvku IFrame, s následujícím formátem HTML:

<a href="large.jpg" rel="lightface"><img src="thumb.jpg" alt="My Image" title="Click for larger view" /></a>

...můžete snadno kódovat následující:

var modal = new LightFace.Image();
$$('a[rel="lightface"]').addEvent('click',function() {
	modal.load(this.get('src'),this.get('alt'));
});

LightFace interně nevyhledává odkazy se specifickými atributy rel. Můj názor je, že tyto techniky jsou špatné praktiky.

LightFace.IFrame

LightFace.IFrame poskytuje jednoduchou metodu pro načítání obsahu z prvku IFrame. Žádné vzrušení zde, ale původní třída LightFace byla upravena tak, aby vypadala elegantněji. Příklad použití by byl:

var modal = new LightFace.IFrame({ 
	height:400, 
	width:800, 
	url: 'http://google.com', 
	title: 'Google!' 
}).addButton('Close', function() { 
	light.close(); 
},true).open();

Při vytváření instancí LightFace.IFrame doporučuji nastavit pevnou výšku a šířku.

LightFace.Static

Všechny třídy LightFace automaticky upravují velikost a střed modálního dialogu. LightFace.Static vzdoruje trendu tím, že umožňuje absolutní umístění lightboxu, takže můžete umístit dialog kamkoli chcete! Zadejte souřadnice x a y pro umístění LightFace a objeví se přesně tam, kde byste jej chtěli, plus offsety poskytnuté v rámci možností instance:

//Create context menu
var contextFace = new LightFace.Static({
	title: 'Context',
	content: 'Hello!',
	width: 80,
	height: 100
});

//Open when context-link is clicked
document.id('context-link').addEvent('click',function(e){
	if(e) e.stop();
	contextFace.open(false,e.page.x,e.page.y);
});

//Close if clicked outside
var closer = function(e) {
	var parent = document.id(contextFace).getParent('.lightface');
	if(e.target != parent && !parent.contains(e.target)) {
		contextFace.close();
	}
};
document.id(document.body).addEvent('click',closer);

LightFace.Static je perfektním kandidátem pro vaši další kontextovou nabídku nebo funkci „toustovače“.

Přichází další!

Těšte se na další ukázky toho, jak můžete LightFace v budoucnu používat (například označování fotografií). Mezitím se prosím neváhejte rozdělit na GitHub, abyste mi pomohli vylepšit LightFace a podávali hlášení o chybách ohledně problémů s LightFace.