[JavaScript] jquery zbiory elementów Opcje

[presscot]

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 (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

$("#id_jeden, #id_dwa").animate();

[vokiel]

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 
<?php
<div id="okienko"><!-- cale okienko -->
<div>Naglowek</div>
<div>Content</div>
</div>
 
<script type="text/javascript">
// tworzenie okienka
var div_a = $('<div>'); // naglowek
var div_b = $('<div>'); // content
//teraz dodajesz animacje
$('#okienko').append(div_a).append(div_b);
div_a.animate({width:'300px'}).next('div').animate({height:'250px'); 
// być może trzeba zamienić miejscami ostatnie 2 linijki, nie jestem teraz pewien
</script>
?>
[PHP] pobierz, plaintext 

[presscot]

Zakładam, że masz ten fragment w divie, czyli:

[PHP] pobierz, plaintext 
<?php
<div id="okienko"><!-- cale okienko -->
<div>Naglowek</div>
<div>Content</div>
</div>
 
<script type="text/javascript">
// tworzenie okienka
var div_a = $('<div>'); // naglowek
var div_b = $('<div>'); // content
//teraz dodajesz animacje
$('#okienko').append(div_a).append(div_b);
div_a.animate({width:'300px'}).next('div').animate({height:'250px'); 
// być może trzeba zamienić miejscami ostatnie 2 linijki, nie jestem teraz pewien
</script>
?>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
<?php
$(document).ready(
 function() {
     
    $(".okno").click(
    function(e) {
//////////////////////////////////////
        if (document.getElementById('head_clear')) {
 
            $("#head_background").css({"top": e.pageY+"px", "left": e.pageX+"px"});
            $("#head_clear").css({"top": e.pageY+"px", "left": e.pageX+"px"});
            $("#formularz").css({"top": e.pageY+28+"px", "left": e.pageX+"px"});
            
        } else {
            
            var wysokosc = 500;
            var dlugosc = 700;
 
            var new_head_background = $(document.createElement("DIV"));
            var new_head_clear = $(document.createElement("DIV"));
            var new_formularz = $(document.createElement("FORM"));
 
            new_head_background.attr("id", "head_background");
            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"});
            $(document.body).append(new_head_background);
            var new_ico = $('<img />');
            new_ico.attr("src", "templates/presscot/images/logo.ico");
            $(new_head_background).append(new_ico);
            new_head_background.append(' Formularz');
 
            jQuery.each(jQuery.browser, function(i, val) {
                if((i=="msie" && val) || (i=="opera" && jQuery.browser.version.substr(0,1)>="9"))
                    new_head_background.corner("top");
            });
 
            new_head_clear.attr("id", "head_clear");
            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"});
            $(document.body).append(new_head_clear);
            var close_w = $(document.createElement("DIV"));
            var hide_w = $(document.createElement("DIV"));
            close_w.attr("id", "close_w");
            hide_w.attr("id", "hide_w");
            $(new_head_clear).append(close_w);
            $(new_head_clear).append(hide_w);
            new_head_clear.draggable({ opacity: 0.35, cursor: 'crosshair' });
 
            new_formularz.attr("id", "formularz");
            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"});
 
pola();
            
        }
        
$("#head_clear, #head_background").animate({ width : dlugosc, opacity: 1 }, 1000, function(){ $("#formularz").animate({height : wysokosc, opacity: 1 }, 1000) });
 
        return false;
//////////////////////////////////////    
    });
 });
?>
[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

Ten post edytował presscot 3.05.2009, 21:24:00