Thread: [phpWebApp-commits] CVS: web_app/webobjects/tabs tabs.txt,NONE,1.1 tabs1.css,NONE,1.1 tabs1.html,NON
Brought to you by:
dashohoxha
From: Dashamir H. <das...@us...> - 2003-02-23 14:23:21
|
Update of /cvsroot/phpwebapp/web_app/webobjects/tabs In directory sc8-pr-cvs1:/tmp/cvs-serv7560 Added Files: tabs.txt tabs1.css tabs1.html tabs1.js tabs1.php tabs1.txt tabs1_items.php tabs2.css tabs2.html tabs2.js tabs2.php tabs2.txt tabs2_items.php tabs3.css tabs3.html tabs3.js tabs3.php tabs3.txt tabs3_items.php Log Message: --- NEW FILE: tabs.txt --- WebObject 'tabs1' displays a horizontal menu. It is used like this: <Include SRC="{{WEBOBJ_PATH}}tabs/tabs1.html" /> <WebObject Class="tabs1" Name="su" items="{{./}}su_menu_items.php" /> The attribute 'items' is a PHP file that contains the items of the menu, like this: <? /** * The $menu_items array contains the items of the tabs1. */ $menu_items = array( "item1" => " Menu Item 1 ", "item2" => " Menu Item 2 ", "item3" => " Menu Item 3 ", "etc1" => " . . . ", "etc2" => " . . . " ); ?> The item of the menu that is selected can be retrieved like this: $selected = WebApp::getSVar("tabs1::su->selected_item"); If you need to change the look of the tabs1, then make a local copy and modify 'tabs1.css'. WebObject 'tabs2' is very similar to 'tabs1', but the styles are different. It has a tab-like view. WebObject 'tabs3' is very similar to 'tabs2', but it is vertical instead of horizontal. It usually stays on the left of the page. ToDo: It is better to have just one WebClass: 'tabs', and then add another attribute, 'style', which will determine the style of the tabs (horizontal, vertical, etc.). --- NEW FILE: tabs1.css --- .tabs1-item a { display: block; font-family: sans-serif; margin: 0; padding: 3px; color: rgb(0,0,127); background-color: #eecccc; text-transform: none; text-decoration: none; } .tabs1-item-selected a { display: block; font-family: sans-serif; margin: 0; padding: 3px; color: rgb(0,0,0); background-color: #ffaaaa; text-transform: none; text-decoration: none; } .tabs1-item a:hover { border: solid 1px #ffaaaa; border-bottom: solid 1px #eecccc; padding: 2px; } --- NEW FILE: tabs1.html --- <WebClass ID="tabs1"> <Parameter name="items" default="{{./}}tabs1_items.php" /> <table cellspacing="0" cellpadding="0" border="0"> <tr> <Repeat rs="{{obj_name}}_items"> <td class="{{class}}"> <a href="javascript: tabs1_select('{{obj_id}}', '{{item}}')"> {{label}} </a> </td> <td width="3"></td> </Repeat> </tr> </table> </WebClass> --- NEW FILE: tabs1.js --- function tabs1_select(obj_id, item) { SendEvent(obj_id, "select", "item="+item); } --- NEW FILE: tabs1.php --- <?php class tabs1 extends WebObject { function init() { $items_file = $this->params["items"]; $items_file = WebApp::replaceVars($items_file); $this->addSVar("items_file", $items_file); //set the first menu item as the selected item include $items_file; //read the menu items $first_item = key($menu_items); $this->addSVar("selected_item", $first_item); } function on_select($event_args) { $item = $event_args["item"]; $this->setSVar("selected_item", $item); } function onRender() { $this->add_items_list(); } function add_items_list() { $obj_vars = $this->getObjVars(); $obj_name = $obj_vars["obj_name"]; $obj_count = $obj_vars["obj_count"]; $rs = new EditableRS($obj_name."_items"); //read the menu items $items_file = $this->getSVar("items_file"); include $items_file; //fill the recordset $selected = $this->getSVar("selected_item"); while ( list($item, $label) = each($menu_items) ) { $css_class = ($item==$selected ? "tabs1-item-selected" : "tabs1-item"); $rec = array( "item" => $item, "label" => $label, "class" => $css_class ); $rs->addRec($rec); } //set the recordset to the page global $webPage; $webPage->addRecordset($rs); } } ?> --- NEW FILE: tabs1.txt --- WebObject 'tabs1' displays a horizontal menu. It is used like this: <Include SRC="{{WEBOBJ_PATH}}tabs1.html" /> <WebObject Class="tabs1" Name="su" items="{{./}}su_menu_items.php" /> The attribute 'items' is a PHP file that contains the items of the menu, like this: <? /** * The $menu_items array contains the items of the tabs1. */ $menu_items = array( "item1" => " Menu Item 1 ", "item2" => " Menu Item 2 ", "item3" => " Menu Item 3 ", "etc1" => " . . . ", "etc2" => " . . . " ); ?> The item of the menu that is selected can be retrieved like this: $selected = WebApp::getSVar("tabs1::su->selected_item"); If you need to change the look of the tabs1, then make a local copy and modify 'tabs1.css'. --- NEW FILE: tabs1_items.php --- <?php /** * The $menu_items array contains the items of the tabs1. */ $menu_items = array( "item1" => " Menu Item 1 ", "item2" => " Menu Item 2 ", "item3" => " Menu Item 3 ", "etc1" => " . . . ", "etc2" => " . . . " ); ?> --- NEW FILE: tabs2.css --- .tabs2-item { width: 10%; border: outset 1px #ffffff; padding: 0; margin: 0 0; } .tabs2-item-selected { width: 10%; border: inset 1px #ffffff; border-bottom: solid 1px #ffffff; padding: 0; margin: 0 0; } .tabs2-empty { border: outset 1px #ffffff; padding: 0; margin: 0 0; background-color: #dddddd; } .tabs2-item a { margin: 0; padding: 2px; display: block; font-family: sans-serif; font-size: 80%; text-align: center; text-decoration: none; color: black; background-color: #dddddd; text-transform: none; text-decoration: none; white-space: nowrap; } .tabs2-item-selected a { margin: 0; padding: 2px; display: block; font-family: sans-serif; font-size: 80%; font-weight: bold; text-align: center; text-decoration: none; color: black; background-color: #ffffff; text-transform: none; text-decoration: none; white-space: nowrap; } .tabs2-item a:hover { border: inset 1px #ffffff; border-bottom: solid 1px #ffffff; padding: 1px; } --- NEW FILE: tabs2.html --- <WebClass ID="tabs2"> <Parameter name="items" default="{{./}}{{obj_name}}_items.php" /> <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <Repeat rs="{{obj_name}}_items"> <td class="{{class}}"> <a href="javascript: tabs2_select('{{obj_id}}', '{{item}}')"> {{label}} </a> </td> </Repeat> <td class="tabs2-empty"> </td> </tr> </table> </WebClass> --- NEW FILE: tabs2.js --- function tabs2_select(obj_id, item) { SendEvent(obj_id, "select", "item="+item); } --- NEW FILE: tabs2.php --- <?php class tabs2 extends WebObject { function init() { $items_file = $this->params["items"]; $items_file = WebApp::replaceVars($items_file); $this->addSVar("items_file", $items_file); //set the first menu item as the selected item include $items_file; //read the menu items $first_item = key($menu_items); $this->addSVar("selected_item", $first_item); } function on_select($event_args) { $item = $event_args["item"]; $this->setSVar("selected_item", $item); } function onRender() { $this->add_items_list(); } function add_items_list() { $obj_vars = $this->getObjVars(); $obj_name = $obj_vars["obj_name"]; $obj_count = $obj_vars["obj_count"]; $rs = new EditableRS($obj_name."_items"); //read the menu items $items_file = $this->getSVar("items_file"); include $items_file; //fill the recordset $selected = $this->getSVar("selected_item"); while ( list($item, $label) = each($menu_items) ) { $css_class = ($item==$selected ? "tabs2-item-selected" : "tabs2-item"); $rec = array( "item" => $item, "label" => $label, "class" => $css_class ); $rs->addRec($rec); } //set the recordset to the page global $webPage; $webPage->addRecordset($rs); } } ?> --- NEW FILE: tabs2.txt --- WebObject 'tabs2' displays a tabs-like horizontal menu. It is used like this: <Include SRC="{{WEBOBJ_PATH}}tabs2.html" /> <WebObject Class="tabs2" Name="su" items="{{./}}su_menu_items.php" /> The attribute 'items' is a PHP file that contains the items of the menu, like this: <? /** * The $menu_items array contains the items of the tabs2. */ $menu_items = array( "item1" => " Menu Item 1 ", "item2" => " Menu Item 2 ", "item3" => " Menu Item 3 ", "etc1" => " . . . ", "etc2" => " . . . " ); ?> The item of the menu that is selected can be retrieved like this: $selected = WebApp::getSVar("tabs2::su->selected_item"); If you need to change the look of the tabs2, then make a local copy and modify 'tabs2.css'. --- NEW FILE: tabs2_items.php --- <?php /** * The $menu_items array contains the items of the tabs2. */ $menu_items = array( "item1" => " Menu Item 1 ", "item2" => " Menu Item 2 ", "item3" => " Menu Item 3 ", "etc1" => " . . . ", "etc2" => " . . . " ); ?> --- NEW FILE: tabs3.css --- .tabs3-table { float: left; border: none; margin: 1 7 10 1; } .tabs3-item { border: outset 1px #ffffff; padding: 0; margin: 0 0; } .tabs3-item-selected { border: outset 1px #ffffff; padding: 0; margin: 0 0; } .tabs3-item a { margin: 0; padding: 2px; display: block; font-family: sans-serif; font-size: 80%; text-align: left; text-decoration: none; color: black; background-color: #dddddd; text-transform: none; text-decoration: none; white-space: nowrap; } .tabs3-item-selected a { margin: 0; padding: 2px; display: block; font-family: sans-serif; font-size: 80%; text-align: left; text-decoration: none; color: white; font-weight: bold; background-color: #333399; text-transform: none; text-decoration: none; white-space: nowrap; } .tabs3-item a:hover { background-color: #eeeeee; } --- NEW FILE: tabs3.html --- <WebClass ID="tabs3"> <Parameter name="items" default="{{./}}{{obj_name}}_items.php" /> <table class="tabs3-table" cellspacing="0" cellpadding="0"> <Repeat rs="{{obj_name}}_items"> <tr><td class="{{class}}"> <a href="javascript: tabs3_select('{{obj_id}}', '{{item}}')"> {{label}} </a> </td></tr> </Repeat> </table> </WebClass> --- NEW FILE: tabs3.js --- function tabs3_select(obj_id, item) { SendEvent(obj_id, "select", "item="+item); } --- NEW FILE: tabs3.php --- <?php class tabs3 extends WebObject { function init() { $items_file = $this->params["items"]; $items_file = WebApp::replaceVars($items_file); $this->addSVar("items_file", $items_file); //set the first menu item as the selected item include $items_file; //read the menu items $first_item = key($menu_items); $this->addSVar("selected_item", $first_item); } function on_select($event_args) { $item = $event_args["item"]; $this->setSVar("selected_item", $item); } function onRender() { $this->add_items_list(); } function add_items_list() { $obj_vars = $this->getObjVars(); $obj_name = $obj_vars["obj_name"]; $obj_count = $obj_vars["obj_count"]; $rs = new EditableRS($obj_name."_items"); //read the menu items $items_file = $this->getSVar("items_file"); include $items_file; //fill the recordset $selected = $this->getSVar("selected_item"); while ( list($item, $label) = each($menu_items) ) { $css_class = ($item==$selected ? "tabs3-item-selected" : "tabs3-item"); $rec = array( "item" => $item, "label" => $label, "class" => $css_class ); $rs->addRec($rec); } //set the recordset to the page global $webPage; $webPage->addRecordset($rs); } } ?> --- NEW FILE: tabs3.txt --- WebObject 'tabs3' displays a tabs-like vertical menu, usually on the left side of the page. It is used like this: <Include SRC="{{WEBOBJ_PATH}}tabs3.html" /> <WebObject Class="tabs3" Name="su" items="{{./}}su_menu_items.php" /> The attribute 'items' is a PHP file that contains the items of the menu, like this: <? /** * The $menu_items array contains the items of the tabs3. */ $menu_items = array( "item1" => " Menu Item 1 ", "item2" => " Menu Item 2 ", "item3" => " Menu Item 3 ", "etc1" => " . . . ", "etc2" => " . . . " ); ?> The item of the menu that is selected can be retrieved like this: $selected = WebApp::getSVar("tabs3::su->selected_item"); If you need to change the look of the tabs3, then make a local copy and modify 'tabs3.css'. --- NEW FILE: tabs3_items.php --- <?php /** * The $menu_items array contains the items of the tabs3. */ $menu_items = array( "item1" => " Menu Item 1 ", "item2" => " Menu Item 2 ", "item3" => " Menu Item 3 ", "etc1" => " . . . ", "etc2" => " . . . " ); ?> |