gevecht met jquery selectmenu
http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
het moet het uitzicht van men select menu veranderen
maar ik krijg het gewoon niet aan de praat, snap ook niet helemaal wat ik aan het doen ben.
op die site staat dat ik enkel dit regeltje nodig heb
$('select').selectmenu();
maar ik krijg parse errors op dat stukje,
dit is een testpaginatje, met enkel een simpel select menu
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
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
<?
include('config.php');
include("./includes/egl_inc.php");
$secure = new secure();
$secure->secureGlobals();
$types=mysql_query("SELECT id,name FROM ffa_types");
while(list($id,$name)=mysql_fetch_row($types)){if ($id == $typeholder)
{
$typelist.="<option selected value='$id'>$name</option>\n";
}
else
{
$typelist.="<option value='$id'>$name</option>\n";
}}
$games=mysql_query("SELECT id,name FROM ffa_games");
while(list($id,$name)=mysql_fetch_row($games)){if ($id == $gameholder)
{
$gamelist.="<option selected value='$id'>$name</option>\n";
}
else
{
$gamelist.="<option value='$id'>$name</option>\n";
}
}
echo "<script src='./admincp/js/jquery-1.6.2.min.js'></script> <form action='ffagamerankings.php' method='post'>
<select id='gameselect' name='game'><option>Choose Game ...</option>$gamelist</select>
<select name='type'><option>Choose GameType ...</option>$typelist</select>
<input type='submit' value='Ranks' />
</form>";
$('#gameselect').selectmenu();
?>
include('config.php');
include("./includes/egl_inc.php");
$secure = new secure();
$secure->secureGlobals();
$types=mysql_query("SELECT id,name FROM ffa_types");
while(list($id,$name)=mysql_fetch_row($types)){if ($id == $typeholder)
{
$typelist.="<option selected value='$id'>$name</option>\n";
}
else
{
$typelist.="<option value='$id'>$name</option>\n";
}}
$games=mysql_query("SELECT id,name FROM ffa_games");
while(list($id,$name)=mysql_fetch_row($games)){if ($id == $gameholder)
{
$gamelist.="<option selected value='$id'>$name</option>\n";
}
else
{
$gamelist.="<option value='$id'>$name</option>\n";
}
}
echo "<script src='./admincp/js/jquery-1.6.2.min.js'></script> <form action='ffagamerankings.php' method='post'>
<select id='gameselect' name='game'><option>Choose Game ...</option>$gamelist</select>
<select name='type'><option>Choose GameType ...</option>$typelist</select>
<input type='submit' value='Ranks' />
</form>";
$('#gameselect').selectmenu();
?>
wie kan mij helpen?
bedankt
Volgens mij mis je nog de nodige bestanden.
Open het voorbeeld eens in een apart scherm (http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html) en kijk in de broncode.
nu weet ik zeker dat ik de link juist gemaakt heb
maar als ik dan het js net voor afsluiten vd body zet, print hij die statement gewoon op men scherm
http://www.acidleague.com/League/select.html <-testpagine
dit is de code
er zit nog een ander scriptje in dat het tweede select menu veranderd als je iets kiest in het eerste, dat werkt wel ...
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
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
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Select test</title>
<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" />
<link rel="Stylesheet" href="http://www.acidleague.com/League/admincp/js/jquery.ui.selectmenu.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.acidleague.com/League/admincp/js/jquery.ui.selectmenu.js"></script>
<style type="text/css">
/*demo styles*/
body {font-size: 62.5%; font-family:"Verdana",sans-serif; margin: 70px 10px;}
fieldset { border:0; margin-bottom: 40px;}
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }
/*select with custom icons*/
body a.customicons { height: 2.8em;}
body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
body .video .ui-selectmenu-item-icon { background: url(sample_icons/24-video-square.png) 0 0 no-repeat; }
body .podcast .ui-selectmenu-item-icon { background: url(sample_icons/24-podcast-square.png) 0 0 no-repeat; }
body .rss .ui-selectmenu-item-icon { background: url(sample_icons/24-rss-square.png) 0 0 no-repeat; }
</style>
<script type="text/javascript" src="http://www.acidleague.com/League/admincp/js/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function(){
var data = [
[
{optionValue: 0,optionDisplay: 'Mark'},
{optionValue: 1,optionDisplay: 'Andy'},
{optionValue: 2,optionDisplay: 'Richard'}
],
[
{optionValue: 10,optionDisplay: 'Remy'},
{optionValue: 11,optionDisplay: 'Arif'},
{optionValue: 12, optionDisplay: 'JC'}
],
[
{optionValue: 20,optionDisplay: 'Aidan'},
{optionValue: 21,optionDisplay: 'Russell'}
]
];
$("#ctlJob").change(function() {
var $persons = $("#ctlPerson").empty();
$.each(data[$(this).val() - 1], function() {
$persons.append("<option value=" + this.optionValue + ">" + this.optionDisplay + "</option>");
});
});
})
</script>
</head>
<body>
<form action="select_demo.php">
<label for="ctlJob">Job Function:</label>
<select name="id" id="ctlJob">
<option value="1">Managers</option>
<option value="2">Team Leaders</option>
<option value="3">Developers</option>
</select>
<noscript>
<input type="submit" name="action" value="Load Individuals" />
</noscript>
<label for="ctlPerson">Individual:</label>
<select name="person_id" id="ctlPerson">
<option value="1">Mark P</option>
<option value="2">Andy Y</option>
<option value="3">Richard B</option>
</select>
<input type="submit" name="action" value="Book" />
</form>
$('#ctlJob')selectmenu(); </body>
</html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Select test</title>
<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" />
<link rel="Stylesheet" href="http://www.acidleague.com/League/admincp/js/jquery.ui.selectmenu.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.acidleague.com/League/admincp/js/jquery.ui.selectmenu.js"></script>
<style type="text/css">
/*demo styles*/
body {font-size: 62.5%; font-family:"Verdana",sans-serif; margin: 70px 10px;}
fieldset { border:0; margin-bottom: 40px;}
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }
/*select with custom icons*/
body a.customicons { height: 2.8em;}
body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
body .video .ui-selectmenu-item-icon { background: url(sample_icons/24-video-square.png) 0 0 no-repeat; }
body .podcast .ui-selectmenu-item-icon { background: url(sample_icons/24-podcast-square.png) 0 0 no-repeat; }
body .rss .ui-selectmenu-item-icon { background: url(sample_icons/24-rss-square.png) 0 0 no-repeat; }
</style>
<script type="text/javascript" src="http://www.acidleague.com/League/admincp/js/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function(){
var data = [
[
{optionValue: 0,optionDisplay: 'Mark'},
{optionValue: 1,optionDisplay: 'Andy'},
{optionValue: 2,optionDisplay: 'Richard'}
],
[
{optionValue: 10,optionDisplay: 'Remy'},
{optionValue: 11,optionDisplay: 'Arif'},
{optionValue: 12, optionDisplay: 'JC'}
],
[
{optionValue: 20,optionDisplay: 'Aidan'},
{optionValue: 21,optionDisplay: 'Russell'}
]
];
$("#ctlJob").change(function() {
var $persons = $("#ctlPerson").empty();
$.each(data[$(this).val() - 1], function() {
$persons.append("<option value=" + this.optionValue + ">" + this.optionDisplay + "</option>");
});
});
})
</script>
</head>
<body>
<form action="select_demo.php">
<label for="ctlJob">Job Function:</label>
<select name="id" id="ctlJob">
<option value="1">Managers</option>
<option value="2">Team Leaders</option>
<option value="3">Developers</option>
</select>
<noscript>
<input type="submit" name="action" value="Load Individuals" />
</noscript>
<label for="ctlPerson">Individual:</label>
<select name="person_id" id="ctlPerson">
<option value="1">Mark P</option>
<option value="2">Andy Y</option>
<option value="3">Richard B</option>
</select>
<input type="submit" name="action" value="Book" />
</form>
$('#ctlJob')selectmenu(); </body>
</html>
wie kan helpen?
bedankt
Gewijzigd op 21/04/2012 18:28:48 door groovez acid
Groovez acid op 17/04/2012 23:11:32:
ik ben een copy paste php-er ... ik gebruik stukjes code die werken, en pas die aan naar mijn behoeften, zonder dat ik eigenlijk iets van de taal ken ...
Ga nou zelf eens op 'onderzoek' uit en ga wat leren ipv elke vraag hier neer te zetten.
Kijk eens in de broncode van de link die ik hierboven gaf en ontdek daarin hoe e.e.a. is opgebouwd. Wil met alle plezier helpen, maar je mag er, wat mij betreft, ook zelf wel wat (meer) moeite voor doen.
Het lijkt mij toch dat deze $('#ctlJob')selectmenu() tussen
Code (php)
1
<?php en ?>
Code (php)
1
2
3
4
5
2
3
4
5
<script type="text/javascript">
$(function(){
$('#ctlJob')selectmenu();
});
</script>
$(function(){
$('#ctlJob')selectmenu();
});
</script>