关闭

rico-using

937人阅读 评论(2) 收藏 举报


<!-----------------------------------引用js库--------------------------------------------------->
  <script type="text/javascript"
       src="你的js目录/prototype.js">
  </script>
  <script type="text/javascript"
       src="你的js目录/rico.js">
  </script>
  
<!-----------------------------------拖页效果--------------------------------------------------->
<!--要用到util.js-->
<!--要用到rico.css-->
<BODY onload=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 ondblclick=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 onload=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 onload=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&nbsp;</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 onload=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>

 

 

 

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4895次
    • 积分:70
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:1篇
    • 评论:2条
    文章分类
    文章存档
    阅读排行
    最新评论