Forum : WindowManager Code repetitif

Salut tout le monde,

J'aurais besoin de votre aide.
J'ai un code qui se ressemble trop et je voudrais pouvoir faire un code moins long a ecrire et plus facilement comprehensible.
CODE JQUERY

$(function() { var windowManager = document.getElementsByClassName('window'); var icone = document.getElementsByClassName('icone'); var close = document.getElementsByClassName('close'); var maximize = document.getElementsByClassName('maximize'); var minimize = document.getElementsByClassName('minimize'); var menuButton = document.getElementsByClassName('menubtn'); $(windowManager).draggable(); $(windowManager).hide(); $(icone).draggable(); $(windowManager).each(function(index){ $(windowManager[index]).on("click", function(e){ $(windowManager).css({"z-index": "10"}); $(e.currentTarget).stop().css({"z-index": "20"}); }); }); /* Permet d'ouvrir les fenetres grace au icone */ $(icone).each(function(index){ $(icone[index]).on("dblclick", function(e){ var idButtonBar = e.currentTarget.nextElementSibling.className.split("window-")[1].split(" ")[0]; $(e.currentTarget.nextElementSibling) .show() .css({"z-index": 10}) .removeClass("hide"); $( "#"+idButtonBar).addClass("open"); }) }); /* Permet d'ouvrir une fenetre grace au menu en bas */ $(menuButton).each(function(index){ $(menuButton[index]).on('click', function(e){ var id = e.currentTarget.attributes[0].nodeValue; var window = document.getElementsByClassName("window window-"+id); $(window) .show() .css({"z-index": 10}) .removeClass("hide"); $( "#"+id).removeClass("reduce"); $( "#"+id).addClass("open"); }) }); /* Permet de reduire une fenetre */ $(minimize).each(function(index){ $(minimize[index]).on("click", function(e){ var idButtonBar = e.currentTarget.offsetParent.className.split("window-")[1].split(" ")[0]; $(e.target.offsetParent).hide().css({"z-index": 10,}); $( "#"+idButtonBar).addClass("reduce"); }); }); /* Permet d'agrandir une fenetre */ $(maximize).each(function(index){ $(maximize[index]).on("click", function(e){ var clicks = $(this).data('clicks'); if (clicks == true || typeof clicks === 'undefined') { clicks = true; $(e.target.offsetParent).addClass("agrandir"); } else { clicks = false; $(e.target.offsetParent).removeClass("agrandir"); } $(this).data("clicks", !clicks); }); }); /* Permet de fermer les fenetre */ $(close).each(function(index){ $(close[index]).on("click", function(e){ var window = $(e.target.offsetParent); var idButtonBar = window[0].className.split("window-")[1].split(" ")[0]; window.stop().css("z-index", 1).addClass("hide").hide(); $( "#"+idButtonBar).removeClass("open"); $( "#"+idButtonBar).removeClass("reduce"); }) }); });

CODE HTML

<div class="icone icone-portfolio"> <img src="http://www.gegf.eu/wp-content/uploads/2011/12/para-icone.png" alt=""> <h4>Portfolio</h4> </div> <div class="window window-portfolio" style="margin-top:50px; margin-left:50px;"> <div class="box box-portfolio"> <header class="title" unselectable="on"> <h1 unselectable="on">Mon Portfolio</h1> <div class="button-group"> <button class="minimize"> </button> <button class="maximize"> </button> <button class="close"> </button> </div> </header> <section class="content"> <div class="bloc12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptas corrupti atque quisquam debitis placeat aliquid dignissimos, recusandae aperiam magnam nulla ipsam porro totam fugiat reprehenderit aliquam quis similique ullam. </div> </section> </div> </div>

WindowManager Code repetitif

2 réponses