Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] jquery zbiory elementów
Forum PHP.pl > Forum > Przedszkole
presscot
3.05.2009, 17:05:38
jak połaczyc obiekty przechowywane w zmiennych...

var jeden = $(document.createElement("DIV"));
var dwa = $(document.createElement("DIV"));

w tak aby osiagnac efekt łaczenia elementów questionmark.gif

$("#id_jeden, #id_dwa").animate();
wookieb
3.05.2009, 18:34:40
Raczej najpierw musisz je umieścic w dokumencie, żeby animować. A wtedy to już wyjdzie bez problemu.
presscot
3.05.2009, 19:13:38
Cytat(wookieb @ 3.05.2009, 19:34:40 ) *
Raczej najpierw musisz je umieścic w dokumencie, żeby animować. A wtedy to już wyjdzie bez problemu.


Oczywiscie dodaje je do document.body, ale problem tkwi w tym ze musze dodawac rowniez id do tych obiektów aby pozniej przekazac je do animate(), co jest mi troche nie na rękę.

A więc moje pyatnie brzmi jak dwie zmienne ktore przechowują obiekty moga być uchwytem tej funkcji??

np. jesli mam id to dodaje tak

$("#id_jeden, #id_dwa").animate()
a jesli mam obiekty w zmiennych

jeden.animate() i dwa.animate()

ale własnie chciałbym aby oba te obiekty były dodane pojedynczo do tej funkcji, tylko jak to zrobic questionmark.gif

np idea jest taka tongue.gif jednak oczywiscie to niedziała i tylko pierwszy obiekt brany jest pod uwage:P

$(jeden, dwa).animate()
wookieb
3.05.2009, 19:38:47
Rozumiem.
A probowales cos takiego?
Kod
$([jeden,dwa]).animate();
presscot
3.05.2009, 19:53:04
Cytat(wookieb @ 3.05.2009, 20:38:47 ) *
Rozumiem.
A probowales cos takiego?
Kod
$([jeden,dwa]).animate();


no niestety nie działa
wookieb
3.05.2009, 20:02:40
A jednak działa tylko ze nie
Kod
var jeden = $(document.createElement("DIV"));

a
Kod
var jeden = document.createElement("DIV");
vokiel
3.05.2009, 20:05:33
Może w ten deseń:
[PHP] pobierz, plaintext 
  1. <?php
  2. var div_a = $('<div>');
  3. var div_b = $('<div>');
  4.  
  5. div_a.append(div_b);
  6. div_a.animate();
  7. ?>
[PHP] pobierz, plaintext
presscot
3.05.2009, 20:24:27
Cytat(wookieb @ 3.05.2009, 21:02:40 ) *
A jednak działa tylko ze nie
Kod
var jeden = $(document.createElement("DIV"));

a
Kod
var jeden = document.createElement("DIV");


no niby tak ale to o dwie zmienne wiecej by było tongue.gif bo i tak musiałbym pozniej co roż go wyszukiwac w jquery, a tak chciałem miec juz gotowy uchwyt.

@vokiel napisałeś zeby wstawić diva w diva no ale to tez mnie nie ratuje.

Otóż tak napisałem skrypt ktory działa na tej zasadzie ze po evencie rozwija sie z lewa na prawo nagłówek kiedy sie rozwinie to na doł zsówa sie kontener. Całe to okienko wyglada jak okienko w windowsie. Ma tez te same maozliwości to znaczy drag and drop(kiedy przesówa sie nagłówek przesówa sie całe okno), a także zamykanie okna, animacje podwijania go i rozwijania, zrzucania do pasku ktory rowniez jest w js, oraz możemy operawac w nim obiektami zupełnie tak jak w zwykłym okienku. Wyspisane wyzej obiekty to nagłówek. Pierwsze z nich to ikonka, tekst i tło okienka. Drugi Div to przesłonka (transparent) z rzyciskami do zamykania i etc... Przesłonka istnieje po to aby przy przesówaniu drag and drop uniknąc zaznaczania tekstu i ikonki.

Wsztytsko jest już zapisane i wszytsko działa wysmienicie:P a raczej działo do momentu, kiedy postanowiłem być modnym, nauczyc sie jquery i zastosować go w moim skrypcie, gdyz stwierdziłem ze jeśli i tak juz korzystam z drag and drop z jquery to cały skrypt powinien wykorzystywać tą biblioteczke. :PPPP
vokiel
3.05.2009, 21:12:28
Cytat
po evencie rozwija sie z lewa na prawo nagłówek kiedy sie rozwinie to na doł zsówa sie kontener

