| Autor | Zpráva | ||
|---|---|---|---|
| Radim24 Profil |
#1 · Zasláno: 5. 9. 2009, 11:08:50
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 |
#2 · Zasláno: 5. 9. 2009, 11:24:17
Radim24:
Nechápu, co přesně chceš, zkus nějaký tutoriál pro začátečníky. |
||
| Radim24 Profil |
#3 · Zasláno: 5. 9. 2009, 11:38:25 · Upravil/a: Radim24
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 vlastnostiJenž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 |
#4 · Zasláno: 5. 9. 2009, 11:45:53
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 |
#5 · Zasláno: 5. 9. 2009, 11:55:36 · Upravil/a: Radim24
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 |
#6 · Zasláno: 5. 9. 2009, 12:10:35
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 |
#7 · Zasláno: 5. 9. 2009, 12:21:51 · Upravil/a: Radim24
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 |
#8 · Zasláno: 5. 9. 2009, 12:37:49
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 |
#9 · Zasláno: 5. 9. 2009, 12:45:14
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 |
#10 · Zasláno: 5. 9. 2009, 12:56:33
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 |
#11 · Zasláno: 5. 9. 2009, 13:10:40 · Upravil/a: Radim24
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 |
#12 · Zasláno: 5. 9. 2009, 13:27:38
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 |
#13 · Zasláno: 5. 9. 2009, 13:54:54
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 |
#14 · Zasláno: 5. 9. 2009, 14:05:55
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 |
#15 · Zasláno: 5. 9. 2009, 16:25:47
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 |
#16 · Zasláno: 5. 9. 2009, 16:57:45
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 |
#17 · Zasláno: 5. 9. 2009, 17:05:03 · Upravil/a: Radim24
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 |
#18 · Zasláno: 5. 9. 2009, 18:00:53 · Upravil/a: Jan Tvrdík
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 |
#19 · Zasláno: 5. 9. 2009, 18:15:54 · Upravil/a: Radim24
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 |
#20 · Zasláno: 5. 9. 2009, 19:24:16
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 |
#21 · Zasláno: 5. 9. 2009, 19:49:53
Jan Tvrdík
Určitě to zkusím, aspoň se něco naučím. |
||
| Radim24 Profil |
#22 · Zasláno: 5. 9. 2009, 20:24:55 · Upravil/a: Radim24
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 |
#23 · Zasláno: 6. 9. 2009, 10:30:46 · Upravil/a: Radim24
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/ |
||
|
Časová prodleva: 15 let
|
|||
0