Admin: 1 версия

2010-05-26T07:26:42Z

1 версия

Новая страница

==Accordion panel with controls==



<source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Accordion</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="rico21/examples/client/css/phokus/phokus.css" media="screen" rel="Stylesheet" type="text/css">


<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Accordion");
Rico.onLoad( function() {
new Rico.Accordion( $$("div.panelheader"), $$("div.panelContent"),
{panelHeight:200, selectPanelIndex: 0, stepping: Rico.Stepping.ease_in });
});
</script>
<style type="text/css">
.panel {
width: 175px;
padding: 0pt 15px 15px;
background: transparent url(examples/client/images/phokus/sb-bottom.gif) no-repeat scroll 0pt 100%;
}
.panel h3, label{
margin: 0pt 0pt 5px -15px;
padding: 15px 34px 0pt 15px;
width: 150px;
background: transparent url("rico21/examples/client/images/phokus/sb-top.gif") no-repeat scroll 0%;
color: #FFFFFF;
display: block;
font-family: "Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size: 1em;
font-weight: bold;
position: relative;
text-transform: uppercase;
cursor: pointer;
}
.panelContent {
width:170px;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="/">Accordion to openRico</a></h1>
<small></small>
</div>
<div id="main">
<div class="post">
<h2>openRico 2.0 Demos!</h2>
<div class="post-content" id="post-caption">
<p class="auth"><a href="javascript:void(0)" onclick="Rico.animate({fadeOut:$("post-caption")})">Posted by BB</a>
<span class="typo_date" title="Fri, 24 Mar 2006 12:17:00 GMT">Fri, 24 Mar 2006 12:17:00 GMT</span></p>
<p>
More openRico updates soon!
Ross Lawley
</p>
<p class="meta">Posted in <a href="#examples" rel="tag">example</a> <strong>|</strong> Tags <a href="#example" rel="tag">blog</a>, <a href="#example" rel="tag">blah</a> <strong>|</strong> <a href="#comments">261 comments</a> <strong>|</strong> <a href="#trackbacks">99 trackbacks</a></p>
</div>
</div>
</div>
<div id="sidebar">
<div id="accordionExample">
<div class="panel">
<div class="panelheader">
<h3>Categories</h3>
</div>
<div class="panelContent">
<ul id="categories">
<li><a href="#/openRico">openRico</a> <em>(10)</em></li>
<li><a href="#/family">Javscript</a> <em>(5)</em></li>
<li><a href="#/news">News</a> <em>(2)</em></li>
</ul>
</div>
</div>
<div class="panel">
<div id="search" class="panelheader">
<label for="q">Search</label>
</div>
<div id="search-results" class="panelContent">
<form action="/#example" id="sform" method="get">
<div>
<input type="text" id="q" name="qZ123" value="" size="15">
<span id="search_spinner" style="display:none"></span>
</div>
</form>
</div>
</div>
<div class="panel">
<div class="panelheader">
<h3>Tag Cloud</h3>
</div>
<div style="display: none;" class="panelContent">
<p style="overflow:hidden; text-align:center;">
<span style="font-size:191.4285714285714%"><a href="#example/js">js</a></span>
<span style="font-size:228.571428571429%"><a href="#example/web">Web 2.0</a></span>
<span style="font-size:45.7142857142857%"><a href="#example/dhtml">dHtml</a></span>
<span style="font-size:91.4285714285714%"><a href="#example/flash-fx">flash-fx</a></span>
<span style="font-size:191.4285714285714%"><a href="#example/smooth">smooth</a></span>
<span style="font-size:320.0%"><a href="#example/rico">openRico</a></span>
<span style="font-size:137.142857142857%"><a href="#example/easy">easy</a></span>
<span style="font-size:145.7142857142857%"><a href="#example/extend">extendable</a></span>
<span style="font-size:145.7142857142857%"><a href="#example/more">more</a></span>
<span style="font-size:91.4285714285714%"><a href="#example/coming">coming</a></span>
<span style="font-size:45.7142857142857%"><a href="#example/soon">soon</a></span>
<span style="font-size:191.4285714285714%"><a href="#example/support">support</a></span>
<span style="font-size:91.4285714285714%"><a href="#example/open">open</a></span>
<span style="font-size:91.4285714285714%"><a href="#example/source">source</a></span>
<span style="font-size:45.7142857142857%"><a href="#example/demo">demo</a></span>
<span style="font-size:45.7142857142857%"><a href="#example/update">update</a></span>
</p>
</div>
</div>
<div class="panel">
<div class="panelheader">
<h3>Syndicate</h3>
</div>
<div class="panelContent">
<ul>
<li><a href="/xml/rss20/feed.xml" title="Articles feed">Articles</a></li>
<li><a href="/xml/rss20/comments/feed.xml" title="Comments feed">Comments</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="badges">
<ul>
</ul>
</div>
<p><a href="http://www.openRico.org">openRico 2.0 Development</a> <a href="http://phonophunk.ru/">Theme by phokus</a></p>
</div>
</div>
</body>
</html>

</source>

==Nested accordion panel==



<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</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Accordion");
Rico.onLoad( function() {
new Rico.Accordion( $$("div.panelHeader"), $$("div.panelContent"),
{panelHeight:200,
hoverClass: "panelHover",
selectedClass: "panelSelected",
clickedClass: "panelClicked",
selectedIndex: 1
});
new Rico.Accordion( $$("div.nestedPanelHeader"), $$("div.nestedPanelContent"),
{panelHeight:100,
hoverClass: "panelHover",
selectedClass: "panelSelected",
clickedClass: "panelClicked"
});
});
</script>
<style type="text/css">
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
#accordionExample {
border : 1px solid #4f4f4f;
width: 650px;
}
.panelHeader, .nestedPanelHeader{
background-image: url("rico21/examples/client/images/example1_panelBG.png");
height: 22px;
color : #ECECEC;
font-weight : normal;
padding-left: 5px;
white-space: nowrap;
}
.panelHover {
background-image: url("rico21/examples/client/images/example1_panelBGHover.png");
height: 22px;
color : #ffffff;
padding-left: 5px;
}
.panelClicked {
background-image: url("rico21/examples/client/images/example1_panelBGClick.png");
height: 22px;
color : #ffffff;
padding-left: 5px;
}
.panelSelected {
background-image: url("rico21/examples/client/images/example1_panelBGSelected.png");
height: 22px;
color : #494949;
font-weight : bold;
padding-left: 5px;
}
.panelContent, .nestedPanelContent {
background-image: url("rico21/examples/client/images/example1_contentBG");
background: #f8f8f8;
overflow: auto;
}
#nestedaccordionExample {
margin-top: 20px;
margin-left:75px;
width: 350px;
border : 1px solid #4f4f4f;
overflow: hidden;
}
</style>
</head>
<body>
<h1 style="float:left;">Rico Nested Accordions</h1>
<p style="clear:both;">Note that this example defaults to opening the second panel of the accordion.
This is done by setting options.selectedIndex=1.</p>
<div>
<div id="accordionExample">
<div >
<div class="panelHeader">
Overview
</div>
<div class="panelContent">
<br>This example illustrates how to use the Rico.Accordion behavior to transform a set of
divs into a first class accordion component.<br><br>
The Rico.Accordion behavior makes use of the Effect.AccordionSize which is an effect that simultaneously
grows the height of one element while shrinking the height of another. The Rico.Accordion behavior adds
the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing
and hovering.
</div>
</div>
<div>
<div class="panelHeader">
More Info (nested accordion)
</div>
<div class="panelContent">
<div id="nestedaccordionExample">
<div >
<div class="nestedPanelHeader">
Overview of ContentTransition base component
</div>
<div class="nestedPanelContent">
The Accordion now derives from a base component that applies and manages
behaviors and effects. The effects can be defined at the extended class.
This approach results in a very flexible way of managing
</div>
</div>
<div >
<div class="nestedPanelHeader">
Alternative HTML
</div>
<div class="nestedPanelContent">
Since the accordion does not parse the html, it can be constructed much looser
than in previous versions. The base ContentTransition can be used to quicly build
components such as tabs, master details, and many application specific behaviors.
We will be providing examples of building your own soon.
</div>
</div>
<div>
<div class="nestedPanelHeader">
Alternative effects
</div>
<div class="nestedPanelContent">
We will be discussing alternative transition effects here.
Should be interesting.
</div>
</div>
</div>

