JavaScript DHTML/YUI Library/Resizable
Содержание
Animated resizing
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>8-way Element Resize</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script>
</head> <body class="yui-skin-sam">
8-way Element Resize
This example shows how to make an element resizable by all 8 handles.
<style>
#yui_img { position: absolute; top: 20px; left: 20px; } #example-canvas { height: 200px; }
</style> <img src="yui_2.7.0b-assets/resize-assets/yui.jpg" id="yui_img" height="166" width="250"> <script> (function() {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var resize = new YAHOO.util.Resize("yui_img", { handles: "all", knobHandles: true, height: "166px", width: "250px", proxy: true, draggable: true, animate: true, animateDuration: .75, animateEasing: YAHOO.util.Easing.backBoth });
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
how to make a DIV resizable, using a proxy element and animation.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Animated Proxy Resize</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script>
</head> <body class="yui-skin-sam">
Animated Proxy Resize
This example shows how to make a DIV resizable, using a proxy element and animation.
<style>
#resize { border: 1px solid black; height: 100px; width: 200px; overflow: hidden; background-color: #fff; }
</style>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
<script> (function() {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var resize = new YAHOO.util.Resize("resize", { proxy: true, animate: true, animateDuration: .75, animateEasing: YAHOO.util.Easing.backBoth });
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Make a DIV resizable, using a proxy element.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Proxy Resize</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script>
</head> <body class="yui-skin-sam">
Proxy Resize
This example shows how to make a DIV resizable, using a proxy element.
<style>
#resize { border: 1px solid black; height: 100px; width: 200px; overflow: hidden; background-color: #fff; }
</style>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
<script> (function() {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var resize = new YAHOO.util.Resize("resize", { proxy: true });
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Make an element resizable by all 8 handles.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>8-way Element Resize</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script>
</head> <body class="yui-skin-sam">
8-way Element Resize
This example shows how to make an element resizable by all 8 handles.
<style>
#yui_img { position: absolute; top: 20px; left: 20px; } #example-canvas { height: 200px; }
</style> <img src="yui_2.7.0b-assets/resize-assets/yui.jpg" id="yui_img" height="166" width="250"> <script> (function() {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var resize = new YAHOO.util.Resize("yui_img", { handles: "all", knobHandles: true, height: "166px", width: "250px", proxy: true, draggable: true, animate: true, animateDuration: .75, animateEasing: YAHOO.util.Easing.backBoth });
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Make a simple DIV resizable.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Simple Resize</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script>
</head> <body class="yui-skin-sam">
Simple Resize
This example shows how to make a simple DIV resizable.
<style>
#resize { border: 1px solid black; height: 100px; width: 200px; background-color: #fff; } #resize div.data { overflow: hidden; height: 100%; width: 100%; }
</style>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
<script> (function() {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var resize = new YAHOO.util.Resize("resize");
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>