Nisem mogel pomagati, tudi sam pisal o tem plugin. To je eden izmed najbolj kreativnih stvari, ki sem jih videl je s jQuery. Kot že ime pove, pred-ko, lahko vohaš nekatere ukrepe, kajne? Oglejte si slike tukaj:

Plugin omogoča prikaz dveh slik na isto stvar v različnih časih kažejo nekaj razlik. Seveda bomo lahko razumeli razlike, ko sta dve slike prikazane bok VENDAR nizanjem na drugo in ima drsnik, da jih potisnite in videli, razlika je preprosto super in to je tisto, čemur pravimo ustvarjalnost. Niz demo je tu http://www.catchmyfame.com/jquery/demo/8/ . Poleg drsnik je gladko in ko boste kliknili na kateri koli del slike, drsnik pride do kazalcem gladko - precej impresivno.

Moški iz http://www.catchmyfame.com naredil res lepo delo. Mi bi pričakovali vertikalni drsnik, če je mogoče, ta plugin v naslednji izdaji. Zabavajte se z njo.

Vedno sem bil velik oboževalec jQuery Grid Plugin jQGrid. To zmorem zelo kompleksne in sofisticirane nalog. Ampak jaz nisem všeč UI je bilo prej. Moral sem spremeniti svoje CSS mogli predstaviti strankam. Prav tako uporabite flexigrid enostavnejših nalog. To je zelo enostaven za delo. Vendar nobeden od njih ni bilo nikjer bližje premagati Jack Slocum je EXT JS Grid. Zunanji bilo težko za mene, kot sem bil učenje le-teh in na koncu ugotovila, da moje aplikacije ne zahtevajo namizne občutke kot ExtJS predvidenih. In je velik oboževalec jQuery, sem vedno želel imeti mreže vtičnik, ki deluje blizu ExtJS omrežje. Zdaj pa poglej to.

Awsome, kajne? Da, jqGrid na trirand zdaj napaja z jQuery UI. To je zelo lepo in hitro zdaj. Lahko prilagodite temo iz jQuery UI mestu, kot tudi. Nič več govori zdaj, samo pojej tukaj http://www.trirand.com/jqgrid35/jqgrid.html

Tako da ni utripala po vsem storiti vse Magics! Videli smo in še vedno vidim bliskavice delaš čudeže in Magics. Ena od kul stvari, ki je bila razvita je pageflip. Videl sem, da je prvič, ko sem se igral z bliskavico v letih 2002-2003 mislim na flashkit in actionscripts.org. Ogledate si lahko zelo dober pro verzijo take stvari tukaj . Ampak za nas, ki želijo večino stvari narediti v jQuery - končno ima alternativo tej strani flip stvari. To ni povsem alternativa bliskavico pa ni slabo za minimalno uporabo strani flip učinek.

To je, kako je videti s plugin imenovan jFlip Renato Formato pisno na http://www.jquery.info/scripts/jFlip/demo.html

Demos je na tej strani ima drugačne postavitve z nekaterimi možnostmi. In jaz ustvaril eno z nekaj mojih sanjskih avtomobilov tukaj

Upam, da vam je všeč pobudo Renato.

To je zelo kratek prispevek o tem, kako lahko preprosto ustvarite animirane menije, s jQuery brez vtičnika. Najbrž ste opazili horizontalne ali veritical navigacijske menije, ki se širi in krči njeno velikost na prevračanjem. Pred njimi okvir javascript prišli, smo morali narediti kar veliko kodo, da bi dobili stvari narediti. Zakaj? Ta neumni križ ravnanje brskalnik. Ne želim začeti znova na IE.

Ok, tukaj je stvar. Mi smo preprosto uporabo neurejen seznam, da bi horizontalni meni, da se širi in krči. Koda je mrtev preprosta. Oglejmo si pribitek prvič.

 <div id="navcontainer"> <ul id="navlist"> <li> <a href="http://www.google.com"> Google </ a> </ p> <li> <a href = "http://www.yahoo.com"> Yahoo </ a> </ p> <li> <a href="http://www.msn.com"> MSN </ a> </ p> <li> <a href="http://www.lycos.com"> Lycos </ a> </ p> <li> <a href="http://www.baidu.com"> Baidu </ > </ li> </ ul> </ p> 

