Toevoegen aan onze Leopard Desktop met jQuery

  
 
Acrobaat
 
Opening
 
Photoshop
 
Safari
 
vinder
 
 

De eerste afbeelding is de tijdelijke aanduiding voor de map. Dit is wat het dock activeert, dus het is noodzakelijk. (Wanneer we echter de jQuery-selectors gebruiken, weet ik zeker dat je dit zou kunnen gebruiken: eerst om het eerste dock-item te krijgen als je / echt / niet een containing-mand wilt).

Stap 1: 2 - CSS

In tegenstelling tot de eerste zelfstudie, ga ik de CSS en jQuery voor elke stap opnemen, net zo dat het ontwerp niet helemaal warrelt. Open style.css van vorige week en voeg onderaan toe:

.stapel positie: absoluut; onderkant: 0; rechts: 100px;  .stack ul lijststijl: geen; positie: absoluut; top: -30px; z-index: -9;  .stack ul li position: absolute;  .stack ul li span display: none;  / * Ik ben voor de jQuery * / .stack .openStack li span display: block; positie: absoluut; top: 17px; rechts: 60px; hoogte: 14 px; regelhoogte: 14 px; rand: 0; background-color: # 000; kleur: #fcfcfc; text-align: center; dekking: .85; opvulling: 3px 10px; grensradius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; opera-border-radius: 10px; text-shadow: # 000 1px 1px 1px; 

Je stapel ziet er nu uit als een gesloten stapel, maar je kunt deze niet openen. Dit zorgt ervoor dat alle pictogrammen boven op elkaar worden geplaatst, dus ze zijn samengeperst tot een klein vierkantje. De laatste selector is voor de jQuery. Wanneer de stapel wordt geopend, wordt de klasse 'openStack' toegevoegd aan de ul. Mijn excuses aan die CSS3-haters, het is de snelste en meest efficiënte manier om het goed te krijgen in de meeste moderne browsers.

Stap 1: 3 - jQuery

In gewoon Engels moet de stapel worden geopend als op de img wordt geklikt, waarbij elke stapel (increment ...) in incrememnts wordt gedrukt en een klein beetje naar rechts, terwijl de grootte wordt gewijzigd naar een kleiner formaat. Wanneer u vervolgens opnieuw klikt, wordt alles weer normaal.

