[phpWebApp-commits] CVS: web_app/webobjects/tabs tabs.txt,NONE,1.1 tabs1.css,NONE,1.1 tabs1.html,NONE,1.1 tabs1.js,NONE,1.1 tabs1.php,NONE,1.1 tabs1.txt,NONE,1.1 tabs1_items.php,NONE,1.1 tabs2.css,NONE,1.1 tabs2.html,NONE,1.1 tabs2.js,NONE,1.1 tabs2.php,NONE,1.1 tabs2.txt,NONE,1.1 tabs2_items.php,NONE,1.1 tabs3.css,NONE,1.1 tabs3.html,NONE,1.1 tabs3.js,NONE,1.1 tabs3.php,NONE,1.1 tabs3.txt,NONE,1.1 tabs3_items.php,NONE,1.1

[Dashamir H. <das...@us...>]

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">&nbsp;</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"	=> " . . . "
	);
?>