Torej, imamo nekaj postavk seznama tam. Tako da bodo videti kot horizontalno meniju mi ​​bi potrebovali nekaj css, ki je videti takole

 : inline ; } #navcontainer ul li li {izpis: inline;} # navcontainer ul li 

In zadnji del .. Jim ples na mouseover odločitev. Preprosta z oživljeno funkcijo. Samo bo nekaj teh vrstic spodaj trik. Imajo pogled.

	 ( ) { $ ( "#navlist $ (Function () {$ ("# navlist 

To je to! je v akciji See

Ali vam je dolgčas s preveč tablah thickboxes, okenskih prevlek? Ali želite inline galerijo nekako stvar? Lahko narediš. Slišal sem od nekaterih strank (starejši odjemalci), ki jim ni všeč to nezavest, če tablah thickboxes. Torej, kaj naj potem naredim? Ena stvar, u, ko pomislite na nekaj, poskusite dober prvi, v 80% primerov boste našli rešitev, da se je nekdo že dosežen. To ni Newtonov stoletja, to je 21. stoletje. Toliko ljudi, so po tolikih stvareh. In nemška fant z imenom Christoph Schüssler prihaja, da nas reši iz rednega tablah. Je pozval jQuery Popaj.

Ne želim, da bi se zgodba več. Tako je v akciji videli . In prepričan sem, da boste nameravate uporabljati ta vtičnik, v nekaterih vaših naslednjih projektov.

Torej AJAX AJAX in AJAX, to je tisto, kar počnemo v veliki meri v teh dneh. To prihrani čas, dodaja dinamiko in vam daje občutek z uporabo aplikacije vrste programske opreme za občutek. Tam smo veliko načinov za uporabo AJAX s številnimi knjižnicami. Toda, kot lahko vidite, ta stran je za jQuery, bomo pogledali v osnovnih ali morda nekaj naprednih AJAX rabe.

Kaj pa potrebujemo?

jQuery knjižnica (seveda)
Majhen php skript

Dajmo se začeli pogovarjati. V jQuery, obstajata 6 vrst metodo narediti AJAX operacije. To so

1. $ Ajax (opcije).
2. $. Dobili (url, podatki, povratni klic)
3. $ GetJSON (url, podatki, povratni klic).
4. $. GetScript (url, povratni klic)
5. obremenitev (url, podatki, povratni klic)
6. $. Pošta (url, podatki, povratni klic,

Poleg številke 1, vse ostale metode uporabljajo $. Ajax interno. Torej to pomeni, da $. Ajax () je naša mati funkcija jQuery AJAX operacijah. Oglejmo si, kako $. Ajax () Izgleda,

 msg ) ; } } ) ; Odziv "+ msg);}}); 

To je kar je. Tip parameter je "GET" ali "PO", kar pomeni, da lahko pošljete AJAX requestion kot POST ali GET (Raje POST vedno). Ostali parametri so precej samoumevne, če ste vzeli pogled na kodo še enkrat.

Zdaj bomo narediti majhen AJAX skripto, ki se glasi na povezavo hiperpovezav oznak (Ra) in naloži zahtevo na nekaterih div elementov v dokumentu.

Najprej smo se normalno HTML php dokumenta, ki bo videti takole

  <DOCTYPE html PUBLIC! "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 <head>
	 title Ajax povezava preizkus </ title>
	 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	 <script type="text/javascript" src="jquery-1.2.6.min.js"> </ script>	
 </ Head>
 <body>
 </ Body> </ html> 

Zdaj pa dodali nekaj povezav do dokumenta. Za boljše meni zgledajo bomo uporabili ul> LI in Link. To bo videti takole

  <ul id="nav">
	 <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> Load v Div 1 </ a> </ p>
	 <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> Load v Div 2 </ a> </ p>
	 <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> Load v Div 3 </ a> </ p>
	 <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> Load v Div 4 </ a> </ p>
 </ Ul> 

