JavaScript DHTML/YUI Library/Resizable

Материал из Web эксперт
Версия от 10:28, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

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>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/YUI_Library/Resizable&oldid=4005»