gevecht met jquery selectmenu

Door groovez acid op 21-04-2012 07:22

2.189 views

ik heb op deze site het volgende scriptje gevonden
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

<?
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

Obelix Idefix

21-04-2012 09:39

Ik zou zelf het aanroepen van javascript of in de header zetten of helemaal onderaan, maar niet midden in een script.

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.

Reshad F

21-04-2012 09:47

Ten eerste ben ik het met obelix eens, je kan het beste onferin net voor het afsluiten van de body taag je javascript neerzetten. Ten tweede maak je wel connectie met de jquery ui library?

groovez acid

21-04-2012 18:27 gewijzigd op 21-04-2012 18:28

ben overnieuw begonnen,
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 ...

<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

Obelix Idefix

21-04-2012 18:38

Wat had je dan verwacht als je $('#ctlJob')selectmenu(); in een stuk html zet?

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.

Frank WD

21-04-2012 18:39

Om te beginnen zie ik 1 foutje zo al staan.

Het lijkt mij toch dat deze $('#ctlJob')selectmenu() tussen <?php en ?> moet staan minimaal al.

Nick Dijkstra

21-04-2012 21:41

Het is javascript. Dus:


<script type="text/javascript">
$(function(){
	$('#ctlJob')selectmenu();
});
</script>

Reageren

Inloggen om te reageren