</div>
</div>

<div>
<div class="panelHeader">
Rico Code
</div>
<div class="panelContent">
<br>To attach the accordion behavior to the accordion container div, construct a Rico.Accordion
object and pass the panel titles and contents to it. This is a bit different than the previous version,
but allows a lot more flexibilitiy. With the new Prototype Selector class it is still very easy.
<pre>new Rico.Accordion( $$("div.panelheader"), $$("div.panelContent") );
-or-
new Rico.Accordion( $$("div.panelheader"), $$("div.panelContent"),
{panelHeight:200,
hoverClass: "mdHover",
selectedClass: "mdSelected"}} );</pre>
The second example specifies the height of the accordion panels and the css classes that can be associated
with the accordion behaviors.
There are many other configuration parameters that can be specified to modify various visual aspects of the
accordion. The panelHeight is the attribute that is most commonly overridden.
</div>
</div>

<div>
<div class="panelHeader">
Important Note
</div>
<div class="panelContent">
<br>The accordion is very flexible now and can handle scrollbars on firefox through the use of some new features in Rico.
However, you do have to make sure the header and content elements passed in to the Accordion constructor have the same
elements and match up in the order they are passed. The new Accordion requires far less html attributes than Rico"s
previous versions.
<br>
</div>
</div>
</div>
</div>
</body></html>

