| Autor | Zpráva | ||
|---|---|---|---|
| holi Profil |
Zdravím,
mám stránku kde obsah mění pomocí ajaxu, vytvořil jsem si metodu, kterou mohu umístit na jakýkoliv element, a po provedení zvolené události na elementu sjede z horní části obrazovky panel, ve kterém jsou operační tlačítka, které se navolili v parametru této metody, bohužel když přejdu na jinou část webu z té kde volám na daný elementu tuto metodu a vrátím se zpět, tato metoda se přiřadí k elementu znovu. Takže po zvolené události se tam všechny tlačítka zobrazí dvakrát(nebo podle toho kolikrát danou část webu navštívíte). Prozatím jsem to dle mě vyřešil prasácky, ale věřím, že existuje nějaké čistější řešení. Bohužel nemohu dát živou ukázku z technických důvodů. Metoda:
<script type="text/javascript">
/* Vytvoření metody actionBar na jakýkoliv element */
jQuery.fn.actionBar = function(events, actionButtons){
console.dir("Byl vytvo\u0159en actionBar!");
console.dir(this);
// var thisElement = this;
$(this).live(events, function(){
console.dir("actionBar byl vyvolán !");
if($('#actionBar').css("top") == "-40px"){
$('#actionBar').animate({top: "0px"});
$.each(actionButtons, function(index, value){
if($('#actionBar *[action="' + index + '"]').length == 0){
$('#actionBar').append('<span action="' + index + '" ></span>');
$.each(value, function(index2, value2){
switch(index2){
case "title":
$('#actionBar :last-child').attr("title", value2);
break;
case "image":
$('#actionBar :last-child').css({background: "url('" + value2 + "') no-repeat left center"});
break;
case "showLabel":
if(value2 == true){
$('#actionBar :last-child').text(index);
$('#actionBar :last-child').css({paddingLeft: "32px"});
}
break;
case "id":
$('#actionBar :last-child').attr("id", value2);
break;
case "buttonClass":
$('#actionBar :last-child').attr("class", value2);
break;
}
});
}
});
$(document).delegate("#actionBar span", 'click', function(event){
$(this).parent('form').reset();
$("#actionBar span+span").remove();
if($("#actionBar").css("top") == "0px"){
$("#actionBar").animate({top: "-40px"});
}
});
}
});
}
</script> |
||
| joe Profil |
#2 · Zasláno: 27. 1. 2013, 19:23:53
1. Je dobrým zvykem se při vytváření pluginů držet praktik jQuery, nikde nemáš ve funkci
return, takže nemůžeš používat fluent interface (objekt.css("color", "red").data("state", "ok").hide();)
2. Ve funkci jQuery.fn.actionBar je this už jQuery objekt, je tedy k ničemu dělat z jQuery objektu další jQuery objekt.
Pokud chceš zamezit vytváření, můžeš si ukládat stav k jednotlivým elementům v kolekci: jQuery.fn.actionBar = function(events, actionButtons) {
return.this.each(function () {
var item = $(this);
if (item.data("initialized") === true) {
return true; // continue
}
item.data("initialized", true);
// další kód
});
} |
||
| holi Profil |
#3 · Zasláno: 27. 1. 2013, 19:45:34
No, chvíli jsem hledal nějaký slušný navod jak vytvářet metody pro jQuery, ale většinou to byly různé dotazy na fórech atd, a k tomuto jsem se nedohledal, takže děkuji to stím returnem napravím. Ještě mě zajímá co přesně myslíte tím objektem. Myslíte hned to první odposlouchávání údálosti $(this).live(... ?
|
||
| holi Profil |
holi:
„Bohužel, tak jsem to vyzkoušel. Na jedné stránce to funguje tak jak jsem chtěl, bohužel když actionBar vyvolám na sice stejném elementu ale jiné stránce(dynamicky přeloadované) znovu tak se actionBar už neoběví.“ Omlouvám se a beru zpět, nastavil jsem blbě selector, nyní funguje vše jak má. Děkuji za odpověď a poučky. Nashle :) |
||
|
Časová prodleva: 11 let
|
|||
0