jQuery zusammenfassen?
Eingetragen von stixer2 (113)am 25.11.2015 - 16:48 Uhr in
Hi.
Ich habe MiniPanels, die ich per jQuery sliden lasse. Der code sieht so aus:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#me').click(function(){
var hidden = jQuery('#mini-panel-overlay_right');
if (hidden.hasClass('visible')){
hidden.animate({"right":"-77%"}, "slow").removeClass('visible');
} else {
hidden.animate({"right":"0"}, "slow").addClass('visible');
}
});
jQuery('#close-right').click(function(){
var hidden = jQuery('#mini-panel-overlay_right');
if (hidden.hasClass('visible')){
hidden.animate({"right":"-77%"}, "slow").removeClass('visible');
} else {
hidden.animate({"right":"0"}, "slow").addClass('visible');
}
});
jQuery('#projekte').click(function(){
var hidden = jQuery('#mini-panel-overlay_left');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-22%"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0"}, "slow").addClass('visible');
}
});
jQuery('#close-left').click(function(){
var hidden = jQuery('#mini-panel-overlay_left');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-22%"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0"}, "slow").addClass('visible');
}
});
});
</script>Meine Frage an die Experten: Kann man den code noch besser zusammenfassen, oder wäre das ok so?
Ich arbeite mich gerade ein bisschen in jQuery ein, und bin noch nicht so firm darin…
Danke und Grüße!
Edit: Die Links #close-right und #close-left erscheinen eigentlich nicht, wenn die Panels außerhalb der Seite sind. Im Prinzip müsste #me nur das Panel ausfahren und #close-right wieder rausfahren (für das rechte Panel). Deswegen ist das sicher zu viel code, aber so funktioniert es wenigstens. Für Anregungen bin ich sehr dankbar.
- Anmelden oder Registrieren um Kommentare zu schreiben
Hallo, auch wenn es
am 26.11.2015 - 11:36 Uhr
Hallo,
auch wenn es funktioniert solltest Du Dich besser an die Konventionen halten.
Schau mal hier, wie JQuery in Drupal 7 verwendet werden sollte: https://www.drupal.org/node/756722
1. Um Namespace Konflikte mit anderen Bibliotheken zu vermeiden und um das $ zu nutzen:
(function ($) {// All your code here
})(jQuery);
2. Man definiert behaviors(Verhalten) in Drupal 7:
(function ($) {Drupal.behaviors.exampleModule = {
attach: function (context, settings) {
$('.example', context).click(function () {
$(this).next('ul').toggle('show');
});
}
};
})(jQuery);
Grüsse
Robert
Verstehe… habe den code
am 27.11.2015 - 10:23 Uhr
Verstehe… habe den code angepasst. So wäre das ok?
<script type="text/javascript">
(function ($) {
$('#me').click(function(){
var hidden = $('#mini-panel-overlay_right');
if (hidden.hasClass('visible')){
hidden.animate({"right":"-77%"}, "fast").removeClass('visible');
} else {
hidden.animate({"right":"0"}, "fast").addClass('visible');
}
});
$('#close-right').click(function(){
var hidden = $('#mini-panel-overlay_right');
if (hidden.hasClass('visible')){
hidden.animate({"right":"-77%"}, "fast").removeClass('visible');
} else {
hidden.animate({"right":"0"}, "fast").addClass('visible');
}
});
$('#projekte').click(function(){
var hidden = $('#mini-panel-overlay_left');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-22%"}, "fast").removeClass('visible');
} else {
hidden.animate({"left":"0"}, "fast").addClass('visible');
}
});
$('#close-left').click(function(){
var hidden = $('#mini-panel-overlay_left');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-22%"}, "fast").removeClass('visible');
} else {
hidden.animate({"left":"0"}, "fast").addClass('visible');
}
});
})(jQuery);
</script>
besten Dank!