Autor Zpráva
Radim24
Profil
Ahoj,
poradil by jste mi někdo jak vytvořit úplně nejzákladnější objekt v Jquery? Prošel jsem nějaké dokumentace, ale na mě jsou moc složité, takže jsem z toho nic nepochopil.

Potřeboval bych objekt, který bude uchovávat nastavení některých css hodnot daného prvku. Takže objekt by měl mít např. vlastnosti w jako width a h jako height. A pak jak vytvořit a zpřístupnit novou instanci k tomuto objektu? Jestli sem někdo písne tak díky.
Jan Tvrdík
Profil
Radim24:
Nechápu, co přesně chceš, zkus nějaký tutoriál pro začátečníky.
Radim24
Profil
Jan Tvrdík
Asi to neumím dobře popsat. Představ si, že mám formulář s různými prvky a chci jim jako návštěvník stránek nastavit různé css vlastnosti. Ty vlastnosti potřebuju uložit do objektu.

Já nevím jak se to v tom JQuery zapisuje ale představuji si něco v tomto smyslu:

ul_menu_1.set({
width:220px,
height:18px
}); // objektu ul_menu_2 nastavím vlastnosti

ul_menu_2.set({
width:200px,
height:20px
}); // objektu ul_menu_2 nastavím vlastnosti

ul_menu_3.set({
width:150px,
height:25px
}); // objektu ul_menu_3 nastavím vlastnosti


Jenže nevím jak mám nadefinovat ten objekt a jak mám vytvořit ty objekty samotné. tzn. ul_menu_1, ul_menu_2, ul_menu_3. Obvykle se to vytváří pomocí klíčového slova New, ale v Jquery se to dělá jinak.

Nevím o žádném tutorialu, kde bv se toto vysvětlovalo.
ah01
Profil
Radim24
Něco takového:

var ul = $("<ul></ul>");

ul.append("<li>A</li>")
  .append("<li>B</li>");
  
ul.css({
  "color": "red",
  "font-size": "20px"
});

ul.appendTo("#ahoj");

http://jquery.jslab.net/zkousecka/#befcc50d7930ac5f0fdac2060d11bb56
Radim24
Profil
To je ale něco úplně jiného. Teď neřeším přiřazování css. Mám už hotové funkce, které přiřazují css vlastnosti. Problém je v tom, že je to nepřehledné. Všechno je jen řešené pomocí funkcí. Navíc zezačátku scriptu musím nastavit defaultní hodnoty a dělám to takto:

var user_position = true;
var picker_left = 50;
var picker_top = 250;

var	ul_padding = 2;  // výpoèet šíøek menu - spoleèné jednotky
var	li_padding = 5;
var	li_margin = 5;
var	border = 1;


Jenže takhle to nemůže zůstat z následujících důvodů:
1) ty vlastnosti budou přibývat (padding-left, padding-right, text-indent, letter-spacing)
2) toto je pouze k jednomu menu, a já chci vytvořit tři menu a ještě jiné věci. Znamenalo by to vytvářet proměnné jako border_1, border_2,border_3 ... atd. Bylo by to šíleně dlouhé a nepřehledné. Proto potřebuju vytvořit jednoduchý objekt.

Polopatě
Jestli jste mě ještě nepochopili, co chci: Potřebuju ty hodnoty někam uložit. Potřebuju definovat objekt s vlastnostma.
ah01
Profil
Radim24
V podstatě máš 2 možnosti:

1) Vytvořit si normální JS objekty a jQuery používat v podstatě jen pro práci s DOM. Tohle za tebe jQuery nevyřeší, je třeba trochu umět JavaScript.

2) Vytvořit si menu jako plugin do jQuery. Se svým menu pak můžeš pracovat podobně jako je třeba navržené API jQuery UI. Úvod do psaní pluginu: http://docs.jquery.com/Plugins/Authoring
Radim24
Profil
ah01

Ten odkaz... Myslím, že je třeba jen upravit některé z těch kódů co tam je.

Co třeba upravit toto:
jQuery.fn.extend({
  check       : function() { ... },
  uncheck     : function() { ... },
  toggleCheck : function() { ... }
});