Zakładam, że masz ten fragment w divie, czyli:
[PHP] pobierz, plaintext 
  1. <?php
  2. <div id="okienko"><!-- cale okienko -->
  3. <div>Naglowek</div>
  4. <div>Content</div>
  5. </div>
  6.  
  7. <script type="text/javascript">
  8. // tworzenie okienka
  9. var div_a = $('<div>'); // naglowek
  10. var div_b = $('<div>'); // content
  11. //teraz dodajesz animacje
  12. $('#okienko').append(div_a).append(div_b);
  13. div_a.animate({width:'300px'}).next('div').animate({height:'250px'); 
  14. // być może trzeba zamienić miejscami ostatnie 2 linijki, nie jestem teraz pewien
  15. </script>
  16. ?>
[PHP] pobierz, plaintext
presscot
3.05.2009, 21:20:23
Cytat(vokiel @ 3.05.2009, 22:12:28 ) *
Zakładam, że masz ten fragment w divie, czyli:
[PHP] pobierz, plaintext 
  1. <?php
  2. <div id="okienko"><!-- cale okienko -->
  3. <div>Naglowek</div>
  4. <div>Content</div>
  5. </div>
  6.  
  7. <script type="text/javascript">
  8. // tworzenie okienka
  9. var div_a = $('<div>'); // naglowek
  10. var div_b = $('<div>'); // content
  11. //teraz dodajesz animacje
  12. $('#okienko').append(div_a).append(div_b);
  13. div_a.animate({width:'300px'}).next('div').animate({height:'250px'); 
  14. // być może trzeba zamienić miejscami ostatnie 2 linijki, nie jestem teraz pewien
  15. </script>
  16. ?>
[PHP] pobierz, plaintext 



[PHP] pobierz, plaintext 
  1. <?php
  2. $(document).ready(
  3.  function() {
  4.      
  5.     $(".okno").click(
  6.     function(e) {
  7. //////////////////////////////////////
  8.         if (document.getElementById('head_clear')) {
  9.  
  10.             $("#head_background").css({"top": e.pageY+"px", "left": e.pageX+"px"});
  11.             $("#head_clear").css({"top": e.pageY+"px", "left": e.pageX+"px"});
  12.             $("#formularz").css({"top": e.pageY+28+"px", "left": e.pageX+"px"});
  13.             
  14.         } else {
  15.             
  16.             var wysokosc = 500;
  17.             var dlugosc = 700;
  18.  
  19.             var new_head_background = $(document.createElement("DIV"));
  20.             var new_head_clear = $(document.createElement("DIV"));
  21.             var new_formularz = $(document.createElement("FORM"));
  22.  
  23.             new_head_background.attr("id", "head_background");
  24.             new_head_background.css({"top": e.pageY+"px", "left": e.pageX+"px", "height" : "28px", "background-image" : "url(templates/presscot/images/window_c.gif)", "color" : "#FFFFFF", "font-weight" : "bold", "font-family" : '"Trebuchet MS", Tahoma, Verdana', "font-size" : "14px", "-moz-border-radius-topleft" : "6px", "-moz-border-radius-topright" : "6px", "-khtml-border-top-left-radius" : "6px", "-khtml-border-top-right-radius" : "6px", "-webkit-border-top-left-radius" : "6px", "-webkit-border-top-right-radius" : "6px", "-icab-border-top-right-radius" : "6px", "-icab-border-top-left-radius" : "6px", "-o-border-top-left-radius" : "6px", "-o-border-top-right-radius" : "6px", "border-bottom-left-radius" : "6px", "border-bottom-right-radius" : "6px", "width" : "2px", "position" : "absolute", "filter" : "alpha(opacity=0)", "-moz-opacity" : "0", "opacity" : "0"});
  25.             $(document.body).append(new_head_background);
  26.             var new_ico = $('<img />');
  27.             new_ico.attr("src", "templates/presscot/images/logo.ico");
  28.             $(new_head_background).append(new_ico);
  29.             new_head_background.append(' Formularz');
  30.  
  31.             jQuery.each(jQuery.browser, function(i, val) {
  32.                 if((i=="msie" && val) || (i=="opera" && jQuery.browser.version.substr(0,1)>="9"))
  33.                     new_head_background.corner("top");
  34.             });
  35.  
  36.             new_head_clear.attr("id", "head_clear");
  37.             new_head_clear.css({"top": e.pageY+"px", "left": e.pageX+"px", "height" : "28px", "cursor" : "move", "background" : "url(templates/presscot/images/spacer.gif)", "position" : "absolute", "filter" : "alpha(opacity=0)", "-moz-opacity" : "0", "opacity" : "0", "width" : "2px"});
  38.             $(document.body).append(new_head_clear);
  39.             var close_w = $(document.createElement("DIV"));
  40.             var hide_w = $(document.createElement("DIV"));
  41.             close_w.attr("id", "close_w");
  42.             hide_w.attr("id", "hide_w");
  43.             $(new_head_clear).append(close_w);
  44.             $(new_head_clear).append(hide_w);
  45.             new_head_clear.draggable({ opacity: 0.35, cursor: 'crosshair' });
  46.  
  47.             new_formularz.attr("id", "formularz");
  48.             new_formularz.css({"top": e.pageY+28+"px", "left": e.pageX+"px", "background-color" : "#FFFFFF", "border-bottom" : "#999999 solid 2px", "border-left" : "#999999 solid 2px", "border-right" : "#999999 solid 2px", "position" : "absolute", "filter" : "alpha(opacity=0)", "-moz-opacity" : "0", "opacity" : "0", "text-align" : "center", "margin" : "0 auto", "width" : dlugosc-4+"px"});
  49.  
  50. pola();
  51.             
  52.         }
  53.         
  54. $("#head_clear, #head_background").animate({ width : dlugosc, opacity: 1 }, 1000, function(){ $("#formularz").animate({height : wysokosc, opacity: 1 }, 1000) });
  55.  
  56.         return false;
  57. //////////////////////////////////////    
  58.     });
  59.  });
  60. ?>
[PHP] pobierz, plaintext


No jak widzisz troszke innaczej zaplanowałem budowe okienka.

A bierze sie to stad ze troszke przerobiłem biblioteczke drag and drop aby tylko nagłówek przesówał całe okienko

ps to tylko mała ceśc kodu i nei widzac a niej skali znaczenia moje problemu:P
wookieb
3.05.2009, 21:56:21
A co to za skunksy?questionmark.gif
Kod
"absolute", "filter" : "alpha(opacity=0)", "-moz-opacity" : "0"

Nie po to sa biblioteki typu jquery zeby sie w to bawic. Wystarczy ze dasz SAMO opacity:0 .

Poza tym pisze się "przesuwał"
presscot
3.05.2009, 22:11:39
Cytat(wookieb @ 3.05.2009, 22:56:21 ) *
A co to za skunksy?questionmark.gif
Kod
"absolute", "filter" : "alpha(opacity=0)", "-moz-opacity" : "0"

Nie po to sa biblioteki typu jquery zeby sie w to bawic. Wystarczy ze dasz SAMO opacity:0 .

Poza tym pisze się "przesuwał"



Za literówki przepraszam chyba nie są w tym momencie ważne tym bardziej ze od kilku dni juz nie spie tongue.gif

Co do opacity to jak wczesniej wspominałem dopiero poznaje jquery i nie byłem pewien na jakiej zasadzie działa css() dlatego podałem wszytsko co mi slina do głowy przyniosła i dopiero kiedy sam mechanizm bedzie gotowty wtedy usuwam co niepotrzebne.
Dzieki jednak za uwage bo szczerze mówiąć to mogłoby i umknąć. Pewnie wiele w całym kodzie bedzie niedociagnięć, ba musi być ale do jquery zajrzałem dopiero tydzien temu. Moja domeną jest C i php, a z js zawsze kulałem dopiero AJAX zmusił mnie nieco do działa:D:D

ps jquery dysponuje jakąś standardowym poleceniem radius z CSS3??
wookieb
3.05.2009, 22:23:12
Na jquery.com pisze "css3 compliant" ale nie liczyłbym na zaskakujace efekt na przegladarkach ktore jego nie obsługują.
presscot
3.05.2009, 22:36:01
Cytat(wookieb @ 3.05.2009, 23:23:12 ) *
Na jquery.com pisze "css3 compliant" ale nie liczyłbym na zaskakujace efekt na przegladarkach ktore jego nie obsługują.


No zdążyłem sie już o tym przekonać hehe smile.gif No nic zawsze pewniej będzie kiedy tych kilka linijek więcej pozostawię smile.gif a tak czy inaczej w IE corner() jest nieuniknione

Dzięki za odp. smile.gif Teraz mam świadomość ze moje posty są czytane, a więc za swoja ortografie będę musiał się zabrać.

Głoś za całokształt się należy smile.gif

Pozdrawiam press!!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.