, - . - ! , HTML5, CSS3, PHP MySql .
- .
, . , .
  • , 6 2011, 23:39 |
  • : fiamma |
  • : 21982 |
  • : 16 |
  • :
   Jquery, . Jquery. 4 .





1.
Jquery .
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="interface.js"></script>

2.
. CSS head . :
#window {
position: absolute;
left: 200px;
top: 100px;
width: 400px;
height: 300px;
overflow: hidden;
display: none;
}

#windowTop {
height: 30px;
overflow: 30px;
background-image: url(images/window_top_end.png);
background-position: right top;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
cursor: move;
}

#windowTopContent {
margin-right: 13px;
background-image:url(images/window_top_start.png);
background-position:left top;
background-repeat: no-repeat;
overflow: hidden;
height: 30px;
line-height: 30px;
text-indent: 10px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #6caf00;
}

#windowMin {
position: absolute;
right: 25px;
top: 10px;
cursor: pointer;
}

#windowMax {
position: absolute;
right: 25px;
top: 10px;
cursor: pointer;
display: none;
}

#windowClose {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}

#windowBottom {
position: relative;
height: 270px;
background-image: url(images/window_bottom_end.png);
background-position: right bottom;
background-repeat: no-repeat;
}

#windowBottomContent {
position: relative;
height: 270px;
background-image: url(images/window_bottom_start.png);
background-position: left bottom;
background-repeat: no-repeat;
margin-right: 13px;
}

#windowResize {
position: absolute;
right: 3px;
bottom: 5px;
cursor: se-resize;
}

#windowContent {
position:absolute;
top: 30px;
left: 10px;
width: auto;
height: auto;
overflow: auto;
margin-right: 10px;
border: 1px solid #6caf00;
height: 255px;
width: 375px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #fff;
}

#windowContent * {
margin: 10px;
}

.transferer2 {
border: 1px solid #6BAF04;
background-color: #B4F155;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}


3.
, div- . HTML . :
<a href="" id="windowOpen">  </a>
<div id="window">
<div id="windowTop">
<div id="windowTopContent"> </div>
<img src="images/window_min.jpg" id="windowMin" />
<img src="images/window_max.jpg" id="windowMax" />
<img src="images/window_close.jpg" id="windowClose" />
</div>

<div id="windowBottom"><div id="windowBottomContent">&nbsp;</div></div>
<div id="windowContent"><p> </p></div>
<img src="images/window_resize.gif" id="windowResize" /></div>


4.
. body ():
<script type="text/javascript">

$(document).ready(
function()
{
$('#windowOpen').bind(
'click',
function() {
if($('#window').css('display') == 'none') {
$(this).TransferTo(
{
to:'window',
className:'transferer2',
duration: 400,
complete: function()
{
$('#window').show();
}
}
);
}
this.blur();
return false;
}
);
$('#windowClose').bind(
'click',
function()
{
$('#window').TransferTo(
{
to:'windowOpen',
className:'transferer2',
duration: 400
}
).hide();
}
);
$('#windowMin').bind(
'click',
function()
{
$('#windowContent').SlideToggleUp(300);
$('#windowBottom, #windowBottomContent').animate({height: 10}, 300);
$('#window').animate({height:40},300).get(0).isMinimized = true;
$(this).hide();
$('#windowResize').hide();
$('#windowMax').show();
}
);
$('#windowMax').bind(
'click',
function()
{
var windowSize = $.iUtil.getSize(document.getElementById('windowContent'));
$('#windowContent').SlideToggleUp(300);
$('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300);
$('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false;
$(this).hide();
$('#windowMin, #windowResize').show();
}
);
$('#window').Resizable(
{
minWidth: 200,
minHeight: 60,
maxWidth: 700,
maxHeight: 400,
dragHandle: '#windowTop',
handlers: {
se: '#windowResize'
},
onResize : function(size, position) {
$('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px');
var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px');
if (!document.getElementById('window').isMinimized) {
windowContentEl.css('height', size.height - 48 + 'px');
}
}
}
);
}
);
</script>

, .

: example.zip [44.22 Kb] (c: 2978)
  •  , Jquery, Jquery
  • : sdfsdf () |
  • : 0 |
  • 6 , 18:09
  • #1
html
  • : () |
  • : 0 |
  • 22 , 21:11
  • #2
. -.