JavaScript DHTML/Rico/Pull Down — различия между версиями

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

Версия 10:02, 26 мая 2010

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">
    &nbsp;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>