Kot lahko vidite, smo pripravili povezave na seznamu elementov znotraj neurejen seznam predmeta. Pobliže si oglejte lastnosti <a> je. Imamo href, razred in rel atribut, ki izgleda nič drugačen od običajnega povezavo. Če vidite, da smo glede na rel atribut div nekaterih imen sicer div1, div2 .. tako naprej. To pomeni, da želimo, da se odziva href biti naložen v teh divs. Kako to storiti? Poglejmo najprej dodati ta divs

  <span> DIV -1 </ p>
 <div id="div1" class="content_loader"> </ p>
 <span> DIV -2 </ p>
 <div id="div2" class="content_loader"> </ p>
 <span> DIV -3 </ p>
 <div id="div3" class="content_loader"> </ p>
 <span> DIV -4 </ p>
 <div id="div4" class="content_loader"> </ p> 

In realni del zdaj - smo dali povezav razreda "ajax_link". Mi bomo samo dinamično dodate Ajax ukrepe le povezave, ki imajo ime razreda, imenovano "ajax_link". Vraga, ne bomo vse povezave iz strani, da ima Ajax ukrepe, kajne?

Torej, od obremenitve dokument, da bova to.

  . ready ( function ( ) { $ (Document). Ready (function () {
         ) . click ( function ( ) { $ ("A.ajax_link"). Kliknite (function () {
             this ) ; $ Current_link = $ (this);
             $. Ajax ({
                 , tip: "post",
                 ( "href" ) , url:. $ current_link atr ("href"),
                 ( e ) { Uspeh: funkcija (e) {
                     + $current_link. attr ( "rel" ) ) . html ( e ) ; $ (. "#" + $ Current_link atr ("rel")) html (e).;
                 }
             });
             ; vrne false;
         });
     }); 

Naj razložim, skript bit. Document.ready dogodek je dogodek, ki se sproži ob strani obremenitve. In potem smo dodelitev nekakšne kod na klik primeru povezav, ki imajo razreda "ajax_link". S tem current_link $ = $ (this); omogoča, da ima trenutna povezava predmet na voljo v funkcijo povratni klic. In imamo

$ ("#" + $ Current_link.attr ("rel")) html (e).

kar pomeni $ ("div_id") html (server_response) in smo si jih zastavili url para na $ ajax funkcije z dinamično url:.. $ current_link.attr ("href"). Tako da zdaj vsi tisti sredstva "Vse tiste povezave, ki imajo razreda" ajax_link "- Dodajanje kliknite obravnavo dogodkov - torej izvršiti in AJAX zahteva ob povezav href poperty in obremenitev odziv v div id katerega se ujema z» rel «atribut povezati ". In return preprečuje povezavo dela, kot običajni povezavo

Bi rad videl tožbo? Tukaj gre.

In si lahko prenesete vir , kot dobro.

V naslednjem delu tega malo vaje bomo uporabljali isto stvar, ampak z malo udobja.

Uporaba lažji način

Vse, kar ostaja skoraj enaka. Enostavno bomo spremenili metodo ajax tukaj. Torej, namesto pisanja celotne $. Ajax blok bomo lahko dosegli isto stvar z naslednjimi.

  . ready ( function ( ) { $ (Document). Ready (function () {
 ) . click ( function ( ) { $ ("A.ajax_link"). Kliknite (function () {
 + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) atr ("rel")) obremenitve ($ (this) atr ("href").);
 ; vrne false;
 });
 }); 

To je veliko manj zapleteno, kajne? Metoda obremenitev naloži ajax vsebino v elementu pa je priložena. Če $ ("# somediv_id"). Obremenitev ("mypage.php"), da bomo poskušali naložiti vsebine mypage.php je v njem. Precej preprosto, kajne? Ampak jaz predlagam, da se navadiš na glavno metodo (prikazano v prvem delu).

V zip datoteki obstaja še druga datoteka z imenom ajax2.php kar dokazuje to methos, ki ima enak rezultat.

Torej, AJAX ni tako težko, kot se sliši, kajne? Ko ste postali zelo tekoče z AJAX operacijah, boste ustvarili Magics.

Hvala za branje btw.

Z napredovanjem DHTML, lahko naredimo veliko stvari s samo trenil. Smo vsi uporabljajo okenske prosojnice ali tablah na neki točki v času teh dneh. Ampak včasih postane potrebno, da blokira del strani ali kateri koli specifičnega elementa, npr DIV, tako da ljudje niso sposobni igrati z vaše strani, če ne želite, da jih. Všeč mi je, če je nekdo tako komentar na polje komentar, ne želite ljudi, da kliknejo na drugih pripomb, medtem ko je polnil. Kaj torej storiti? No, tam je čeden jQuery rešitev. Lahko jih preprosto blokirati, medtem ko komentiranja. In lahko obstaja veliko primerov, kot je ta, ko želimo blokirati celotno stran ali nekatere elemente. jQuery BlockUI gre za reševanje.

Sprva je bilo na blokirajo celo stran s sporočilom, ampak zdaj, lahko blokirate element strani ali celo kažejo Rezanje kot sporočilo. Oglejte si primere tukaj . Dokumentacija je zelo lepo in pošteno količina kode primeri so podani. Ga uporabljajo v svoji vlogi. Če imate kakršne koli težave, ga uporabljate, pustite me komentar tukaj.

Narediti stran portfelja z Flash na vaši spletni strani je postala nekako odveč. Te dni s hitrejšo strojev in nove generacije brskalnik lahko res kick nekaj riti z Javascript in CSS. JQuery je zelo čeden način za reševanje nekaterih učinkov. Vse animacije izhajajo iz osnovnega metodo, imenovano "animirati". To animira, tweens lastnosti elementov DOM. Če želite, da skrajšam zgodbo, da pogled na to.

Torej, ste že kliknili in videla, kajne? Ok, če pogledaš na kodo, je dokaj preprost.

  $ (Document). Ready (function () {
		 var hover_in_easing = "easeOutExpo";
		 var hover_out_easing = "easeOutBounce";
		 . $ (". Info_container«) kažejo ();
		 $ ("Div.portfolio_div"). Hover (function () {
			 . $ (This) našli ("info_container.") Animirati ({vrhu: "0px"}, {Trajanje: 400, olajšanje: hover_in_easing}).;
		 }, Function () {
			 . $ (This) našli ("info_container.") Animirati ({vrhu: "100 pik"}, {Trajanje: 500, olajšanje: hover_out_easing}).;
		 });
                 / / 100 px je velikost maske
	 }); 

Ki jih uporablja animirati funkcijo animirati masko preko slike, ki ga vodi skrita pozicioniranje relativno. In z zmanjševanjem plugin, smo dosegli nekaj kul učinek odbijal, ko hover ven iz slike. Lahko dajo vse html znotraj DIV elementov info_container dokler ne gre preko meja. Poglej slogovne in boste našli zelo gramatical. Lahko prilagodite velikosti s spremembo div razrede.

Prenesite Vir

Navdih: http://dibusoft.com/portfolio

Ste kdaj videli tiste pregledne napise na slikah? Napisi poping ven iz dnu ali vrhu opisuje fotografijo? Prepričan sem, da imate. Obstaja veliko scenarijev, kot je ta. In tukaj pride naša najljubša verzija jQuery tega.

Vi lahko postavite navaden, besedilo, HTML ali kaj tam. Samo poglej na njihovi domači strani plugin in to je zelo lepo opisano. Potrebna ni grdo trikov.

http://masterfidgeter.com/projects/captify/

Naredite svojo fotografijo strani videti dobro z njo.

Ta teden - marec 20,09 jQueryMagic izbere jQuery colorbox kot kramp v tednu. Vsi ste slišali veliko košarico, thickbox, greyboxes in različnih okenskih prevlek. To pa še ni v novejših izdajah plugin. Ta je res kamenje. Popolnoma prilagodljiv in enostaven za uporabo. To je lahek in videti kul. Poleg tega je kup primer v paketu s knjižnico.

colorbox

Pojdi na stran projekta tukaj .