$ ('. stack> img'). toggle (function () // deze functie, voor elk element verhoogt de toppositie naar 50px, // and over using, de vergelijking: waarde = (waarde + 1) * 2 Beide variabelen // beginnen bij 0., function () // deze draait gewoon het bovenstaande om.);

De tweede functie is eenvoudig, maar de eerste is pijnlijk.

var verticaal = 0; var horizontal = 0; $ ('~ ul> li'this) .each (function () $ (this) .anim (top:' - '+ vertical +' px ', links: horizontal +' px ', 300); verticaal = verticaal + 50; horizontaal = (horizontaal + 1) * 2;); $ ('~ ul', this) .animation (top: '-50px', links: '10px', 300) .addClass ('openStack'); $ ('~ ul> li> img', this) .animation (width: '50px', marginLeft: '9px', 300);

Woo, jampacked met string interrupting, variabelen en wiskunde. Interessante selectors, huh? De ~ is 'broers en zussen van' Erg. Wiskunde. Laat het me uitleggen. De eerste 2 variabelen zijn voor de verticale positie en de horizontale positie (curve).

Topverhoging is elke keer hetzelfde, waarbij, tenzij je een horizontale rechte lijn wilt, elke horizontale positie iets meer moet zijn dan de rest. In dit geval neemt het toe met het vorige nummer plus één, keer 2. dus het gaat 2, 6, 14, 30, 62, 126, etc. Ik weet dat het rare cijfers zijn, maar het werkt. Gebruik elke gewenste vergelijking!

De 'each'-functie is vergelijkbaar met, zeg een WordPress-lus. Deze functie gebeurt elke keer dat het volgende element wordt gebruikt. De vergelijking 'waarde = (waarde + 1) * 2', betekent 'nieuwe waarde is gelijk aan oude waarde plus één, dan dit tijden twee.

De eerste animatielijn voegt de variabelen (binnen de plus) toe, elke keer dat deze wordt gelust via string-splitsing. De laatste twee regels zijn net zo groot. Met de andere helft van de schakelfunctie wordt alles weer normaal ingesteld:

$ ('~ ul', this) .removeClass ('openStack'). children ('li'). anim (top: '20px', links: '-10px', 300); $ ('~ ul> li> img', this) .animation (width: '79px', marginLeft: '0', 300);

Eenvoudig! Nu zullen je jQuery-stapels met succes worden geanimeerd, zelfs gebogen! Helaas is rotatie een beetje moeilijker. Hoewel HTML5 in 2022 uitkomt (-_-), heeft de canvastag daar mogelijk volledige ondersteuning voor.

Stap 2 - Dashboard

Dus we gaan een beetje toevoegen aan het Dashboard. Allereerst een widget Widgets toevoegen (doe de daadwerkelijke toevoeging pas later). Daarna is het sluiten van de widgets mogelijk wanneer dit paneel open is. Eindelijk, het kunnen toevoegen van uw eigen widgets vanuit dit paneel. Gebruikt een aantal zeer verschillende selectiemethoden. Door de widgets toe te voegen worden ook Droppables uitgebreid behandeld, omdat de dropfunctie vrij groot is.

Stap 2: 1 - Widgetpaneel toevoegen

Ten eerste de HTML. Voeg dit toe net voor de afsluitende #dashboardWrapper div.

 Widgets toevoegen / verwijderen 
 
 
Kleverig
 
Klok
 
Weer
 
 
 

De 'openAddWidgets' is het kleine kruisje / plus dat het paneel opent en sluit. De lijstitems zijn de beschikbare widgets (maak er zoveel als u wilt!). De afbeeldingen die je hebt gedownload zijn de kleine duimen. Deze worden draggables en je kunt ze neerzetten op #closeZone en uiteindelijk widgets toevoegen aan de #widgets-lijst.

Op dit moment lijkt dit een beetje een puinhoop;

Maar met wat CSS zullen we dat rechtzetten.

#addWidgets position: absolute; z-index: 9999; onderkant: 0; links: 0; breedte: 96%; hoogte: 164 px; achtergrond: url (images / dashpanel.png) bottom repeat-x; opvulling: 0 2%;  #openAddWidgets display: block; breedte: 36px; hoogte: 36px; achtergrond: url (images / opendashpanel.png) center; positie: relatief; z-index: 9999; text-indent: -9999em;  #dashPanel ul lijststijl: geen; margin-top: 27px;  #dashPanel ul li float: left; opvulling rechts: 30px;  #dashPanel ul li img display: block;  #dashPanel ul li span width: 74px; weergave: blok; text-align: center; lettertype: vet; text-shadow: #fff 1px 0 1px; kleur: # 17243e; padding-top: 10px; 

Dit zou zwaar moeten zijn op positionering, z-indexering en zwevende effecten, zoals dit (paneel is daar, niet verborgen):

Eindelijk, jQuery om het te verbergen en te tonen. Voeg het volgende toe onder de opmerking '// draggables definition' (ter wille van de organisatie):

$ ('# addWidgets ul li img'). draggable (helper: 'clone');

En voeg dit toe onder het '// initiële verbergen van dashboard + toevoeging van' closeZone'-blok:

// aanvankelijk verbergen van #dashPanel en toevoegbare widgets $ ('# addWidgets'). css (bottom: '-118px');

Nu voor de toggle-code. Als u in het Engels op de knop 'openen' klikt, schuift u het paneel omhoog. Wanneer het opnieuw wordt geklikt, schuift u het paneel naar beneden. Laten we beginnen met de schakelaar.

// open / closing van het dashpanel $ ('# openAddWidgets'). toggle (function () // dit opent het dashboard, animatie en alles, function () // tegengesteld aan hierboven);

Dus de openingsfunctie zal in de eerste opening zijn, terwijl de sluiting in de tweede. De eerste:

$ (this) .css (background: 'url (images / closedashpanel.png)'); $ ('# addWidgets'). animeren (bottom: '0px', 500);

En de tweede, omkering hierboven:

$ (this) .css (background: 'url (images / opendashpanel.png)'); $ ('# addWidgets'). animeren (bottom: '-118px', 500);

Eindelijk, net als Leopard, zou het moeten sluiten wanneer de gebruiker terugkeert naar het bureaublad, toch? Voeg dit toe aan // # closeZone's taak: de functie 'Dashboard' sluiten (erin!):

$ ('# openAddWidgets'). css (background: 'url (images / opendashpanel.png)'); $ ('# addWidgets'). animeren (bottom: '-118px', 500);

Als u nu op het kleine plusteken onderaan links klikt wanneer het Dashboard geopend is, moet het animeren! Geweldig!

Stap 2: 2 - Widgets toevoegen aan de Dashboard-lijst

Dit bleek anderhalve half te zijn. Veel code hiervoor ... Yay! Gelukkig is het alleen jQuery! Laten we beginnen met het definiëren van de overdraagbare; #closeZone. Plaats dit onder de Draggables-definities:

// droppable definition $ ('# closeZone'). droppable (accept: '.widgetThumb', drop: function (ev, ui) );

In principe kan #closeZone nu de duimen in het paneel als droppables accepteren en gaan we ons verdiepen in wat er in de drop-off gebeurt.

In begrijpelijke taal, zo gaat het. Variabelen voor de positie van de muis moeten worden gevonden, zodat de positie van de drop kan zijn waar we hem willen hebben. Een andere variabele voor het type widget dat moet worden toegevoegd, is nodig. Bij het neerzetten moet de Widget worden toegevoegd, een andere afbeelding, afhankelijk van de widgetType-variabele. Om nu anders te zijn, kunnen de stickies worden bewerkt (geen enkele manier!). Een tekstvak wordt toegevoegd om te kunnen schrijven. Omdat alle versleepbare definities voorkomen bij de belasting van het document, moeten ze telkens opnieuw worden gedefinieerd wanneer een widget wordt toegevoegd aan de DOM, zodat deze wordt toegepast op de nieuwste versie van een dergelijke.

We beginnen met de variabelen.

var x = ev.clientX - 100; var y = ev.clientY - 50; var widgetType = $ (ui.draggable) .attr ('id');

Helaas kunnen we de breedte en hoogte van de afbeelding niet krijgen die te gemakkelijk wordt toegevoegd (om de dropping te centreren). Dus in plaats daarvan moeten we raden, door de positie van de muis te verrekenen met 100 en 50, dus het staat niet in de linkerbovenhoek. De JavaScript-variabelen 'cleintX' en 'clientY' zijn in feite de muispositie. En die interessante selector; ui.draggable, is het element dat zojuist is gesleept! Bedankt jQuery.ui! Nu voor aanhangsel:

$ ( '# Widgets'). Toevoegen ('
'); $ ('. StickyWidget '). Toevoegen (''); // nodig om textarea toe te voegen aan het nieuwste DOM-lid $ ('. widget '). draggable (); // nodig om het nieuwste DOM-lid te verslepen

Staat u mij toe om uit te leggen hoe de variabelen werken in de toevoeging. Om een ​​klasse aan de nieuwe widget voor maatwerk te geven, voegt het toevoegen van "... '+ widgetType +' Widget '..." een klasse terug die lijkt op' stickyWidget 'of' weatherWidget '. De inline-stijl (sorry dat het inline is! Schiet me niet neer!) Bepaalt de absolute positie van de widget door de variabelen, die natuurlijk de muiscoördinaten zijn. Zoals ik al zei, moeten de nieuwste DOM-leden eventuele wijzigingen in jQuery of aanhangsels [gemaakt bij het laden van het document] opnieuw toepassen, omdat jQuery geen nieuwe DOM-leden herkent. Voor de laatste twee regels moet jQuery het tekstgebied toevoegen (zodat u de tekst kunt bewerken) en de nieuwe widget moet een sleepbaar worden.

Om dit allemaal te laten werken, is wat CSS nodig. Vervang in style.css de '.widget'-selector en attributen met:

.widget positie: absoluut; z-index: 9999; zweven: links; marge: 1em; lijststijl: geen;  .stickyWidget padding: 15px 20px; breedte: 185 px; hoogte: 155 px; achtergrond: url (images / widgets / sticky.png) no-repeat center;  .stickyWidget> img weergave: geen;  .stickyWidget textarea height: 100%; breedte: 100%; achtergrond: 0; rand: 0; overzicht: 0; lettergrootte: 16px; font-family: 'Marker Felt'; overloop verborgen; 

Dit maakt de plakkerig er allemaal plakkerig uitzien. Het lettertype Marker Felt zal je wel of niet hebben, dat is wat de eigenlijk kleverige widget gebruikt. Om de originele widget mooi te houden, wikkel je de tekst in plaats van in

s maar met:

... <textarea></pre> <p>En geef de li een extra klasse van 'stickyWidget' die overeenkomt met de css (De li'll hebben nu 2 klassen).</p> <p>Alles verloopt volgens plan, je zou nu in staat moeten zijn a) stickies te bewerken en b) nieuwe widgets aan het Dashboard toe te voegen.</p> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_5.png"> <h4>Stap 2: 3 - Widgets sluiten</h4> <p>Waarom zou dit deel een hele sectie voor zichzelf zijn? Omdat de werking hiervan verweven is met alle vorige functies, klikken en aanhangsels. Dus in plaats van in de war te zijn door dit toe te voegen in alle delen, waarom niet in één houden?</p> <p>Rechts. Dus in principe zal er een kleine hoeveelheid worden toegepast op widgets wanneer het paneel wordt geopend en wanneer een nieuwe widget wordt toegevoegd aan het Dashboard. Wanneer er op wordt geklikt, verdwijnt de bovenliggende widget! Geweldig, huh? Wanneer het widget Widgets toevoegen wordt gesloten, verdwijnen de kruisen in de sferen van .hide ().</p> <p>Door het document te downgraden voor het integreren van de knop Sluiten, beginnen we met de functie # closeZone. Onder de addlist van de # addWidget (code), voeg je toe:</p> <pre>$ ( 'CloseWidget.') Te verbergen ().;</pre> <p>Volgende omhoog, binnen de uitwerpbare definitie. Dit codefragment past een knop voor een gesloten widget toe en zijn functie voor alle widgets wanneer een nieuwe wordt versleept. Onder de nieuwste versleepbare definitie voor de nieuw gemaakte widget (in de vervolgkeuzefunctie), voegt u toe:</p> <pre>$ ('. Widget '). Toevoegen ('<span><img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_6.png"/></span>'); // klik op de functie van het nieuwste DOM-element. $ ('. closeWidget'). klik (functie () $ (this) .parent (). anim (opacity: '0', 300) .animation (left: '-9999em', 1); );</pre> <p>Ten slotte is de paneelfunctie openen / sluiten waar het er echt toe doet, omdat dit het ding zal toevoegen aan alle Widgets bij openen van het paneel (zoals Leopard). Onder beide animates, voeg respectievelijk toe:</p> <pre>$ ('. Widget '). Toevoegen ('<span><img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_6.png"/></span>'); // klik op de functie van het nieuwste DOM-element. $ ('. closeWidget'). klik (functie () $ (this) .parent (). anim (opacity: '0', 300) .animation (left: '-9999em', 1); );</pre> <p>en</p> <pre>$ ( 'CloseWidget.') Te verbergen ().;</pre> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_6.png"> <p>Nu, wanneer het paneel wordt geopend, gaat er een klein klikbaar kruis naar de rechterbenedenhoek van de Widget en wanneer u een nieuwe Widget aan sleept, lijkt dit een duplicaat. Voeg dit CSS toe om dit alles op te lossen:</p> <pre>.closeWidget position: absolute; z-index: 99999; top: -5px; links: -5px; </pre> <p>En TADA! U hebt nu widgets die sluiten en kunt hervormen wanneer u ze ook wilt! Geweldig spul!</p> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_7.png"> <h3>Stap 3 - Een aantal extra bits</h3> <p>Dit is echt alleen voor visuals, maar we zullen een Desktop Item toevoegen dat je je eigen functie kunt creëren wanneer er dubbel op geklikt wordt, en het Dock een beetje sneller maakt.</p> <h4>Stap 3: 1 - Desktopitem</h4> <p>Voeg wat HTML toe, maak dit het eerste na de opening #wrapper div:</p> <pre><ul> <li><span>Macintosch HD</span></li> </ul></pre> <p>Geef het wat CSS om er hip uit te zien:</p> <pre>#desktopItems lijststijl: geen; breedte: 100%; hoogte: 100%;  #macintoschHD background: url (images / macHD.png) no-repeat center top; padding-top: 128px; breedte: 138 px; marge: 20px; text-align: center; positie: absoluut; rechts: 0; kleur wit; lettertype: vet; text-shadow: # 000 1px 1px 2px; </pre> <p>En ten slotte enkele jQuery om uw dubbelklikfunctie uit te voeren (eerlijk, verander de waarschuwing naar wat u maar wilt):</p> <pre>// Open finder van bureaubladitem $ ('# macintoschHD'). Dblclick (function () alert ("Hey ... Geef me een pauze, ik heb hier hard aan gewerkt!"););</pre> <img src="//accentsconagua.com/img/images_27_7/adding-to-our-leopard-desktop-with-jquery_8.png"> <h4>Stap 3: 2 - Verbeter het Dock</h4> <p>Dus vorige week klaagden sommigen van jullie over het onhandige Dock en ik beweer dat ik er niet veel aan kan doen. Als u echter uw ogen voor de gek houdt om te denken dat het vloeiend is, kunt u de snelheid verhogen. Verander eenvoudigweg de jqDock-verklaring in dashboard.js in:</p> <pre>var jqDockOpts = duration: 200; $ ( '# Dock') jqDock (jqDockOpts).;</pre> <p>En nu zou je een sneller dock moeten hebben!</p> <h3>Afronden</h3> <p>Wat een geweldige tutorial om te schrijven ... Dat was moeilijk. Maar hey! We hebben het gedaan! Ik gebruik deze ruimte om een ​​paar dingen te onthouden van de vorige week die in reacties zijn verschenen.</p> <p><strong>D.W.Z.</strong> Die bastaard. Ook jammer van jQuery, omdat het geen cross-browser is zoals het bedoeld is. Ik krijg het gevoel van sommigen van jullie dat klagen dat mijn code slecht is in de opmerking dat het niet werkt in UW browsers waarvoor JIJ codeert. Ik schreef er een artikel over op mijn website over browser-specifieke coders. Natuurlijk weet ik dat je goed moet zijn in alle browsers ... Maar niemand is perfect.</p> <p><strong>Practability.</strong> Het is duidelijk dat dit gewoon leuk is. Stacks kunnen een optie zijn voor een site, maar uiteindelijk moet het leuk zijn. Laat me een opmerking van vorige week citeren (geen schaamteloze promotie die ik beloof!).</p> <blockquote> <p>Bedankt voor het nemen van de tijd om deze tutorial te schrijven, jQuery is geweldig en het is leuk om wat tijd te nemen als ontwikkelaars en plezier te hebben met alle codebibliotheken die rondzweven. Verlicht mensen en heb plezier ermee, het is niet bedoeld als praktisch, leuk en inspirerend. Geweldige tut.</p> <p>vriendelijke groeten,</p> <p>Drew</p> </blockquote> <p>Ik denk dat dat het is. Ik hoop dat jullie allemaal (Nee, ik ben niet TEXAN!) Genoten van deze tutorial, het was niet moeilijk om bij te houden, en ga <strong>recht</strong> terug in het praktische denken nu!</p> <ul> <li>Abonneer u op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.</li> </ul> <p> <br> </p>


<div class="rek-block">
	<center>	
			<ins class="adsbygoogle"
			style="display:inline-block;width:580px;height:400px"
			data-ad-client="ca-pub-3810161443300697"
			data-ad-slot="9434875811"></ins>
	   <script>
	   (adsbygoogle = window.adsbygoogle || []).push({});
	   </script>
	</center>
</div>


<div class="h-alltags">
<a href="articles/code">Code</a>
</div>

		</div>

</div>
</div>




</div>


<div class="next_posts clearfix">
	<div class="n_post">
        
		<div class="next_posts-h1 left_nh1"><a href="/articles/code/adding-to-the-body-class-in-wordpress.html">Toevoegen aan de Body Class in WordPress</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_13/adding-to-the-body-class-in-wordpress.jpg');"></div>	
			
        				
	</div>		
	<div class="n_post">
        
		<div class="next_posts-h1 right_nh1"><a href="/articles/code/adding-the-css-for-a-color-scheme-in-the-theme-customizer.html">De CSS voor een kleurenschema toevoegen in de thema-aanpasser</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_13/adding-the-css-for-a-color-scheme-in-the-theme-customizer.png');"></div>
					
        
	</div>
</div>


<footer>
	<div class="container">
			<div class="footer-langs">
					<ul class="site-langs-list">
							<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>					
							<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
							<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
							<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
							<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
							<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
							<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
							<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
					</ul>
				</div>
				
			<div class="h-block"><a href="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur.
			</div>
	</div>
</footer>

<div class="search">
	<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
	<div class="modal">
			<div class="modal-content">
							<span class="close-button">×</span>

							<input class="searchmain" type="text" id="search-input" placeholder="Zoeken...">
							<ul class="searchli" id="results-container"></ul>

						</div>
</div>


<link rel="stylesheet" href="css/flags.css">

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
  "popup": {
	"background": "#edeff5",
	"text": "#838391"
  },
  "button": {
	"background": "#4b81e8"
  }
},
"theme": "classic",
"position": "bottom-right"
})});
</script>


	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<script src="js/scripts.min.js"></script>	
	<script src="js/common.js"></script>
	<link rel="stylesheet" href="css/fontawesome-all.min.css">

	<script>
			var modal = document.querySelector(".modal");
			var trigger = document.querySelector(".search");
			var closeButton = document.querySelector(".close-button");

			function toggleModal() {
						modal.classList.toggle("show-modal");
			}

			function windowOnClick(event) {
						if (event.target === modal) {
										toggleModal();
						}
			}

			trigger.addEventListener("click", toggleModal);
			closeButton.addEventListener("click", toggleModal);
			window.addEventListener("click", windowOnClick);
</script>



    <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
</script>

<script src="jquery.unveil2.min.js"></script>
<script>
	$('img').unveil();
</script>

</body>
</html>