?>
<section id="buttonDropdowns">
<div class="page-header">
<h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>Split button dropdowns</h3>
<p>Building on the button group styles and markup, we can easily create a split button. Split
buttons feature a standard action on the left and a dropdown toggle on the right with contextual
links.</p>
<div style="padding: 10px; margin-bottom: 9px;" class="well">
<div style="margin-bottom: 9px;" class="btn-toolbar">
<?php
display_demo('splitbutton-one');
$options = array('Action', 'Another action', 'Something else here', false, 'Separated link');
echo new SplitButton('Action', array(Element::OPTIONS => $options, 'class' => 'btn-primary'));
echo new SplitButton('Danger', array(Element::OPTIONS => $options, 'class' => 'btn-danger'));
?>
</div>
<div class="btn-toolbar">
<?php
echo new SplitButton('Success', array(Element::OPTIONS => $options, 'class' => 'btn-success'));
echo new SplitButton('Info', array(Element::OPTIONS => $options, 'class' => 'btn-info'));
?>
</div>
</div>
</div>
<div class="span8">
<h3>Example code</h3>
$form->validate($_POST, $errors);
}
</pre>
</div>
<div class="span4">
<h2>Traversing a form</h2>
<p>Forms are traversed recursively. This comes handy when you need to alter a bunch of
elements, or simply display their lovely names as the example below.</p>
<?php
display_source('form-traversing-s');
?>
<div class="alert alert-info"><?php
display_demo('form-traversing');
?>
</div>
</div>
<div class="span4">
<h2>Disabling a form <small>and all of its elements</small></h2>
<p>A form and all of its elements can be easily disabled using the <code>disabled</code>
attribute:</p>
<pre class="prettyprint"><?php
$form['disabled'] = true;</pre>
</div>
</div>
display_source('popovers-rel');
?>
</div>
</div>
<div class="row">
<div class="span3">
<h2>Anchored to an element</h2>
<p>Popovers are usually anchored to an element and can follow it on the page,
wherever it goes, adjusting their box trying to stay as much visible as possible.</p>
</div>
<div class="span9">
<div class="well popover-well">
<?php
display_demo('popovers-popover');
?>
<img src="/assets/icybee.jpg" class="large-icybee" id="popover-anchor-0" style="display: block; width: 210px; margin-left: auto; opacity: .1">
</div>
<?php
display_source('popovers-popover');
?>
</div>
</div>
<div class="row">
<div class="span3">
<h2>Placement</h2>
<p>Popover elements can be placed all around their anchor: before, after, above or below.</p>
<pre class="prettyprint"><?php echo new Text(array(Element::STATE => 'error', Element::INLINE_HELP => "The value should not be blue"));</pre>
<p>
When the form is validated using its
<code>validate()</code>
method it automatically sets the state of its elements.
</p>
</div>
</div>
</div>
<br />
<div class="row">
<div class="span8"><?php
display_demo('forms-extending');
?>
</div>
<div class="span4">
<div class="form-docs">
<h3>Prepend & append inputs</h3>
<p><code>Text</code> inputs—with appended or prepended text—provide an easy way to give more
context for your inputs. Great examples include the @ sign for Twitter usernames or $ for
finances.</p>
<p>Use the <code>ADDON</code> attribute to define the add-on text, and the
<code>ADDON_POSITION</code> attribute to define its position: <code>before</code>
or <code>after</code> the text input.</p>
<hr />
<h3>Checkboxes and radios</h3>
function display_example($filename)
{
$filename = resolve_filename($filename);
display_demo($filename);
display_source($filename);
}
