JavaScript DHTML/Rico/Corner

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

Rico.Corner - using color names

   <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.Corner</title> <script src="rico21/src/rico.js" type="text/javascript"></script> <script type="text/javascript"> Rico.loadModule("Corner"); Rico.onLoad( function() {

  var roundCorners = Rico.Corner.round.bind(Rico.Corner);
  roundCorners("a0");
  roundCorners("a",{compact:true});
  roundCorners("b",{blend:false});
  roundCorners("c",{blend:false,compact:true});
  roundCorners("d",{corners:"tl"});
  roundCorners("e",{corners:"br"});
  roundCorners("f",{corners:"top"});
  roundCorners("g",{corners:"bottom"});
  roundCorners("h",{corners:"tl br"});
  roundCorners("i",{corners:"all", color: "transparent"});
  roundCorners("j",{corners:"all", compact:true, color: "transparent"});

}); </script> <style type="text/css"> h1 {

 font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
 font-size: 16pt;

} span.code {

  font-family : fixed;
  font-size   : 11px;
  color       : #4b4b4b;

} span.codeTitle {

  font-family : Courier;
  font-size   : 12px;

} span.code2 {

  font-family : Courier;
  font-size   : 11px;
  margin      : 12px;

} span.code3 {

  display      : block;
  font-family  : Courier;
  font-size    : 11px;
  padding-left : 12px;

} div.cornerSamples {

  width            : 320px;
  margin-top       : 4px;
  background-color : #ffffee;
  font-family      : Arial;
  font-size        : 11px;
  text-align       : left;

} body, p {

 font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
 font-size   : 11px;

} </style> </head>

<body>

Rico.Corner - using color names

Rico.Corner.round(element);



Rico.Corner.round(element, {compact:true});



Rico.Corner.round(element, {blend:false});



Rico.Corner.round(element, {blend:false,compact:true});



Rico.Corner.round(element, {corners:"tl"});



Rico.Corner.round(element, {corners:"br"});



Rico.Corner.round(element, {corners:"top"});



Rico.Corner.round(element, {corners:"bottom"});



Rico.Corner.round(element, {corners:"tl br"});



