Rico Pull-Down Example
<!--
Apache License, Version 2.0
Revised from Rico 2.0 demo code.
-->
<!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>
<h1 style='float:left;'>Rico Pull-Down Example</h1>
<div id="header" style='clear:both;'>
<div id="top-panel">
<a href="javascript:void(0);" onclick="panel.toggle(); return false;">
<img alt="code" src="examples/client/images/down_arrow.png">
View the code...
</a>
</div>
<div id="outer_panel">
<div id="inner_panel">
<div style="font-size:14px">
Pull down demonstration</div>
<br><br>
<pre>
var panel = Rico.SlidingPanel.top( $('outer_panel'), $('inner_panel'));
//
panel.toggle();
</pre>
<br>
</div>
</div>
</div>
<p>Welcome to Rico!
</body>
</html>
Related examples in the same category