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> <p>Dropdown menu options are defined using the <code>OPTION</code> attribute, the same way options are defined for <code>select</code>, <code>TYPE_CHECKBOX_GROUP</code> or <code>TYPE_RADIO_GROUP</code> element, the twist is that <code>false</code> options are turned into separators.</p> <?php display_source('splitbutton-one'); ?> </div> </div> </section><?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') { $errors = new \ICanBoogie\Errors(); $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
<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> <p>Popover elements are automatically repositioned to follow their anchor and may change their placement according to the available space around it.</p> <p>If the there is not enough available space for the right popover it will jump to the left of the anchor.</p> </div>
</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> <p>Create checkbox groups and radio groups very easily using the <code>TYPE_CHECKBOX_GROUP</code> and <code>TYPE_RADIO_GROUP</code> special types.</p> <p>Inline checkboxes and radios are also supported. Just add <code>.inline-inputs</code> to the group element and you're done.</p> </div> </div> </div> <div class="row"> <div class="span12"><?php display_source('forms-extending'); ?> </div> </div> </section>
function display_example($filename) { $filename = resolve_filename($filename); display_demo($filename); display_source($filename); }