[jQuery] Newbie: Convert onload scripts to plugin
Hi there
please excuse my non-perfect english, i'm german speaking ;)
i am new to jQuery (and to this group) and have a problem:
i created a small website with a main- and a submenu. these are text-
links.
when i click on a main-menu-item, there are the following actions
executed:
- empty mainmenu-container
- load mainmenu to get the right item marked as active (post-request)
- empty submenu-container
- load submenu (post-request)
- change the color of some items of the site
- empty content-container
- load matching content (post-request)
now is my problem, that after doing all these things, the menu doesn't
work anymore, because the jquery script is defined only on ready()
how can i transform this actions to a plugin (would be the best way,
isn't it?) which i can use on clicking the menu-item?
here is my script:
HTML:
=====
<div id="mainMenuContainer">
<div class="mainMenuText" id="mainMenu_home">
<a class="menu active" href="?id=1" name="1">home</a>
</div>
<div class="mainMenuText" id="mainMenu_training">
<a href="?id=2" class="menu" name="2">something</a>
</div>
<div class="mainMenuText" id="mainMenu_kunden">
<a href="?id=3" class="menu" name="3">something</a>
</div>
<div class="mainMenuText" id="mainMenu_profil">
<a href="?id=4" class="menu" name="4">something</a>
</div>
<div class="mainMenuText" id="mainMenu_kontakte">
<a href="?id=5" class="menu" name="5">something</a>
</div>
</div>
jQUERY:
=======
$(document).ready(function()
{
// click mainMenu
$(".mainMenuText a").click(function(event){
event.preventDefault();
var mainMenuId = $(this).attr("name");
//show mainMenu
//empty first
$("#mainMenuContainer").html("");
//send request to php (getmainMenu)
$.post("interface/requests/getMainMenuText.php", {id:
mainMenuId}, function(data) {
$("#mainMenuContainer").html(data);
});
//show subMenu
//empty first
$("#subMenuContainer").html("");
//send request to php (getSubMenu)
$.post("interface/requests/getSubMenuText.php", {id:
mainMenuId}, function(data) {
$("#subMenuContainer").html(data);
});
//change color and corner
$.post("interface/requests/getColor.php", {id:
mainMenuId}, function(data) {
$(".line").css("background-color", data);
$("#cornerTopRight").css("background-image", "url
('interface/images/corner/"+mainMenuId+".jpg')");
$(".droppable-hover").css("border", "1px solid
"+data);
$(".menu:hover").css("color", data);
$(".active").css("color", data);
});
//show shortContent
$("#fullContent").hide(1);
$("#toggleDiv").show('slow');
//send request to php (get content)
$.post("interface/requests/getContent.php", {id:
mainMenuId}, function(xml) {
$("#shortContentText").html($("shortText", xml).text
());
$("#fullContentText").html($("fullText", xml).text());
});
});
});
thanks for your help!
simon from switzerland