</source>

==Put a grid control into a accordion==



<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 Accordion & Grid</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Accordion");
Rico.loadModule("LiveGrid","LiveGridMenu","greenHdg.css");
Rico.onLoad( function() {
var myData = [
[1,"Cell 1:2","Cell 1:3","Cell 1:4","Cell 1:5"],
[2,"Cell 2:2","Cell 2:3","Cell 2:4","Cell 2:5"],
[3,"Cell 3:2","Cell 3:3","Cell 3:4","Cell 3:5"],
[4,"Cell 4:2","Cell 4:3","Cell 4:4","Cell 4:5"],
[5,"Cell 5:2","Cell 5:3","Cell 5:4","Cell 5:5"],
[6,"Cell 6:2","Cell 6:3","Cell 6:4","Cell 6:5"]
];
for (var i=1; i<=3; i++) {
var opts = {
useUnformattedColWidth: false,
defaultWidth : 90,
frozenColumns: 1,
windowResize : false,
visibleRows : -4,
columnSpecs : [{Hdg:"Column 1",type:"number", decPlaces:0, ClassName:"alignright"},
{Hdg:"Column 2"},
{Hdg:"Column 3"},
{Hdg:"Column 4"},
{Hdg:"Column 5"}]
};
var buffer=new Rico.Buffer.Base();
buffer.loadRowsFromArray(myData);
var grid=new Rico.LiveGrid ("ex"+i, buffer, opts);
grid.menu=new Rico.GridMenu();
}
alert("The grids have been sized, so now initialize the accordion");
new Rico.Accordion( $$("div.panelheader"), $$("div.panelContent"),
{panelHeight:200, hoverClass: "mdHover", selectedClass: "mdSelected"});
});
</script>
<style type="text/css">
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
.panelheader {
background-color : #6b79a5;
height: 26px;
color : #ced7ef;
font-weight : normal;
border-bottom:1px solid #182052;
border-top:1px solid #BDC7E7;
font-weight : normal;
padding-left: 5px;
}
.mdHover {
background-color : #63699c;
color : #ffffff;
}
.mdSelected {
background-color : #63699c;
color : #ffffff;
font-weight : bold;

}
.panelContent {
border : 1px solid #1f669b;
border-top-width : 0px;
border-bottom-width : 0px;
font-size: smaller;
overflow: auto;
height: 200px; /* allow grids to size during initialization */
}
#accordionExample {
margin-top : 6px;
border : 1px solid #4f4f4f;
width: 500px;
}
</style>
</head>

<body>
<h1 style="float:left;">Rico Accordion & Grid</h1>
<div style="clear:both;">
<div id="accordionExample">
<div >
<div class="panelheader">
Overview
</div>
<div class="panelContent">
This example illustrates how to include LiveGrids in an Accordion.
<br>
<br>
One key is the following grid options:
<pre>
windowResize : false, /* don"t resize grids if window is resized */
visibleRows : -4, /* size grid to parent element */
</pre>
combined with the following css:
<pre>
.panelContent {
height: 200px; /* allow grids to size during initialization */
}
</pre>
</div>
</div>
<div >
<div class="panelheader">
Grid 1
</div>
<div class="panelContent">
<p class="ricoBookmark"><span id="ex1_bookmark"> </span></p>
<div id="ex1"></div>
</div>
</div>
<div>
<div class="panelheader">
Grid 2
</div>
<div class="panelContent">
<p class="ricoBookmark"><span id="ex2_bookmark"> </span></p>
<div id="ex2"></div>
</div>
</div>

<div>
<div class="panelheader">
Grid 3
</div>
<div class="panelContent">
<p class="ricoBookmark"><span id="ex3_bookmark"> </span></p>
<div id="ex3"></div>
</div>
</div>

</div>
</div>
</body></html>

</source>

==Rico Accordion with Memory==



<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</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Accordion");
Rico.onLoad( function() {
new Rico.Accordion( $$("div.panelheader"), $$("div.panelContent"),
{panelHeight:200, hoverClass: "panelHover", selectedClass: "panelSelected", cookieName: "Rico.AccCookie"});
});
</script>
<style type="text/css">
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
#accordionExample {
border : 1px solid #4f4f4f;
width: 650px;
}
.panelheader{
background-image: url("rico21/examples/client/images/example1_panelBG.png");
height: 22px;
color : #ECECEC;
font-weight : normal;
padding-left: 5px;
}
.panelHover {
background-image: url("rico21/examples/client/images/example1_panelBGHover.png");
height: 22px;
color : #ffffff;
padding-left: 5px;
}
.panelClicked {
background-image: url("rico21/examples/client/images/example1_panelBGClick.png");
height: 22px;
color : #ffffff;
padding-left: 5px;
}
.panelSelected {
background-image: url("rico21/examples/client/images/example1_panelBGSelected.png");
height: 22px;
color : #494949;
font-weight : bold;
padding-left: 5px;
}
.panelContent {
background-image: url("rico21/examples/client/images/example1_contentBG");
background: #f8f8f8;
overflow: auto;
}
</style>
</head>
<body>
<h1 style="float:left;">Rico Accordion with Memory</h1>
<p style="clear:both;">This example remembers the panel you had open the
last time you visited. Simply provide a value for options.cookieName. This option
also applies to tabbed panels. By default, the cookie value is only remembered
for the current session. To have it persist longer, also set options.cookieDays.</p>
<div style="clear:both;">
<div id="accordionExample">
<div >
<div class="panelheader">
Overview
</div>
<div class="panelContent">
<br>This example illustrates how to use the Rico.Accordion behavior to transform a set of
divs into a first class accordion component.<br><br>
The Rico.Accordion is actually a very simple component built off of Rico behaviors and effects.
It adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing
and hovering.
</div>
</div>
<div >
<div class="panelheader">
HTML Code
</div>
<div class="panelContent">
<br>The example HTML structure is an outer div that holds all of the panels. Then, each panel is just a
couple of DIVs (one for the header and one for the content) wrapped in an outer DIV. You can actually use
elements other than divs.
<pre> <div id="accordionDiv">
<div id="overviewPanel">
<div id="overviewHeader">
Overview
</div>
<div id="panel1Content">
... content text ...
</div>
</div>
</div>
</pre>
</div>
</div>
<div>
<div class="panelheader">
Rico Code
</div>
<div class="panelContent">
<br>To attach the accordion behavior to the accordion container div, construct a Rico.Accordion
object and pass the panel titles and contents to it. This is a bit different than the previous version,
but allows a lot more flexibilitiy. With the new Prototype Selector class it is still very easy.
<pre>new Rico.Accordion( $$("div.panelheader"), $$("div.panelContent") );
-or-
new Rico.Accordion( $$("div.panelheader"), $$("div.panelContent"),
{panelHeight:200,
hoverClass: "mdHover",
selectedClass: "mdSelected"}} );</pre>
The second example specifies the height of the accordion panels and the css classes that can be associated
with the accordion behaviors.
There are many other configuration parameters that can be specified to modify various visual aspects of the
accordion. The panelHeight is the attribute that is most commonly overridden.
</div>
</div>

<div>
<div class="panelheader">
Important Note
</div>
<div class="panelContent">
<br>The accordion is very flexible now and can handle scrollbars on firefox through the use of some new features in Rico.
However, you do have to make sure the header and content elements passed in to the Accordion constructor have the same
elements and match up in the order they are passed. The new Accordion requires far less html attributes than Rico"s
previous versions.
<br>
</div>
</div>

</div>
</div>
</body></html>

</source>

==Rico Basic Accordion==



<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</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Accordion");
Rico.onLoad( function() {
new Rico.Accordion( $$("div.panelheader"), $$("div.panelContent"),
{panelHeight:200, hoverClass: "mdHover", selectedClass: "mdSelected"});
});
</script>
<style type="text/css">
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
.panelheader {
background-color : #6b79a5;
height: 26px;
color : #ced7ef;
font-weight : normal;
border-bottom:1px solid #182052;
border-top:1px solid #BDC7E7;
font-weight : normal;
padding-left: 5px;
}
.mdHover {
background-color : #63699c;
color : #ffffff;
}
.mdSelected {
background-color : #63699c;
color : #ffffff;
font-weight : bold;

}
.panelContent {
border : 1px solid #1f669b;
border-top-width : 0px;
border-bottom-width : 0px;
font-size: smaller;
overflow: auto;
}
#accordionExample {
margin-top : 6px;
border : 1px solid #4f4f4f;
width: 500px;
}
</style>
</head>

<body>
<h1 style="float:left;">Rico Basic Accordion</h1>
<p style="float:right;">
<a href="http://validator.w3.org/check?uri=referer"><img style="border:none;"
src="examples/client/images/valid-html401.png"
alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</p>
<div style="clear:both;">
<div id="accordionExample">
<div >
<div class="panelheader">
Overview
</div>
<div class="panelContent">
<br>This example illustrates how to use the Rico.Accordion behavior to transform a set of
divs into a first class accordion component.<br><br>
The Rico.Accordion is actually a very simple component built off of Rico behaviors and effects.
It adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing
and hovering.
</div>
</div>
<div >
<div class="panelheader">
HTML Code
</div>
<div class="panelContent">
<br>The example HTML structure is an outer div that holds all of the panels. Then, each panel is just a
couple of DIVs (one for the header and one for the content) wrapped in an outer DIV. You can actually use
elements other than divs.
<pre> <div id="accordionDiv">
<div id="overviewPanel">
<div id="overviewHeader">
Overview
</div>
<div id="panel1Content">
... content text ...
</div>
</div>
</div>
</pre>
</div>
</div>
<div>
<div class="panelheader">
Rico Code
</div>
<div class="panelContent">
<br>To attach the accordion behavior to the accordion container div, construct a Rico.Accordion
object and pass the panel titles and contents to it. This is a bit different than the previous version,
but allows a lot more flexibilitiy. With the new Prototype Selector class it is still very easy.
<pre>
new Rico.Accordion( $$("div.panelheader"), $$("div.panelContent") );
-or-
new Rico.Accordion( $$("div.panelheader"), $$("div.panelContent"),
{panelHeight:200,
hoverClass: "mdHover",
selectedClass: "mdSelected"}} );</pre>
The second example specifies the height of the accordion panels and the css classes that can be associated
with the accordion behaviors.
There are many other configuration parameters that can be specified to modify various visual aspects of the
accordion. The panelHeight is the attribute that is most commonly overridden.
</div>
</div>

<div>
<div class="panelheader">
Important Note
</div>
<div class="panelContent">
<br>The accordion is very flexible now and can handle scrollbars on firefox through the use of some new features in Rico.
However, you do have to make sure the header and content elements passed in to the Accordion constructor have the same
elements and match up in the order they are passed. The new Accordion requires far less html attributes than Rico"s
previous versions.
<br>
</div>
</div>

</div>
</div>
</body></html>

</source>

JavaScript DHTML/Rico/Accordion - История изменений

в 10:02, 26 мая 2010

Admin: 1 версия

← Предыдущая	Версия 10:02, 26 мая 2010
(нет различий)