jQuery panelet for å vise informasjon om cookies

1. EU Cookie Law
er EUs e-direktivet om personvern og definerer at du må få de besøkende informert samtykke før du plasserer en informasjonskapsel på maskinen sin.

Denne veiledningen vil vise deg hvordan å implementere en tilpasset løsning på nettsiden din.
2. Først vil vi definere en melding som vil bli vist til brukerne og legge til "jeg godtar" -knappen som vil skjule meldingen . for alltid
Plasser koden etter < body > tag
. < div id = "melding" >
Cookies hjelper oss å levere våre tjenester. Ved å bruke våre tjenester, samtykker du til vår bruk av informasjonskapsler.
< knappen class = "knapper" onclick = "hideForever ();" > Jeg er enig < /knapp >
< /div >
Selvfølgelig kan du endre meldingen til suite . dine behov
3. bruk CSS
å style meldingen
Det er viktig at du bruker skjerm. none
, slik at meldingen vil i utgangspunktet være skjult.
4. på bildet kan du se et eksempel på meldingen som senere vil bli vist i demoen.
5. I dokumentet angir referanse til CSS-filen du bruker
. < link rel = "stylesheet" href = "cookies.css" >

Vi vil også bruke noen javascript
. < script src = "http://code.jquery.com/jquery-latest.js" > < /script >
< script src = "js /jquery.cookie. js "> < /script >
< script src =" js /cookies.js "> < /script >
jQuery
vil bli brukt til å vise, skjule og skyv panelet.
Vi vil bruke jquery.cookie
å manipulere med cookies.
i cookies.js
vi vil skrive vår egen kode som er beskrevet nedenfor.
6. nå åpner filen cookies.js
.
$ (document) .ready
utføres når siden er lastet .
Hvis brukeren har ennå ikke bekreftet bruk av informasjonskapsler, vil vi vise en vårt budskap med ett sekunds forsinkelse. product: $ (document) .ready (function () {
hvis ($ .cookie ( 'cookies_enable')) {
$ ( "# meldingen") css ( "display:", "ingen");.
} else {
$ ( '# meldingen') .delay (1000) .slideDown (500);
}
});
7. nå har vi også legge til noen nyttige funksjoner under
//å. skjule budskapet, men viser det igjen på side reload
funksjon hideMessage () {
$ ( '# meldingen') forsinkelse () slideUp (500),..
}
//Hvis du vil skjule skjule meldingen og sette cookie så når siden lastes på nytt meldingen vises ikke
funksjon hideForever () {
$ ( '# meldingen') forsinkelse () slideUp (500),..
$ .cookie ( 'cookies_enable', 'foo', {utløper: 180});
}
//Valgfri funksjon for å vise meldinga manuelt på demoen side
funksjon showMessage () {
$ ( '# meldingen') forsinkelse () slideDown (500),..
}
//Slett informasjonskapsler
funksjon deleteCookie () {
$ .removeCookie ( 'cookies_enable');
}
8. Du kan nå bruke dette fungerer i onClick hendelsen
å kontrollere melding panel fra din nettside
< knappen onClick = "showMessage ();" class = "knapper" > Vis cookie melding < /knapp >
< knappen onClick = "hideMessage ();" class = "knapper" > Hide cookie melding < /knapp >
< knappen onClick = "deleteCookie ();" class = "knapper" > Slett bekreftelse cookie < /knapp >.

9. Resultatet skal nå ligne på bildet til venstre

Du kan selvfølgelig bruke CSS for å sette stilen på tekst og knapper.
10. Vi vil nå bruke hvis setningen
i script for å sjekke om brukeren har bekreftet bruken av cookies ved å sjekke om det er en informasjonskapsel med navnet cookies_enable stede
. < script type = "text /javascript" >
if ($ .cookie ( 'cookies_enable')) {Twitter //code
}
< /script >
Nedenfor er et eksempel for å aktivere Google Analytics
. < script type = "text /javascript" >
if ($ .cookie ( 'cookies_enable')) {
var _gaq = _gaq || [];
_gaq.push ([ '_ SetAccount', 'UA-123456-78']);
_gaq.push ([ '_ track']); product: (function () {
Var GA = document.createElement ( 'script'); ga.type = 'text /javascript "; ga.async = true;
ga.src = (' http: '== document.location.protocol ? 'http: //ssl': 'http: //www') + '.google-analytics.com /ga.js';
Var s = document.getElementsByTagName ( 'script') [0]; s .parentNode.insertBefore (ga, s);
}) ();
} //slutt: hvis cookie
< /script >
11. for å se hvordan det endelige resultatet ser ut sjekk vår demoside.
Og hele kildekoden fra denne opplæringen kan bli funnet på linken sOURCE cODE
Hvis du har problemer eller spørsmål om denne opplæringen bare spør på forumet, og vi vil gjøre vårt beste for å hjelpe deg.
<