JavaScript DHTML/Mootools/Slide
Содержание
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;
}
- 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>