Místo těch funkcí by měly být atributy. Tohle by bylo správně?

jQuery.fn.extend({
  w       : var,
  h     : var
});


(ty funkce tam nechci, ale mám mu říct, že attributy w,h mají být string)

Anebo upravit toto:
jQuery.extend(jQuery.expr[":"], {
  text     : "a.type=='text'",
  radio    : "a.type=='radio'",
  checkbox : "a.type=='checkbox'"
});



Takhle?
jQuery.extend( {
  w     : "",
  h    : ""
});


Mě ale mate to, jak potom mám vytvořit novou instanci.

Edit:

Ono je to vlastně v principu součást tohoto kódu:

jQuery.fn.foobar = function(settings) {
  settings = jQuery.extend({
    animation: {opacity: "hide"}
  }, settings);
}


Takže možná by to mělo být celé takto:

jQuery.fn.dimensions = function(settings) {
  settings = jQuery.extend({
    width: ""}
  }, settings);
}


Jenom hádám. On ten příklad cos poslal není šitý úplně přesně na mou potřebu, tak nevím...
ah01
Profil
Radim24
Řekl bych, že jsi úplně nepochopil, jak pluginy fungují a jak se s nimi pracuje. Zkus se kouknout ještě na http://docs.jquery.com/Tutorials#Plugin_Development
Radim24
Profil
Jo, tak teď čtu tohle:

http://blog.jeremymartin.name/2008/02/building-your-first-jquery-plugin-that.html

Hele, mohu mít jednu konkrétní otázku?

# $.fn.truncate = function(options) {  
#   
#    return this.each(function() {  
#   
#    });  
# }; 


Před tím asi musím vytvořit vlastní funkci, že? Chápu to správně, že funkce je objekt?
ah01
Profil
Radim24
Před tím
Před čím? Pokud tím myslíš to, že principem pluginu je přidání do jQuery objektu svojí funkci (metodu) tak ano.

Chápu to správně, že funkce je objekt?
Ano.
Radim24
Profil
ah01
Otázkou jsem mínil, jestli před $.fn.truncate je nutno přidat funkci truncate. Ale asi jsem byl mimo. Však to byla samotná definice té funkce, ne rozšíření... Nejsem si jistý, jeslti správně chápu ten dolar. K čemu se odkazuje? Čtu teď tento tut:

http://wintoni.us/post/123029056/jquery-plugin-patterns

A tam se dolar používá několika různými způsoby:

1) Ve funkci:
(function($) {
  $.myPlugin = function() {};
})(jQuery);
jQuery.myPlugin();



2) Volání funkce:
jQuery(function($) {
  $.myPlugin();
});


Co tedy znamená ten dolar jako argument funkce a dolar před .myPlugin(); ? Že by odkaz na Jquery?
ah01
Profil
Radim24
Dolar ($) je zkratka za jQuery ($ = jQuery).

Identifikátor $ je ale docela používaný, a tak aby se jQuery nedostalo do konfliktu s kódem, který už máš na stránce, lze ho provozovat v nekonfliktním módu. V takovém případě zkratka pomocí $ nefunguje. Aby ale pluginy fungovali i v takovém případě, ale uvnitř si mohl používat $ jsou tu tyto 2 metody.

ad 1) - vytvoříš si anonymní fci. s jedním parametre $ a zavoláš ji s jQuery. To je myslím jasné.

ad 2) - při události DOM ready se jako první parametr předává jQuery. Právě aby bylo možné tohle použít.
Radim24
Profil
ah01
Asi to chápu. Tím jQuery.noConflict() se to vypne.

jQuery.noConflict()(function(){
    // code using jQuery
}); 


Ale jak se to zase zapne?
ah01
Profil
Radim24
noConflict použiješ jen v případě, že chceš na stránce používat i jiný framework, který taky používá $. Jinak se o to nemusíš starat.
Jan Tvrdík
Profil
Radim24:
Pořád nechápu, co je cílem. Přijde mi, že máš nějaký problém a máš vizi, jak ho vyřešit, kterou mi cpeš místo toho, abys mi umožnil najít lepší řešení.
Radim24
Profil
ah01
Prosím ještě tohle mi vysvětli - jaký je rozdíl v těchto dvou funkcích, co se týče formy zápisu?

