vex script
ik heb een script genaamd vex gevonden om een mooi loginscherm te vertonen, nu zou ik dit willen verwerken dat dit scherm op al mijn uitgelogde pagina's kan verschijnen.
Dit opent zich automatisch bij het laden van de pagina, nu was mijn bedoeling om dit pas te laten verschijnen als ik op een knop klik.
Het script:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
vex.dialog.open({
message: 'Enter your username and password:',
input: "<input name=\"username\" type=\"text\" placeholder=\"Username\" required />\n<input name=\"password\" type=\"password\" placeholder=\"Password\" required />",
buttons: [
$.extend({}, vex.dialog.buttons.YES, {
text: 'Login'
}), $.extend({}, vex.dialog.buttons.NO, {
text: 'Back'
})
],
callback: function(data) {
if (data === false) {
return console.log('Cancelled');
}
return console.log('Username', data.username, 'Password', data.password);
}
});
</script>
vex.dialog.open({
message: 'Enter your username and password:',
input: "<input name=\"username\" type=\"text\" placeholder=\"Username\" required />\n<input name=\"password\" type=\"password\" placeholder=\"Password\" required />",
buttons: [
$.extend({}, vex.dialog.buttons.YES, {
text: 'Login'
}), $.extend({}, vex.dialog.buttons.NO, {
text: 'Back'
})
],
callback: function(data) {
if (data === false) {
return console.log('Cancelled');
}
return console.log('Username', data.username, 'Password', data.password);
}
});
</script>
met bijgevoegde bestanden in de header:
Code (php)
1
2
3
4
5
2
3
4
5
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="vex.combined.min.js"></script>
<script>vex.defaultOptions.className = 'vex-theme-os';</script>
<link rel="stylesheet" href="vex.css" />
<link rel="stylesheet" href="vex-theme-os.css" />
<script src="vex.combined.min.js"></script>
<script>vex.defaultOptions.className = 'vex-theme-os';</script>
<link rel="stylesheet" href="vex.css" />
<link rel="stylesheet" href="vex-theme-os.css" />
Ook is mijn vraag hoe ik na het invullen van dit script de variabelen kan doorsturen naar een andere pagina waar deze in php verwerkt worden.
Ik heb nu door hoe ik het met een link kan laten werken, maar kan dit ook met een area, namelijk volgend area:
Code (php)
1
2
3
2
3
<map name="Map4">
<area shape="rect" coords="14,4,109,24" href="login.php">
</map>
<area shape="rect" coords="14,4,109,24" href="login.php">
</map>
Het is me gelukt met een functie om het te laten openen als er op die area geklikt word, nu nog de variabelen kunnen verzenden naar een bestand als post argument
Gewijzigd op 03/11/2013 15:01:20 door Kristof Hendrickx
Laat me die even uit mekaar halen.
Jij doet dat trouwens ook beter.
Als je drie problemen tegelijk hebt, weet je niet welk van de drie zorgt voor het probleem; dan kan je ook moeilijk inschatten of je we "goed bezig" bent.
Kristof Hendrickx op 03/11/2013 13:59:36:
... Dit opent zich automatisch bij het laden van de pagina, nu was mijn bedoeling om dit pas te laten verschijnen als ik op een knop klik. ...
Code (script)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<input type="button" value="KLIK" id="mijn_knop">
<script>
$(document).ready(function() { // wordt uitgevoerd wanneer de pagina geladen is
$('#mijn_knop').click(function(e) { // wordt uitgevoerd wanneer de gebruiker op de knop drukt
// nu zal dit pas uitgevoerd worden nadat de gebruiker op een knop heeft gedrukt
vex.dialog.open({
...
});
});
})
</script>
<script>
$(document).ready(function() { // wordt uitgevoerd wanneer de pagina geladen is
$('#mijn_knop').click(function(e) { // wordt uitgevoerd wanneer de gebruiker op de knop drukt
// nu zal dit pas uitgevoerd worden nadat de gebruiker op een knop heeft gedrukt
vex.dialog.open({
...
});
});
})
</script>
-------------------------------
Kristof Hendrickx op 03/11/2013 13:59:36:
Ook is mijn vraag hoe ik na het invullen van dit script de variabelen kan doorsturen naar een andere pagina waar deze in php verwerkt worden.
Die vraag is een beetje ongelukkig gesteld; maar ja ...
Javascript kan inderdaad gegevens sturen naar een server, zonder dat de gebruiker daar iets van merkt (tenzijn hij er iets van kent).
Als je een voorbeeld wil zien, kijk even hier naar iets wat ik net geschreven heb voor een ander topic.
http://www.phphulp.nl/php/forum/topic/mysqlquery-bij-versturen-bericht-en-melding/92752/#664754
Denk er aan: javascript werkt op de webbrowser. Als de gebruiker de pagina ververste, is alle javascript weg, en begint alles opnieuw.
Herformuleer jouw vraag eens.
- Wat ziet de gebruiker op pagina 1?
- Wat wil je doorsturen naar de server?
- Wat ben je van plan met die gegevens?
- Wat is pagina 2? op welke manier is pagina 2 afhankelijk van gegevens van pagina 1?
-------------------------------
Kristof Hendrickx op 03/11/2013 13:59:36:
... maar kan dit ook met een area ...
Wat ben je precies van plan?
Hier een voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<img src="http://www.w3schools.com/tags/planets.gif" usemap="#Map4">
<map name="Map4" id="mijn_map">
<area shape="rect" coords="14,4,109,24" href="login.php" data-action="Login">
</map>
<script>
$(document).ready(function() {
$('area').on('click', function(e) {
e.preventDefault(); // dit zorgt er voor dat de pagina niet wordt verlaten
alert('Er is op: "' + $(this).data('action') + '" geklikt');
});
})
</script>
<map name="Map4" id="mijn_map">
<area shape="rect" coords="14,4,109,24" href="login.php" data-action="Login">
</map>
<script>
$(document).ready(function() {
$('area').on('click', function(e) {
e.preventDefault(); // dit zorgt er voor dat de pagina niet wordt verlaten
alert('Er is op: "' + $(this).data('action') + '" geklikt');
});
})
</script>
Dus ja... je kan gewoon selecteren op $('area') .
Gewijzigd op 04/11/2013 14:06:00 door Kris Peeters