Created
May 18, 2011 23:31
-
-
Save ischenkodv/979832 to your computer and use it in GitHub Desktop.
Example of 2 Mootools panels for blog post.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <title>Открывающаяся панель на MooTools</title> | |
| <script type="text/javascript" src="mootools.min.js"></script> | |
| <script type="text/javascript"> | |
| window.addEvent('domready', function(){ | |
| var mySlide = new Fx.Slide('section'); | |
| $('toggle').addEvent('click', function(e){ | |
| e = new Event(e); | |
| mySlide.toggle(); | |
| e.stop(); | |
| }); | |
| var mySlide2 = new Fx.Slide('section2'); | |
| $('toggle2').addEvent('click', function(e){ | |
| e = new Event(e); | |
| mySlide2.toggle(); | |
| e.stop(); | |
| }); | |
| }); | |
| </script> | |
| <style type="text/css"> | |
| body{ | |
| font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; | |
| } | |
| div.container{ | |
| margin:30px auto; | |
| width:350px; | |
| } | |
| h2{ margin:0px; | |
| padding:0px; | |
| border:0px; | |
| } | |
| h2{ color:#FFFFFF; | |
| font-size:13px; | |
| display:block; | |
| background:url(img/h2_bg.gif) top left no-repeat #9A9A9A; | |
| } | |
| h2 span{ | |
| padding:5px 10px; | |
| background:url(img/h2_span_bg.gif) top right no-repeat; | |
| display:block; | |
| } | |
| h2 a:link, h2 a:visited{ | |
| color:#FFFFFF; | |
| text-decoration:none; | |
| display:block; | |
| } | |
| .section { | |
| background:url(img/section_bg_left.png) bottom left no-repeat #EEEEEE; | |
| font-size:12px; | |
| } | |
| .section div{ | |
| background:url(img/section_bg_right.png) right bottom no-repeat; | |
| padding:10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Панель #1 --> | |
| <h1>Открывающаяся панель используя эффект "toggle" из MooTools</h1> | |
| <br /> | |
| <br /> | |
| <h2><span><a href="#" id="toggle">Панель</a></span></h2> | |
| <div id="section" class="section"> | |
| <div>Это панель с четрьмя закругленными углами. | |
| <br /> | |
| Щелкните на заголовке чтобы спрятать её. | |
| </div> | |
| </div> | |
| <br/> | |
| <!-- Панель #2 --> | |
| <h2><span><a href="#" id="toggle2">Панель</a></span></h2> | |
| <div id="section2" class="section"> | |
| <div>Это панель с четрьмя закругленными углами. | |
| <br /> | |
| Щелкните на заголовке чтобы спрятать её. | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| </body> | |
| </html> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment