ajax-paginas-bookmarken
Gesponsorde koppelingen
PHP script bestanden
navigatie.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
//////////////////////////////////////////////////////
//navigatie.js - copyleft Emmanuel Delay 2009 - [email protected]
//
// Thanks to:
// * Fixing the Back Button and Enabling Bookmarking for AJAX Apps http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
// * timer.js: http://www.codingforums.com/archive/index.php/t-10531.html
//
// gebruik:
// * zorg dat je navigatie.js en timer.js op hebt en laadt.
// * maak het navigatie object aan (bv. var m_navig). Je geeft een callback mee met de constructor. Dat is de functie waarmee je je ajax request regelt. In die functie kan je m_navig.vars aanspreken.
// * Maak het object actief, bv. met <body onload="m_navig.init()">
// * that's it.
//
// voorbeeld van gebruik:
// index.php
/*
<html>
<head>
<script src="timer.js" language="javascript" type="text/javascript"></script>
<script src="ajax.js" language="javascript" type="text/javascript"></script>
<script src="navigatie.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
var m_navig = new navigatie(ajaxActie);
function ajaxActie()
{
action = m_navig.getVarValue('action');
switch(action)
{
case 'get_profiel':
var lid = m_navig.getVarValue('lid');
if ( lid != false )
get_profiel( Number(lid) );
break;
}
}
function get_profiel(lid)
{
// hier zou je dus een ajax request aanroepen
// van daar ook ajax.js. Dit hoor je zelf te regelen
// om toch maar iets te tonen ...
document.getElementById("profiel").innerHTML = 'Hier zou dus het profiel van '+ lid +' komen';
}
</script>
<title>Voorbeeld van Ajax navigatie</title>
</head>
<body onload="m_navig.init()">
<div>
<a href="#action=get_profiel&lid=5" onClick="get_profiel(5);" >Profiel van Mevr. 5 </a>
</div>
<div>
<a href="#action=get_profiel&lid=8" onClick="get_profiel(8);" >Profiel van Mr. 8 </a>
</div>
<div id="profiel"></div>
</body>
</html>
*/
///////////////////////////////////////////////////////////
// constructor
function navigatie(actieCallBack)
{
this.timerInterval = 200;
this.actieCallBack = actieCallBack;
this.idle = true;
this.vars = null;
this.timer = new Timer(this);
}
// voer deze methode uit bv. bij body="onload"
navigatie.prototype.init = function ()
{
this.idle = false;
this.urlVeranderd(0);
}
navigatie.prototype.go = function ()
{
if (this.idle == true)
this.init();
var url = this.getUrl();
this.vars = this.getVars(url);
this.actieCallBack();
}
navigatie.prototype.getVarValue = function (key)
{
for (var i=0; i< this.vars.length; i++)
{
if (this.vars[i][0] == key)
return this.vars[i][1];
}
return false;
}
navigatie.prototype.getUrl = function ()
{
var url = String(window.location);
return this.getHash(url);
}
navigatie.prototype.getVars = function (url)
{
var a = url.split("&");
var result = Array();
for (var i=0; i< a.length; i++)
{
var b = a[i].split("=");
if ( b[1] == null)
break;
result[i] = b;
}
return result;
}
navigatie.prototype.getHash = function(url)
{
var temp = new Array();
temp = url.split("#");
if (temp.length > 1)
return temp[1];
else
return '';
}
navigatie.prototype.urlVeranderd = function(location)
{
// om de zoveel tijd peil je of de url veranderd is.
if( this.getUrl() != location)
{
this.go();
}
this.timer.setTimeout("urlVeranderd", this.timerInterval, this.getUrl() );
}
///////////
// timer.js (niet van mijn hand, zeer handig)
/*
Timer by Algorithm
http://www.codingforums.com/archive/index.php/t-10531.html
*/
function Timer(){
this.obj = (arguments.length)?arguments[0]:window;
return this;
}
// The set functions should be called with:
// - The name of the object method (as a string) (required)
// - The millisecond delay (required)
// - Any number of extra arguments, which will all be
// passed to the method when it is evaluated.
Timer.prototype.setInterval = function(func, msec){
var i = Timer.getNew();
var t = Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setInterval(t,msec);
return i;
}
Timer.prototype.setTimeout = function(func, msec){
var i = Timer.getNew();
Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setTimeout("Timer.callOnce("+i+");",msec);
return i;
}
// The clear functions should be called with
// the return value from the equivalent set function.
Timer.prototype.clearInterval = function(i){
if(!Timer.set[i]) return;
window.clearInterval(Timer.set[i].timer);
Timer.set[i] = null;
}
Timer.prototype.clearTimeout = function(i){
if(!Timer.set[i]) return;
window.clearTimeout(Timer.set[i].timer);
Timer.set[i] = null;
}
// Private data
Timer.set = new Array();
Timer.buildCall = function(obj, i, args){
var t = "";
Timer.set[i] = new Array();
if(obj != window){
Timer.set[i].obj = obj;
t = "Timer.set["+i+"].obj.";
}
t += args[0]+"(";
if(args.length > 2){
Timer.set[i][0] = args[2];
t += "Timer.set["+i+"][0]";
for(var j=1; (j+2)<args.length; j++){
Timer.set[i][j] = args[j+2];
t += ", Timer.set["+i+"]["+j+"]";
}
}
t += ");";
Timer.set[i].call = t;
return t;
}
Timer.callOnce = function(i){
if(!Timer.set[i]) return;
eval(Timer.set[i].call);
Timer.set[i] = null;
}
Timer.getNew = function(){
var i = 0;
while(Timer.set[i]) i++;
return i;
}
//navigatie.js - copyleft Emmanuel Delay 2009 - [email protected]
//
// Thanks to:
// * Fixing the Back Button and Enabling Bookmarking for AJAX Apps http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
// * timer.js: http://www.codingforums.com/archive/index.php/t-10531.html
//
// gebruik:
// * zorg dat je navigatie.js en timer.js op hebt en laadt.
// * maak het navigatie object aan (bv. var m_navig). Je geeft een callback mee met de constructor. Dat is de functie waarmee je je ajax request regelt. In die functie kan je m_navig.vars aanspreken.
// * Maak het object actief, bv. met <body onload="m_navig.init()">
// * that's it.
//
// voorbeeld van gebruik:
// index.php
/*
<html>
<head>
<script src="timer.js" language="javascript" type="text/javascript"></script>
<script src="ajax.js" language="javascript" type="text/javascript"></script>
<script src="navigatie.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
var m_navig = new navigatie(ajaxActie);
function ajaxActie()
{
action = m_navig.getVarValue('action');
switch(action)
{
case 'get_profiel':
var lid = m_navig.getVarValue('lid');
if ( lid != false )
get_profiel( Number(lid) );
break;
}
}
function get_profiel(lid)
{
// hier zou je dus een ajax request aanroepen
// van daar ook ajax.js. Dit hoor je zelf te regelen
// om toch maar iets te tonen ...
document.getElementById("profiel").innerHTML = 'Hier zou dus het profiel van '+ lid +' komen';
}
</script>
<title>Voorbeeld van Ajax navigatie</title>
</head>
<body onload="m_navig.init()">
<div>
<a href="#action=get_profiel&lid=5" onClick="get_profiel(5);" >Profiel van Mevr. 5 </a>
</div>
<div>
<a href="#action=get_profiel&lid=8" onClick="get_profiel(8);" >Profiel van Mr. 8 </a>
</div>
<div id="profiel"></div>
</body>
</html>
*/
///////////////////////////////////////////////////////////
// constructor
function navigatie(actieCallBack)
{
this.timerInterval = 200;
this.actieCallBack = actieCallBack;
this.idle = true;
this.vars = null;
this.timer = new Timer(this);
}
// voer deze methode uit bv. bij body="onload"
navigatie.prototype.init = function ()
{
this.idle = false;
this.urlVeranderd(0);
}
navigatie.prototype.go = function ()
{
if (this.idle == true)
this.init();
var url = this.getUrl();
this.vars = this.getVars(url);
this.actieCallBack();
}
navigatie.prototype.getVarValue = function (key)
{
for (var i=0; i< this.vars.length; i++)
{
if (this.vars[i][0] == key)
return this.vars[i][1];
}
return false;
}
navigatie.prototype.getUrl = function ()
{
var url = String(window.location);
return this.getHash(url);
}
navigatie.prototype.getVars = function (url)
{
var a = url.split("&");
var result = Array();
for (var i=0; i< a.length; i++)
{
var b = a[i].split("=");
if ( b[1] == null)
break;
result[i] = b;
}
return result;
}
navigatie.prototype.getHash = function(url)
{
var temp = new Array();
temp = url.split("#");
if (temp.length > 1)
return temp[1];
else
return '';
}
navigatie.prototype.urlVeranderd = function(location)
{
// om de zoveel tijd peil je of de url veranderd is.
if( this.getUrl() != location)
{
this.go();
}
this.timer.setTimeout("urlVeranderd", this.timerInterval, this.getUrl() );
}
///////////
// timer.js (niet van mijn hand, zeer handig)
/*
Timer by Algorithm
http://www.codingforums.com/archive/index.php/t-10531.html
*/
function Timer(){
this.obj = (arguments.length)?arguments[0]:window;
return this;
}
// The set functions should be called with:
// - The name of the object method (as a string) (required)
// - The millisecond delay (required)
// - Any number of extra arguments, which will all be
// passed to the method when it is evaluated.
Timer.prototype.setInterval = function(func, msec){
var i = Timer.getNew();
var t = Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setInterval(t,msec);
return i;
}
Timer.prototype.setTimeout = function(func, msec){
var i = Timer.getNew();
Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setTimeout("Timer.callOnce("+i+");",msec);
return i;
}
// The clear functions should be called with
// the return value from the equivalent set function.
Timer.prototype.clearInterval = function(i){
if(!Timer.set[i]) return;
window.clearInterval(Timer.set[i].timer);
Timer.set[i] = null;
}
Timer.prototype.clearTimeout = function(i){
if(!Timer.set[i]) return;
window.clearTimeout(Timer.set[i].timer);
Timer.set[i] = null;
}
// Private data
Timer.set = new Array();
Timer.buildCall = function(obj, i, args){
var t = "";
Timer.set[i] = new Array();
if(obj != window){
Timer.set[i].obj = obj;
t = "Timer.set["+i+"].obj.";
}
t += args[0]+"(";
if(args.length > 2){
Timer.set[i][0] = args[2];
t += "Timer.set["+i+"][0]";
for(var j=1; (j+2)<args.length; j++){
Timer.set[i][j] = args[j+2];
t += ", Timer.set["+i+"]["+j+"]";
}
}
t += ");";
Timer.set[i].call = t;
return t;
}
Timer.callOnce = function(i){
if(!Timer.set[i]) return;
eval(Timer.set[i].call);
Timer.set[i] = null;
}
Timer.getNew = function(){
var i = 0;
while(Timer.set[i]) i++;
return i;
}