JavaScript DHTML/Mootools/Slide

Материал из Web эксперт
Перейти к: навигация, поиск

Fx.Slide Demo

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">

h3.section { 

 margin-top: 1em;

}

  1. vertical_slide, #horizontal_slide {
 background: #D0C8C8;
 color: #8A7575;
 padding: 10px;
 border: 5px solid #F3F1F1;
 font-weight: bold;

} div.marginbottom { 

 /* Since the Fx.Slide element resets margins, we set a margin on the above element */
 margin-bottom: 10px;

} 

 </style>
 <script type="text/javascript" src="mootools.js"></script>
 <script type="text/javascript">

window.addEvent("domready", function() { 

 var status = {
   "true": "open",
   "false": "close"
 };
 
 //-vertical
 var myVerticalSlide = new Fx.Slide("vertical_slide");
 $("v_slidein").addEvent("click", function(e){
   e.stop();
   myVerticalSlide.slideIn();
 });
 $("v_slideout").addEvent("click", function(e){
   e.stop();
   myVerticalSlide.slideOut();
 });
 $("v_toggle").addEvent("click", function(e){
   e.stop();
   myVerticalSlide.toggle();
 });
 $("v_hide").addEvent("click", function(e){
   e.stop();
   myVerticalSlide.hide();
   $("vertical_status").set("html", status[myVerticalSlide.open]);
 });
 
 $("v_show").addEvent("click", function(e){
   e.stop();
   myVerticalSlide.show();
   $("vertical_status").set("html", status[myVerticalSlide.open]);
 });
 
 // When Vertical Slide ends its transition, we check for its status
 // note that complete will not affect "hide" and "show" methods
 myVerticalSlide.addEvent("complete", function() {
   $("vertical_status").set("html", status[myVerticalSlide.open]);
 });

 //--horizontal
 var myHorizontalSlide = new Fx.Slide("horizontal_slide", {mode: "horizontal"});
 $("h_slidein").addEvent("click", function(e){
   e.stop();
   myHorizontalSlide.slideIn();
 });
 $("h_slideout").addEvent("click", function(e){
   e.stop();
   myHorizontalSlide.slideOut();
 });
 $("h_toggle").addEvent("click", function(e){
   e.stop();
   myHorizontalSlide.toggle();
 });
 $("h_hide").addEvent("click", function(e){
   e.stop();
   myHorizontalSlide.hide();
   $("horizontal_status").set("html", status[myHorizontalSlide.open]);
 });
 
 $("h_show").addEvent("click", function(e){
   e.stop();
   myHorizontalSlide.show();
   $("horizontal_status").set("html", status[myHorizontalSlide.open]);
 });
 
 // When Horizontal Slide ends its transition, we check for its status
 // note that complete will not affect "hide" and "show" methods
 myHorizontalSlide.addEvent("complete", function() {
   $("horizontal_status").set("html", status[myHorizontalSlide.open]);
 });

}); 

 </script>
 <title>Fx.Slide Demo</title>

</head> <body>

Fx.Slide

Introduction

Here goes a nice introduction

Vertical

   <a id="v_slideout" href="#">slide out</a>
   |
   <a id="v_slidein" href="#">slide in</a>
   |
   <a id="v_toggle" href="#">toggle</a>
   |
   <a id="v_hide" href="#">hide</a>
   |
   <a id="v_show" href="#">show</a>
   | status: open

   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Horizontal

   <a id="h_slideout" href="#">slide out</a>
   |
   <a id="h_slidein" href="#">slide in</a>
   |
   <a id="h_toggle" href="#">toggle</a>
   |
   <a id="h_hide" href="#">hide</a>
   |
   <a id="h_show" href="#">show</a>
   | status: open

   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</body> </html> 


 </source>


The Slider-Plugin allows you to drag&drop a knob inside an element to set a value within a certain range

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">

div.slider { 

 width: 200px;
 height: 16px;
 background: #eee;

} div.slider div.knob { 

 background: #000;
 width: 16px;
 height: 16px;

} div#fontSize { 

 height: 50px;

} div.advanced { 

 width: 400px;
 margin: 5px 0;
 background: url(images/slider.png) 0 center repeat-x;

} div.advanced div.knob { 

 background: no-repeat center center;
 cursor: pointer;

} div#red div.knob { 

 background-image: url(images/red.png);

} div#green div.knob { 

 background-image: url(images/green.png);

} div#blue div.knob { 

 background-image: url(images/blue.png);

} 

 </style>
 <script type="text/javascript" src="mootools.js"></script>
 <script type="text/javascript">

window.addEvent("domready", function(){ 

 // First Example
 var el = $("myElement"),
   font = $("fontSize");
 
 // Create the new slider instance
 new Slider(el, el.getElement(".knob"), {
   steps: 35,  // There are 35 steps
   range: [8],  // Minimum value is 8
   onChange: function(value){
     // Everytime the value changes, we change the font of an element
     font.setStyle("font-size", value);
   }
 }).set(font.getStyle("font-size").toInt());
 
 // Second Example
 var el = $("setColor"), color = [0, 0, 0];
 
 var updateColor = function(){
   // Sets the color of the output text and its text to the current color
   el.setStyle("color", color).set("text", color.rgbToHex());
 };
 
 // We call that function to initially set the color output
 updateColor();
 
 $$("div.slider.advanced").each(function(el, i){
   var slider = new Slider(el, el.getElement(".knob"), {
     steps: 255,  // Steps from 0 to 255
     wheel: true, // Using the mousewheel is possible too
     onChange: function(){
       // Based on the Slider values set an RGB value in the color array
       color[i] = this.step;
       // and update the output to the new value
       updateColor();
     }
   }).set(0);
 });

}); 

 </script>
 <title>Slider Demo</title>

</head> <body>

Slider

Introduction

The Slider-Plugin allows you to drag&drop a knob inside an element to set a value within a certain range. 

   Change the value, to change the fontsize.

 

 


   Why? This is a nice User-Interface-Element to not just let the user set a value
   by typing into an input field but limiting the range without further needs to check
   the user input (on clientside). With callbacks you can manipulate anything after changing the value.

Advanced Example

With the Slider it is damn easy to create stuff like an RGB-Color Selector which actually looks good. 

 Selected color:

</body> </html> 


 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Mootools/Slide&oldid=3287»