Csillagok 1 saját kezűleg
Azt hiszem, hogy minden látható, számos honlapok rangsor formájában a csillagok azzal a lehetőséggel, hogy hagyja el a szavazást. Ez csak, mit fogunk csinálni ebben a leckében. Írja be a script lesz a semmiből, tudásuk, de mi lenne, ha elfelejtek valamit, akkor mindig kandikál a kiságy a Ruseller.com
A türelmetlen látható a demo, a végeredmény;)
HTML - A keret a script
Vázlatosan jövőnk értékelés kell kinéznie:
A mi minősítés #raiting_star - 2 háztömbnyire. Először - #raiting - ott fog élni a csillagok és ugyanaz a felhasználó fogja értékelni. Második - #raiting_info - itt fogjuk fel az ikon ajax-rakodó, amikor adatot küld a szerver, és itt levezetni a választ a szerverről.
A blokkban #raiting meg kell mutatnunk a csillagok három állam - mutatja az aktuális minősítési, a választás a csillagok felé mutatva, és az üres csillagok. Tehát #raiting blokk tartalmaznia kell magában 3 blokk. Blokk #raiting_info hozzá még visszatérünk később, de most csak azért, hogy egy kis szöveget ötödik címet. Itt van egy egyszerű keret kapjuk:
CSS - csatolja megjelenés értékelése
Megjelenítése csillag lesz ugyanabban a fájlban. Itt egy kép, amit találtunk a script:
Az első sorozatban fogjuk használni, hogy #raiting_blank. A második, hogy a szavazás eredményét #raiting_votes. a harmadik alkalommal a szavazás #raiting_hover. Hogy a blokkok vannak elhelyezve egymás fölött, meg kell kérni az azonos helyzetben tartjuk #raiting. És a legtöbb #raiting kérni pakolás, így #raiting_info nem hagyta alatta. A fentiek alapján, hogy hozzon létre egy stílust:
Tehát abban a pillanatban szüksége van egy böngészőt, hogy az unalmas szürke 5 csillagos, és némi szöveget. A fentiek alapján, kijavítjuk az ügyet.
ruseller.com figyelmeztet - jquery addiktív :) Ne felejtsük el, hogy dugja be, akkor mi lesz vele dolgozni.
Abban a pillanatban, az első feladat - attól függően, hogy a minősítés a cikket szélességének beállításához a blokk arany csillag #raiting_votes. amelyek blokkolják a részben (vagy teljesen) blokkolják a szürke csillagok. A jövőben fogunk kapni a minősítés az adatbázisból, és mentse a szavazás eredményét is, amely alapján számítják ki a minősítés csak kiszámításával átlagos pontszám. És miközben mi predstvait mintha cikkünkben 4,5-:
mert a szélessége egy csillag 16px, illetve #raiting_votes a szélessége a blokk egyenlő 17px * Névleges (plusz 1 pixel a rések között a csillagok). Így egy változó star_widht csúszósin kívánt szélességét a blokk. Mentsd ellenőrizze. Már valami hasonlót. Megjelenítheti az értékelésnél számokkal #raiting_info blokk:
Most az a feladatunk, ha lebeg az egeret a minősítés eredménye, hogy elrejtse és mutassa meg a csillagokat, hogy válassza ki a becslést a mozgás az egérrel:
Van is semmi extra. Amikor az egérrel #raiting kapcsolja a „láthatóság” #raiting_votes és #raiting_hover blokkokat. Ugyanez történik, ha az egér elhagyja a területet #raiting. Most, amikor bejön Miskin terület #raiting, #raiting_votes egységben fog tűnni, és azt ki kell cserélni egy blokk #raiting_hover, az igazság még mindig nulla szélességű, ezért vagyunk ebben a szakaszban fogják látni szürke csillagok #raiting_blank blokk.
Most itt az ideje, hogy blokkolja #raiting_hover.
Meg kell, hogy a szélessége #raiting_hover igazodik az egeret reytenge. Ha a kódot, majd azt fogja magyarázni:
A kezdeti érték margin_doc csúszás padding minősítés képest a dokumentumot. Aztán, amikor az egér fut értékelés alapján határozza meg az aktuális pozícióját az egérrel. Widht_votes különbség a távolság, amellyel az egér futott a bal szélen #raiting. További funkciók leírását a kiságy jquery
Most, hogy tudja a távolságot, hogy az egér megszökött, becslési user_votes felhasználó. widht_votes / 17 - itt 17-1 szélessége csillag (csillagközi távolságot.). Math.ceil kerekítés az eredményt a legközelebbi egész számra. Így, ha a felhasználó bármely részén a csillagok, mi fog számítani a teljes értékelést. És az utolsó sorban is szaporodnak a becslés a felhasználó 17 annak érdekében, hogy a szélessége a kijelző egység #raiting_hover.
Ezután kell rendezni, hogy küldjön a felhasználónak, hogy a szerver értékelést. Ebben a cikkben php-mysql rész nem kell figyelembe venni, mint cél ennek a leckét - a végrehajtás a widget „Star Rating”. Szükség lesz - írja)
Tehát ez a bemutató, akkor csak hozzon létre egy fájl kezelő raiting.php néhány sornyi kódot:
Itt alszik (1) késlelteti a program futása HA1 második - csak akkor van szükség, hogy teszteljék a helyi szerver (Majd később elmagyarázom, miért). $ _GET [ "user_votes"] és $ _GET [ "id_arc"] Ehhez jön változók értékelésére és a cikk id volt.
Handler mi maradt meg, hogy küldjön egy vélemény és annak id. mert Van olyan konkrét cikkeket ebben a leckében nem változtatható id_arc engedményezheti egész számérték, 55. példa kíván adatokat küldeni a szerver lesz kattintva a rangsorban, ugyanakkor meg kell mutatnunk, hogy a hagyományos ajax loading ikon, így az első bit változás egység #raiting_info:
Itt csak hozzá Ajax-ikonra. Mert az ő előírni stílusok:
Nos, most már a tényleges felvezető a jquery:
Ez elég egyszerű. Hadd magyarázzam vonalon $ ( '# raiting_votes) szélessége ((total_reiting + user_votes) * 17/2.) - kattintva, meg kell jelölnie egy új értéket egység szélességét arany csillag.
Ehhez adja ki hozzáférhető becslés a felhasználó értékelést, és elosztjuk 2 (azaz találunk az átlag). így megtalálni az új érték értékelése szorozni 17, megkapjuk a szélessége, amely szükséges, az egység arany csillag.
És végül, szeretnénk bemutatni egy ellenőrzést a cookie-kat, a felhasználó szavazott, vagy nem ehhez a cikkhez.
Az általunk forgalmazott keresztül jquery.cookies plugin:
Ne felejtsük el, hogy csatlakoztassa a modult az oldalon (elérhető az archívumban), és biztos, hogy helyezze el a feladatot változó id_arc = 55; A samoenachalo. Minden js kódot az ellenőrző (alább):
Írta: $ ( "# raiting") unbind () ;. - kiold minden esetben rakodók a rangsorban, szavazás után a minősítés csak mutatja az eredményeket.
Ez az út nullára írtuk a forgatókönyvet a „kategória”. Mint látható, a megvalósítás nagyon egyszerű. Ha nem érti az értéke egy függvény (eljárás) jquery, akkor nézze meg a puskát. a honlapunkon.
Kívánságait és javaslatokat a megjegyzéseket. Köszönöm a figyelmet, szép hétvégét!
5 óra utolsó oszlopában „jQuery”
Ma szeretnénk, hogy meséljek TypeIt könyvtár - ingyenes jQuery plugin. Ön tudja használni, hogy szimulálja a gépelést. Ha minden megfelelően van beállítva, nagyon realisztikus hatás érhető el.
jQuery plugin létre egy idővonal.
jQuery plugin létre egy Gantt diagram.
Egy példa arra, hogyan hajtsák végre a letöltött fájl segítségével PHP és jQuery ajax.
a forráskód nem működik
AndreyZhdanov
Teljes mértékben egyetértek Alexander, ha jól csinálod, egyébként jobb, ha nem csinálni.
Tartsuk András és Sándor! Eugene Stytsenkov kérjük ne add-on ezt a cikket. Szeretném látni a teljes megoldást. Mutassuk meg, hogyan kell csinálni ezen az oldalon.
EvgeniyStytsenkov
Alexander, alvás (1) bekezdése meghatározza a késés teljesítményt php-script 1 másodpercig a példában csak meg kell, hogy teszteljék a helyi mashtne látni a küldő kérésére. ezen a vonalon lehet távolítani egyáltalán. A célja ennek a cikknek - a végrehajtás a kliens oldalon. Ezek keresték fel a szerverre, akkor csinálni velük, amit akarsz, de az adatbázis írási, legalábbis a fájlokat. Vannak korábbi osztályokban, ahol értékelése (szavazás) foglalkozott rekordot az adatbázisban, a kiszolgáló részt lehet venni, ez nem nehéz.
Köszönöm a választ! Én biztosan szeretnék próbálni a scriptet, de nem találtam, az az igazság, már a másik egy kapcsolatot az adatbázis, de nem jquery, és remekül működik.
AndreyZhdanov
Alexander, ne habozzon, hogy dobja le a kapcsolatot a forgatókönyvet, vagy szappant [email protected] Köszönet
Nem tudom prekripit ezeket a csillagokat, hogy a honlapon. Én a php fájlokat, és JQuery nem működik :( mit kell tennie.
Nekem van egy probléma, amikor dicsérte Statte, értékelése és hozta Statte száma, hanem információt, hogy mennyi a felhasználó és fog szavazni sumarno értékelés nincs azonosító szám alá.
iformatsii ez nem fog az én adatbázisba.
#raiting_star levezetni PHP hurok. Miért raiting_votes blokkok és raiting_hover által kezelt jQuery munka csak az első iteráció a hurok?
fel kézzel, szélessége CSS - munka- és jQuery valamilyen okból nem veszi?
Bár az oldal ruseller.com állandó php kódot, jQuery csillagok dolgozni, és még sok más, de a php oldalon nincs. Már csak nem csinál :(
Kérjük, adja hozzá a hol az összekötő elem az adatbázisban!
És mi értéket adunk hozzá összesített értékelés csak a kiválasztott minősítés?
EvgeniyStytsenkov
EvgeniyStytsenkov
Ui Andrew. Ha a cikkek jelennek meg a hurok ebben az üzemmódban értékelése script nem kapcsolódik ide, mert Ebben a módban nem szükséges
Nifiga nem úgy működik, ahogy kellene vrodevse készült csak 5-olvasni, vagy hülye vagyok, vagy valami baj van: (((
Szembesülnek azzal a problémával: a helyi szerveren, ez jól működik, de egy távoli szerveren csak az IE és a Chrome. Az Opera és a Firefox nem szántani az élet nekem. Igyekeztem azonosak ruseller - az egyik füge. Talán, ki tudja, mi a trükk?
zhenya_polyakov
// frissíteni az adatbázist (becslés és hozzáadjuk az egy személy) $ query = "UPDATE tartalom SET user_votes = '$ user_votez', user_num = (user_num + 1), ahol id_arc =" $ _ GET [ 'id_arc'] .; mysql_query ($ query); alvás (2); // vizsgálatra a helyi számítógépen echo "Köszönöm, hogy értékelést" $ _ GET [ "user_votes"] "a cikk №" $ _ GET [ "id_arc"]; ...? >> ALL! Az adatbázisba bevitt, és nem kell több asztal! Már csak az a kérdés, biztonság! Megtörni ilyen minősítés valószínűleg elemi :-( És podschetov rendszer azt írta nem nagyon helyes! És helyesen írni, ha a cikk már elterjedt, hogy befejezze vége előtt. Természetesen van arra ösztönzi, hogy vizsgálja meg, de ha azt akarta, hogy vagy olvasni olyan tárgyak általában ! és köszönöm a weboldalt, és a levont nagyon szórakoztató minden!
zhenya_polyakov
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!