Всем спасибо за просмотры.
Сам сделал, но не могу привязать правое окно к правой стороне верхнего окна. Может кто поможет?
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#testcontainer{position:relative;}
#testcontainer1{position:absolute;left:250;}
#testcontainer
{
font-size:1em;
padding:0px;
width:370px;
height:130px;
border:1px solid grey;
overflow:hidden;
}
#testcontainer h2
{
margin-top:0px;
margin-bottom:13px;
padding:100%;
}
#testcontainer p
{
margin-top:0px;
margin-bottom:0px;
}
#testcontainer1
{
float: left;
font-size:1em;
padding:0px ;
width:130px;
height:370px;
border:1px solid grey;
overflow:hidden;
}
#testcontainer1 h2
{
margin-top:0px ;
margin-bottom:13px;
padding:100%;
}
#testcontainer2
{
font-size:100em;
padding:0px ;
width:130px;
height:370px;
border:1px solid grey;
overflow:hidden;
}
#testcontainer2 h2
{
margin-top:0px ;
margin-bottom:13px;
padding:100%;
}
#sizecont
{
font-size:0.8em;
}
.transfer-effect
{
border:2px solid grey;
}
select#effect1{
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#effect1").change(function(){
if ($("#effect1").val()==="size"){
$("#sizecont").css("display","block");
$("#transfercont").css("display","none");
$("#scalecont").css("display","none");}
});
$("#but1").click(function(){
var options={};
if ($("#effect1").val()==="scale"){
var options={percent:50};
options.percent=$("#scalepercent").val();}
else if ($("#effect1").val()==="transfer"){
var options={to:"#but1", className:"transfer-effect"}
options.to=$("#trans1").val();
options.className=$("#trans2").val();}
else if ($("#effect1").val()==="size"){
{
var options={to:{width:200,height:200}};
options.to.width=$("#size1").val();
options.to.height=$("#size2").val();}
$("#testcontainer").effect($("#effect1").val(), options ,1000);
if ($("#effect1").val()==="size"){
var options={to:{width:200,height:200}};
options.to.width=$("#size4").val();
options.to.height=$("#size3").val();}
$("#testcontainer1").effect($("#effect1").val(), options ,1000);
if ($("#effect1").val()==="size"){
var options={to:{width:200,height:200}};
options.to.width=$("#size6").val();
options.to.height=$("#size5").val();}
$("#testcontainer2").effect($("#effect1").val(), options ,1000);
}
});
});
</script>
</head>
<body>
<div id="testcontainer" class="ui-widget ui-corner-all">
<h2 class="ui-widget-header ui-corner-all"></h2>
</div>
<div id="testcontainer1" class="ui-widget ui-corner-all">
<h2 class="ui-widget-header ui-corner-all"></h2>
</div>
<div id="testcontainer2" class="ui-widget ui-corner-all">
<h2 class="ui-widget-header ui-corner-all"></h2>
</div>
<br /><br />
<select id="effect1" name="effect">
<option value="size"></option>
</select>
<br /><br />
<div id="sizecont">
Длинна:
<input id="size1" type="text" value="370"/>
<input id="size5" type="text" value="370"/>
<input id="size3" type="text" value="370"/>
<br /><br />
Ширина:
<input id="size2" type="text" value="130"/>
<input id="size6" type="text" value="130"/>
<input id="size4" type="text" value="130"/>
</div>
<br />
<input id="but1" type="button" value="Применить" />
</body>
</html>