JavaScript DHTML/Rico/Pull Down
Rico Pull-Down Example
<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>Rico Pull-Down Example</title> <script src="rico21/src/rico.js" type="text/javascript"></script> <script type="text/javascript"> Rico.loadModule("Accordion","Corner"); var panel; Rico.onLoad( function() {
panel = Rico.SlidingPanel.top( $("outer_panel"), $("inner_panel"));
}); </script> <style type="text/css"> body {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
} h1 { font-size: 16pt; }
- header{
margin: 0 10px; position: relative;
}
- top-panel {
background-color : #6b795a; height: 17px; margin: 0px; padding:0px; position: relative; width: 570px; font-size: 8pt;
}
- inner_panel {
position: relative; top: 0px; background-color: #adba8c; margin:0px; border: 1px solid #6b795a;
}
- outer_panel {
overflow: hidden; position: absolute; z-index: 1; padding-left: 15px; top: 17px; width: 530px
} pre {font-size: 11px;} a img { border: none;vertical-align:top; } a {
text-decoration:none; color: Bisque;
} </style> </head> <body>
Rico Pull-Down Example
<a href="javascript:void(0);" onclick="panel.toggle(); return false;"> <img alt="code" src="examples/client/images/down_arrow.png"> View the code... </a>
Pull down demonstration
var panel = Rico.SlidingPanel.top( $("outer_panel"), $("inner_panel")); // panel.toggle();
Welcome to Rico! </body> </html> </source>