Rico.Corner.round(element, {color:"transparent"}



Rico.Corner.round(element, {color:"transparent",compact:true}



</body> </html>

 </source>
   
  


Rico.Corner - with option.border="#ff0000"

   <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.Corner</title> <script src="rico21/src/rico.js" type="text/javascript"></script> <script type="text/javascript"> Rico.loadModule("Corner"); Rico.onLoad( function() {

  var roundCorners = Rico.Corner.round.bind(Rico.Corner);
  roundCorners("a0",{border: "#ff0000"});
  roundCorners("a",{compact:true, border: "#ff0000"});
  roundCorners("b",{blend:false, border: "#ff0000"});
  roundCorners("c",{blend:false,compact:true, border: "#ff0000"});
  roundCorners("d",{corners:"tl", border: "#ff0000"});
  roundCorners("e",{corners:"br", border: "#ff0000"});
  roundCorners("f",{corners:"top", border: "#ff0000"});
  roundCorners("g",{corners:"bottom", border: "#ff0000"});
  roundCorners("h",{corners:"tl br", border: "#ff0000"});
  roundCorners("i",{corners:"all", color: "transparent", border: "#ff0000"});
  roundCorners("j",{corners:"all", compact:true, color: "transparent", border: "#ff0000"});

}); </script> <style type="text/css"> h1 {

 font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
 font-size: 16pt;

} span.code2 {

  font-family : Courier;
  font-size   : 11px;
  margin      : 12px;

} div.cornerSamples {

  width            : 320px;
  margin-top       : 4px;
  background-color : #ffffee;
  font-family      : Arial;
  font-size        : 11px;
  text-align       : left;

} body, p {

 font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
 font-size   : 11px;

} </style> </head>

<body>

Rico.Corner - with option.border="#ff0000"

Rico.Corner.round(element, {border: "#ff0000"});



Rico.Corner.round(element, {compact:true,border: "#ff0000"});



Rico.Corner.round(element, {blend:false,border: "#ff0000"});



Rico.Corner.round(element, {blend:false,compact:true,border: "#ff0000"});



Rico.Corner.round(element, {corners:"tl",border: "#ff0000"});



Rico.Corner.round(element, {corners:"br",border: "#ff0000"});



Rico.Corner.round(element, {corners:"top",border: "#ff0000"});



Rico.Corner.round(element, {corners:"bottom",border: "#ff0000"});



Rico.Corner.round(element, {corners:"tl br",border: "#ff0000"});



Rico.Corner.round(element, {color:"transparent",border: "#ff0000"}



Rico.Corner.round(element, {color:"transparent",compact:true,border: "#ff0000"}



</body> </html>

 </source>
   
  


Rico.Corner - without borders

   <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.Corner</title> <script src="rico21/src/rico.js" type="text/javascript"></script> <script type="text/javascript"> Rico.loadModule("Corner"); Rico.onLoad( function() {

  var roundCorners = Rico.Corner.round.bind(Rico.Corner);
  roundCorners("a0");
  roundCorners("a",{compact:true});
  roundCorners("b",{blend:false});
  roundCorners("c",{blend:false,compact:true});
  roundCorners("d",{corners:"tl"});
  roundCorners("e",{corners:"br"});
  roundCorners("f",{corners:"top"});
  roundCorners("g",{corners:"bottom"});
  roundCorners("h",{corners:"tl br"});
  roundCorners("i",{corners:"all", color: "transparent"});
  roundCorners("j",{corners:"all", compact:true, color: "transparent"});

}); </script> <style type="text/css"> h1 {

 font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
 font-size: 16pt;

} span.code {

  font-family : fixed;
  font-size   : 11px;
  color       : #4b4b4b;

} span.codeTitle {

  font-family : Courier;
  font-size   : 12px;

} span.code2 {

  font-family : Courier;
  font-size   : 11px;
  margin      : 12px;

} span.code3 {

  display      : block;
  font-family  : Courier;
  font-size    : 11px;
  padding-left : 12px;

} div.cornerSamples {

  width            : 320px;
  margin-top       : 4px;
  background-color : #ffffee;
  font-family      : Arial;
  font-size        : 11px;
  text-align       : left;

} body, p {

 font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
 font-size   : 11px;

} </style> </head>

<body>

Rico.Corner - without borders

Rico.Corner.round(element);



Rico.Corner.round(element, {compact:true});



Rico.Corner.round(element, {blend:false});



Rico.Corner.round(element, {blend:false,compact:true});



Rico.Corner.round(element, {corners:"tl"});



Rico.Corner.round(element, {corners:"br"});



Rico.Corner.round(element, {corners:"top"});



Rico.Corner.round(element, {corners:"bottom"});



Rico.Corner.round(element, {corners:"tl br"});



Rico.Corner.round(element, {color:"transparent"}



Rico.Corner.round(element, {color:"transparent",compact:true}



</body> </html>

 </source>
   
  


Select which corners should be rounded on the tabs

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Rico Tabbed Panel Example</title> <script src="rico21/src/rico.js" type="text/javascript"></script> <script type="text/javascript"> Rico.loadModule("Accordion","Corner"); Rico.onLoad( function() {

 var options={panelHeight:200, hoverClass: "panelHover", selectedClass: "panelSelected"};
 options.corners=checkQueryString();
 new Rico.TabbedPanel( $$("div.panelheader"), $$("div.panelContent"), options);

}); function checkQueryString() {

 var inputs=document.getElementsByTagName("input");
 var s=window.location.search;
 var i=s.indexOf("corner=");
 if (i >= 0) {
   s=s.slice(i+7);
   var i=s.indexOf("&");
   if (i >= 0) s=s.substr(0,i-1);
   for (var i=0; i<inputs.length; i++)
     if (inputs[i].value==s) inputs[i].checked=true;
 } else {
   inputs[0].checked=true;
   s="top";
 }
 for (var i=0; i<inputs.length; i++)
   inputs[i].onclick=function() { document.forms[0].submit(); };
 return s;

} </script> <style type="text/css"> body {font-family: Arial, Tahoma, Verdana;} h1 {

 font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
 font-size: 16pt;

}

  1. tabsExample {
 width: 650px;

} .panelContentContainer {

 border : 1px solid #4f4f4f;
 clear:both;

} .panelheader{

 height: 1.5em;
 color : #AAA;
 background: #D8E0F2;
 font-weight : bold;
 float: left;
 display: inline;
 margin-left: 2px;
 margin-right: 2px;
 text-align: center;
 white-space:nowrap;
 overflow:hidden;
 width: 20%;
 padding-top:3px;

} .panelHover {

 color : #666;
 cursor: pointer;

} .panelSelected {

 color : #444;
 background: #CFD4E6;
 cursor: auto;

} .panelContent {

   background: #f8f8f8;
   overflow: auto;

} input {

 margin-left: 2em;

} </style> </head> <body>

Rico Tabbed Panels #1 (XHTML)

<form method="get" action="">

Select which corners should be rounded on the tabs:
<input type="radio" name="corner" id="corner_top" value="top" /> <label for="corner_top">Both</label> <input type="radio" name="corner" id="corner_left" value="tl" /> <label for="corner_left">Left</label> <input type="radio" name="corner" id="corner_right" value="tr" /> <label for="corner_right">Right</label> <input type="radio" name="corner" id="corner_none" value="none" /> <label for="corner_none">None</label>

</form>

Overview
HTML Code
Rico Code
     
This example illustrates how to use the Rico.TabbedPanel behavior to transform a set of divs into a first class tabbed panel component.

The Rico.TabbedPanel 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 switching tabs.
    
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.
 <div id="tabContainer">
         <div id="panelHeaders">
           <div id="Header1">
             Overview
            </div>
         </div>
         <div id="panelContents">
            <div id="Content1">
             ... content text ...
            </div>
         </div>
      </div>
      
         
To attach the tabbed panel behavior to the tabbed panel container div, construct a Rico.TabbedPanel object and pass the panel titles and contents to it. With the Prototype Selector class it is very easy.
new Rico.TabbedPanel( $$("div.panelheader"), $$("div.panelContent") );
 -or-
new Rico.TabbedPanel( $$("div.panelheader"), $$("div.panelContent"), 
                      {panelHeight  : 200, 
                       hoverClass   : "mdHover",
                       selectedClass: "mdSelected"} );
   The second example specifies the height of the panels and the css classes that can be associated 
   with the tabbed panel behaviors.  
   There are many other configuration parameters that can be specified to modify various visual aspects of the
   tabbed panel. The panelHeight is the attribute that is most commonly overridden.

</body> </html>

 </source>