$.myPlugin = function(action, new_options) {
if (typeof(action) == 'object') {
new_options = action;
action = 'initialize';
}
setOptions(new_options);
// if (action == 'initialize')
return options;
};

function setOptions(new_options) {
options = $.extend({}, defaults, options, new_options);
}

http://wintoni.us/post/123029056/jquery-plugin-patterns
Radim24
Profil
Jan Tvrdík
Psal jsem:
Potřebuju ty hodnoty někam uložit. Potřebuju definovat objekt s vlastnostma.

Proč?
Podle mého uvažování a podle toho jak jsem se kdysi seznámil s objektovým programováním v php (mé znalosti OP jsou omezené), by člověk měl vytvořit objekt s nějakýma vlastnostma a pak vytvořit vždy novou instanci, abych mohl uložit ty data. Kdybych to předvedl na jiném příkladu, tak dejme tomu, že mám nějaký seznam aut. Chci definovat jednotlivé instance (škoda, audi, bmw, honda, atd). Každé auto má specifické vlastnosti. Vytvořím tedy nejdříve objekt s těma vlastnostma. Nakonec budu mít několik instancí vytvořených z toho stejného objektu (stejná datová struktura)... Dejmetomu, že si pak s těmi instancemi budu nějak hrát a porovnávat jejich data v tabulce nebo v grafu. Jestli mě ani teď nepochopíte, tak už nevím jak to napsat, to už bych snad zvládl jedině nějak přes skype.
Jan Tvrdík
Profil
Radim24:
Je dobré si uvědomit, že JavaScript není objektový jazyk, nýbrž prototypový.
Přijde mi, že chceš naprogramovat zbytečně abstraktní vrstvu navíc. Každý element na stránce je převést do „jQuery objektu“ a s ním pak pracovat.

<ul id="seznam"><li>...</li></ul>

<script>
  var seznam = $("#seznam"); // získání objektu podle ID
  
  // manipulace s objektem
  seznam.css({
    "color": "red",
    "width": "abc"
  });
</script>
Radim24
Profil
Jan Tvrdík

Každý viditelný prvek (ul, li, input, div), má jeden skrytý input, který ukládá všechny ty hodnoty. Hodnoty které ukládám do hidden input: typ prvku, css hodnoty, text v inputech. Díky tomu mohu každou provedenou změny uložit.

Takže:
1) nastavuji css u prvků
2) ukládám změny do proměnných (chci ale ukládat do objektů)
3) ukládám každou změnu do skrytých inputů

Proto potřebuji:
Funkci, metodu, nebo objekt, který dokáže zpracovávat tyto vlastnosti, tzn. uložit každou provedenou změnu do objektu. Mám tam asi pět nebo deset funkcí, každá pracuje se stejným modelem (stejné proměnné). To se týká ale jenom jednoho menu. A budu ještě vytvářet další dvě menu a tři DIVy. Tak si představ, jak by ten kód byl hrozně dlouhý a nepřehledný (nyní má první část javascriptu 500 řádků a to není ještě dokončena).


EDIT
Nejde to udělat tak, abych mohl definovat vlastní atributy?
Proč tam psát dlouhé názvy, když mi stači zkratky 1-2 písmena? Potřebuji tam přidat vlastní atributy
Jan Tvrdík
Profil
Radim24:
Nejde to udělat tak, abych mohl definovat vlastní atributy?
Pokud si napíšeš tu vlastní abstraktní vrstvu, tak je na tobě, jak si ji napíšeš.
Radim24
Profil
Jan Tvrdík
Určitě to zkusím, aspoň se něco naučím.
Radim24
Profil
Po delším hledání jsem našel velmi jednoduchý a dobrý návod/tutorial:

http://asimilia.wordpress.com/2008/12/17/jquery-extend-confusion/

A taky vysvětlení jak pracovat s konstruktorem:

http://www.prodevtips.com/2008/10/23/prototyping-with-javascript/
Radim24
Profil
Po delším hledání jsem našel velmi jednoduchý a dobrý návod/tutorial:

http://asimilia.wordpress.com/2008/12/17/jquery-extend-confusion/

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: