<!-----------------------------------引用js库--------------------------------------------------->
<script type="text/javascript"
src="你的js目录/prototype.js">
</script>
<script type="text/javascript"
src="你的js目录/rico.js">
</script>
<!-----------------------------------拖页效果--------------------------------------------------->
<!--要用到util.js-->
<!--要用到rico.css-->
<BODY οnlοad=javascript:bodyOnLoad()>
<SCRIPT>
var onloads = new Array();
function bodyOnLoad() {
new Rico.Effect.Round( null, 'roundNormal' );
new Rico.Effect.Round( null, 'roundCompact', {compact:true} );
for ( var i = 0 ; i < onloads.length ; i++ )
onloads[i]();
}
showMenuContext()
</SCRIPT>
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id=accordionExample style="BORDER-TOP: 1px solid; MARGIN-TOP: 6px">
<DIV id=panel1>
<DIV class=accordionTabTitleBar id=panel1Header>panel1</DIV>
<DIV class=accordionTabContentBox id=panel1Content>xxxxx</DIV>
</DIV>
<DIV id=panel2>
<DIV class=accordionTabTitleBar id=panel2Header>panel2</DIV>
<DIV class=accordionTabContentBox id=panel2Content>xxxxx</DIV>
</DIV>
<DIV>
<SCRIPT> onloads.push( accord ); function accord() { new Rico.Accordion( 'accordionExample', {panelHeight:227} ); } </SCRIPT>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
<!-----------------------------------点击显示,隐藏效果----------------------------------------->
<BODY>
<SCRIPT>
var saveHeight;
var showing = true;
function toggleSlide() {
if ( showing )
{ slideMenuUp(); showing = false; }
else
{ slideMenuDown(); showing = true; }
}
function slideMenuUp() {
var menu = $('demosMenu');
saveHeight = menu.offsetHeight;
menu.style.overflow = "hidden";
new Rico.Effect.Size( menu, null, 1, 120, 8 );
$('demoPanelLink').innerHTML = "显示面板";
}
function slideMenuDown() {
var menu = $('demosMenu');
new Rico.Effect.Size( menu, null, saveHeight, 120, 8, {complete:function() { $(menu).style.overflow = "visible"; }} );
$('demoPanelLink').innerHTML = "隐藏面板";
}
</SCRIPT>
<!-- I did have this as float:right but it screws up in firefox -->
<DIV style="MARGIN-LEFT: 6px"><A id=demoPanelLink
href="javascript:toggleSlide();">隐藏面板</A></DIV>
<DIV id=demosMenu οndblclick=toggleSlide()
style="MARGIN-TOP: 2px; PADDING-LEFT: 6px; MARGIN-LEFT: 2px; WIDTH: 575px; BACKGROUND-COLOR: #adba8c">
<TABLE style="MARGIN-TOP: 6px; MARGIN-BOTTOM: 6px" cellPadding=0>
<TBODY>
<TR>
<TD class=portalBox id=ajaxDemos1>
<DIV class=leftPadding><SPAN class=header>AJAX DEMOS</SPAN> <A
class=demoLinks
href="http://openrico.org/rico/demos.page?demo=rico_ajax_inner_HTML">Inner
Html</A> <A class=demoLinks
href="http://openrico.org/rico/demos.page?demo=rico_ajax_complex">Javascript
Updater</A>
</DIV>
<br><br>
</TD>
<TD class=portalBox id=ajaxDemos2>
<DIV class=leftPadding><SPAN class=header>AJAX DEMOS</SPAN> <A
class=demoLinks
href="http://openrico.org/rico/demos.page?demo=rico_ajax_inner_HTML">Inner
Html</A> <A class=demoLinks
href="http://openrico.org/rico/demos.page?demo=rico_ajax_complex">Javascript
Updater</A> <A class=demoLinks
href="http://openrico.org/rico/demos.page?demo=rico_ajax_complex">Javascript
Updater</A> <A class=demoLinks
href="http://openrico.org/rico/demos.page?demo=rico_ajax_complex">Javascript
Updater</A>
</DIV>
</TD>
<TR>
</TBODY>
</TABLE>
</DIV>
<SCRIPT>
Rico.Corner.round( 'ajaxDemos1', {corners:'tl br',bgColor:'#adba8c'} );
Rico.Corner.round( 'ajaxDemos2', {corners:'tl br',bgColor:'#adba8c'} );
</SCRIPT>
</body>
<!------------------------------------------列表拖动效果1-------------------------------------->
<!--要用到ricoDragAndDropCustomDraggable.js-->
<!--要用到util.js-->
<!--要用到ricoTests.css-->
<BODY οnlοad=javascript:bodyOnLoad()>
<SCRIPT>
var onloads = new Array();
function bodyOnLoad() {
new Rico.Effect.Round( null, 'roundNormal' );
new Rico.Effect.Round( null, 'roundCompact', {compact:true} );
for ( var i = 0 ; i < onloads.length ; i++ )
onloads[i]();
}
showMenuContext()
</SCRIPT>
<TABLE>
<TBODY>
<TR>
<TD>
<!--两个列表-->
<DIV id=exampleContainer style="WIDTH: 540px; BACKGROUND-COLOR: #e0ddb5">
<!--待拖动列表-->
<DIV id=dragBox style="DISPLAY: inline; FLOAT: left; MARGIN-BOTTOM: 8px; MARGIN-LEFT: 8px">
<SPAN class=catHeader>待拖动列表</SPAN>
<DIV class=listBox id=nameList style="OVERFLOW: auto; WIDTH: 250px; HEIGHT: 140px">
<SCRIPT>writeNameSpans()</SCRIPT>
</DIV>
<SCRIPT>createDraggables()</SCRIPT>
</DIV>
<!--存储列表-->
<DIV id=dropBox style="FLOAT: left; MARGIN-BOTTOM: 8px; MARGIN-LEFT: 8px">
<SPAN class=catHeader>存储列表</SPAN>
<DIV class=listBox id=dropZone style="OVERFLOW: auto; WIDTH: 250px; HEIGHT: 140px"></DIV>
</DIV>
<!--日志列表-->
<DIV style="CLEAR: both; MARGIN-LEFT: 8px">
<SPAN class=catHeader id=loghead>日志记录:</SPAN>
<DIV class=logBox id=logger style="MARGIN-BOTTOM: 8px; OVERFLOW: auto; WIDTH: 510px; HEIGHT: 140px"></DIV>
</DIV>
</DIV>
<SPAN class=catHeader>列表框</SPAN>
<DIV class="rc codeBox" id=codeContainer>
<DIV class=codeBox style="OVERFLOW: auto; HEIGHT: 300px">xxxxxxxxxxxxxxxxx</DIV>
</DIV>
<SCRIPT>
Rico.Corner.round( 'exampleContainer' );
Rico.Corner.round( 'codeContainer' );
dndMgr.registerDropZone( new Rico.Dropzone($('dropZone')));
</SCRIPT>
</TD></TR></TBODY></TABLE></BODY>
<!------------------------------------------列表拖动效果2-------------------------------------->
<!--要用到ricoDragAndDropCustomDraggable.js-->
<!--要用到ricoDragAndDropCustomDropzone.js-->
<!--要用到util.js-->
<!--要用到ricoTests.css-->
<BODY οnlοad=javascript:bodyOnLoad()>
<SCRIPT>
var onloads = new Array();
function bodyOnLoad() {
new Rico.Effect.Round( null, 'roundNormal' );
new Rico.Effect.Round( null, 'roundCompact', {compact:true} );
for ( var i = 0 ; i < onloads.length ; i++ )
onloads[i]();
}
showMenuContext()
</SCRIPT>
<TABLE>
<TBODY>
<TR>
<TD>
<SCRIPT src="CUSTOMDROPZONEEXAMPLE.files/ricoDragAndDropCustomDropzone.js"
type=text/javascript></SCRIPT>
<SCRIPT
src="CUSTOMDROPZONEEXAMPLE.files/ricoDragAndDropCustomDraggable.js"
type=text/javascript></SCRIPT>
<SPAN class=header>CUSTOM DROPZONE EXAMPLE </SPAN> <BR><BR>
<DIV id=exampleContainer style="BACKGROUND-COLOR: #e0ddb5">
<TABLE cellSpacing=5>
<TBODY>
<TR>
<TD vAlign=top><SPAN class=catHeader
style="MARGIN-TOP: 0px">name-list</SPAN>
<DIV class=listBox id=nameList
style="OVERFLOW: auto; WIDTH: 250px; HEIGHT: 180px; BACKGROUND-COLOR: white">
<SCRIPT>writeNameSpans()</SCRIPT>
</DIV>
<SCRIPT>createDraggables()</SCRIPT>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<TABLE cellSpacing=3 cellPadding=3>
<TBODY>
<TR>
<TD><SPAN class=catHeader id=dz1
style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px">a-g</SPAN>
<DIV class=roundMe style="WIDTH: 200px">
<DIV class=customDropZone id=dropZone1
style="OVERFLOW: auto; HEIGHT: 100px"></DIV></DIV></TD>
<TD><SPAN class=catHeader id=dz2
style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px">h-m</SPAN>
<DIV class=roundMe style="WIDTH: 200px">
<DIV class=customDropZone id=dropZone2
style="OVERFLOW: auto; HEIGHT: 100px"></DIV></DIV></TD>
<TD><SPAN class=catHeader id=dz3
style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px">n-z</SPAN>
<DIV class=roundMe style="WIDTH: 200px">
<DIV class=customDropZone id=dropZone3
style="OVERFLOW: auto; HEIGHT: 100px"></DIV>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT>
dndMgr.registerDropZone( new CustomDropzone('dropZone1', 'dz1', ['a','g']) );
dndMgr.registerDropZone( new CustomDropzone('dropZone2', 'dz2', ['h','m']) );
dndMgr.registerDropZone( new CustomDropzone('dropZone3', 'dz3', ['n','z']) );
Rico.Corner.round('exampleContainer');
new Rico.Effect.Round( 'div', 'roundMe', {color:'#c6c3de'});
CustomDraggable.removeOnDrop = true;
CustomDraggable.revereNamesOnDrop = false;
</SCRIPT>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
<!------------------------------------------对象拖动效果-------------------------------------->
<!--要用到util.js-->
<!--要用到ricoTests.css-->
<!--要用到openrico.css-->
<BODY οnlοad=javascript:bodyOnLoad()>
<SCRIPT>
var onloads = new Array();
function bodyOnLoad() {
new Rico.Effect.Round( null, 'roundNormal' );
new Rico.Effect.Round( null, 'roundCompact', {compact:true} );
for ( var i = 0 ; i < onloads.length ; i++ )
onloads[i]();
}
showMenuContext()
</SCRIPT>
<TABLE>
<TBODY>
<TR>
<TD>
<DIV
style="BORDER-RIGHT: #5b5b5b 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #5b5b5b 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #5b5b5b 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #5b5b5b 1px solid; HEIGHT: 50px">
<DIV class=box id=dragme style="BACKGROUND: #f7a673">Drag
Me</DIV></DIV><BR>
<TABLE style="MARGIN-BOTTOM: 8px" cellSpacing=3 cellPadding=3>
<TBODY>
<TR>
<TD>
<DIV class=simpleDropPanel id=droponme style="BACKGROUND: #ffd773">
<DIV class=title>Drop On Me</DIV></DIV></TD>
<TD>
<DIV class=simpleDropPanel id=droponme2 style="BACKGROUND: #c6c3de">
<DIV class=title>Drop On Me 2</DIV></DIV></TD></TR></TBODY></TABLE>
<SCRIPT>
dndMgr.registerDraggable( new Rico.Draggable('test-rico-dnd','dragme') );
dndMgr.registerDropZone( new Rico.Dropzone('droponme') );
dndMgr.registerDropZone( new Rico.Dropzone('droponme2') );
</SCRIPT>
</TD></TR></TBODY></TABLE></BODY>