/**
*
* @param string $id menu Id
* @param string $value teh Menu-button value
* @param array $items The menu items /
* @param string $configuration The fg-menu configuration, See the options in
* http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
*/
function ui_menu_init($id, $value, $items = array(), $configurations = array())
{
$pattern = '';
$buttoProperties = sprintf('tabindex="0" href="#%s"', $id);
$defaultButtons = array('value' => $value, 'id' => $id, 'align' => 'right', 'icon' => 'triangle-1-e', 'corner' => 'all', 'properties' => $buttoProperties);
if (isset($items['disabled'])) {
if ($items['disabled'] == true) {
$button = isset($items['button']) ? $items['button'] : array('button' => null);
$buttonDisabled = array('state' => 'disabled');
$items['button'] = is_array($button) ? array_merge($buttonDisabled, $button) : $buttonDisabled;
}
unset($items['disabled']);
}
if (isset($items['button'])) {
$buttonConfiguration = $items['button'];
$builder = isset($buttonConfiguration['builder']) ? $buttonConfiguration['builder'] : 'ui_link_button';
$pattern .= $builder(array_merge($defaultButtons, $items['button']));
unset($items['button']);
if (isset($buttonConfiguration['state']) && strtolower($buttonConfiguration['state']) == 'disabled') {
return $pattern;
}
} else {
$pattern .= ui_link_button($defaultButtons);
}
$items = $items = _get_items_from_yml($items, 'menu');
$configurations['content'] = isset($configurations['content']) ? $configurations['content'] : sprintf("\$('#%s').next().html()", $id);
$configurations = get_default_widget_configuration('app_ys_jquery_ui_fg_menu_defaults', $configurations);
$pattern .= sprintf('<div id="%sContent" class="hidden">', $id);
$pattern .= array_to_html_list($items, 'fg_menu_list_formatter');
$pattern .= '</div>';
$menuPattern = _ui_fg_menu_pattern($configurations);
$pattern .= add_jquery_support('#' . $id, 'menu', $menuPattern);
return $pattern;
}
<?php
use_helper('ysJQueryRevolutions');
use_helper('ysJQueryUIProgressbar');
use_helper('ysUtil');
echo ui_link_button(array('id' => 'btnBarListener', 'value' => 'Listener'));
?>
<div class="demo">
<br>
progressbar: <h1><span id="lblValue">80%</span></h1>
<?php
ui_progressbar_create('progressbar', array('listener' => array('selector' => '#btnBarListener', 'oneEvent' => 'click', 'before' => like_function(ui_progressbar_animate('#progressbar', 20))), 'value' => 80, 'change' => like_function("alert('Change Succesful')")), 'style="height:5px;width:50%"');
?>
<?php
echo ui_progressbar_init_animation_now('#progressbar2', 500);
?>
progressbar2: <h1>25%</h1>
<?php
ui_progressbar_create('progressbar2', array('value' => 30));
?>
</div><!-- End demo -->
<div class="demo-description">
<p>Default progress bar.</p>
</div><!-- End demo-description -->
<fieldset><legend>Actions buttons for ui.dialog</legend>
/**
* All the buttons within a button pane will have the onhover effect
* @param <type> $htmlProperties Html attributes and properties
* @param <type> $tag The tag for the button pane
* @return <type>
*/
function ui_button_pane_init($type, $buttons = array(), $htmlProperties = '', $tag = 'div')
{
$pattern = '<%s class="%s" %s>';
if ($type == 'single') {
$defaultClass = 'fg-buttonset fg-buttonset-single ui-helper-clearfix';
} elseif ($type == 'multiple') {
$defaultClass = 'fg-buttonset fg-buttonset-multi';
} else {
$defaultClass = 'fg-buttonset';
}
$defaultClass = isset($buttons['class']) ? $defaultClass . ' ' . $buttons['class'] : $defaultClass;
$pattern = sprintf($pattern, $tag, $defaultClass, $htmlProperties);
if (is_array($buttons)) {
$size = sizeof($buttons);
$i = 0;
foreach ($buttons as $id => $button) {
$button['id'] = isset($button['id']) ? $button['id'] : $id;
if ((int) $size == 1 || $type == 'none') {
$button['corner'] = isset($button['corner']) ? $button['corner'] : 'all';
}
if ($i == 0) {
$button['corner'] = isset($button['corner']) ? $button['corner'] : 'left';
}
if (++$i == $size) {
$button['corner'] = isset($button['corner']) ? $button['corner'] : 'right';
}
if (isset($button['buttonType']) && strtolower($button['buttonType']) == 'button') {
$pattern .= ui_button($button);
} else {
$pattern .= ui_link_button($button);
}
}
}
return $pattern;
}
<?php
use_helper('ysJQueryRevolutions');
use_helper('ysJQueryUIDroppable');
use_helper('ysJQueryUIDraggable');
use_helper('ysUtil');
echo ui_link_button(array('id' => 'btnDraggableListener', 'value' => 'Listener'));
?>
<div class="demo">
<div id="draggable" class="ui-widget-content" style="width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;">
<p>Drag me to my target</p>
</div>
<?php
ui_draggable_support_to('#draggable', array('listener' => array('selector' => '#btnDraggableListener', 'event' => 'click', 'before' => like_function('alert("You can drag now to target")')), 'cursorAt' => array('cursor' => 'crosshair', 'top' => -5, 'left' => -5)));
?>
<div id="noacceptable" class="ui-widget-content" style="width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;">
<p>Drag me to my target</p>
</div>
<?php
ui_draggable_support_to('#noacceptable', array('revert' => true, 'cursor' => 'move', 'cursorAt' => array('top' => -12, 'left' => -20), 'helper' => 'clone', 'helperFunction' => like_function("return \$('<div class=\"ui-widget-header\">But i\\'m no acceptable</div>')", 'event')));
?>
<div id="droppable" class="ui-widget-header" style="width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;">
<p>Drop here</p>
</div>
<?php
ui_droppable_support_to('#droppable', array('drop' => like_function("\$(this).addClass('ui-state-highlight').find('p').html('Dropped!');"), 'deactivate' => like_function('alert("Deactivete successful")'), 'accept' => '#draggable', 'activeClass' => 'ui-state-active', 'addClasses' => true, 'greedy' => true, 'tolerance' => 'touch', 'hoverClass' => 'ui-state-hover'));
?>
</div><!-- End demo -->
<?php
echo ui_button(array('value' => 'Button', 'id' => 'btnId'));
?>
<br><br>
Enable & Disable the buttons
<br>
<?php
echo ui_link_button(array('value' => 'Enable Link button', 'id' => 'enableLnkBtnId'));
echo ui_link_button(array('value' => 'Disable Link button', 'id' => 'disablelnkBtnId'));
?>
<?php
echo ui_link_button(array('value' => 'Enable button', 'id' => 'enableBtnId'));
echo ui_link_button(array('value' => 'Disable button', 'id' => 'disableBtnId'));
?>
<?php
echo add_jquery_support('#enableLnkBtnId', 'click', like_function(ui_enable_button('#lnkBtnId', 'linkEnableAndDisableToggleFunction')));
echo add_jquery_support('#disablelnkBtnId', 'click', like_function(ui_disable_link_button('#lnkBtnId')));
?>
<?php
echo add_jquery_support('#enableBtnId', 'click', like_function(ui_enable_button('#btnId')));
echo add_jquery_support('#disableBtnId', 'click', like_function(ui_disable_button('#btnId')));
?>
<br><br>
<?php
use_helper('ysJQueryRevolutions');
use_helper('ysJQueryUISelectable');
?>
<style type="text/css">
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<?php
echo ui_link_button(array('id' => 'btnSelectableListener', 'value' => 'Listener'));
?>
<div class="demo">
<p id="feedback">
You've selected: <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
</ol>
<?php
use_helper('ysJQueryRevolutions');
use_helper('ysJQueryUIAccordion');
ui_add_effects_support('bounce');
echo ui_link_button(array('id' => 'btnAccordionListener', 'value' => 'Listener'));
?>
<br><br>
<?php
ui_accordion_init('accordionId', array('listener' => array('selector' => '#btnAccordionListener', 'event' => 'click', 'after' => like_function(jquery_execute_effect('#accordionId', 'show'))), 'event' => 'click', 'fillSpace' => false, 'animated' => 'bounceslide', 'active' => '#section2', 'icons' => array('header' => 'ui-icon-plus', 'headerSelected' => 'ui-icon-minus'), 'alwaysOpen' => false, 'autoHeight' => false, 'navigation' => false), 'style="display:none"');
?>
<?php
ui_accordion_init_section('Lorem ipsum', 'id="section1"');
?>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum
</p>
<?php
ui_accordion_end_section();
?>
<?php
ui_accordion_init_section('What is Lorem ipsum?', 'id="section2"');
?>
<?php
use_helper('ysJQueryRevolutions');
use_helper('ysJQueryUIDatepicker');
ui_change_i18n('jquery-ui-i18n.js');
?>
<?php
echo ui_link_button(array('id' => 'btnDatepickerListener', 'value' => 'Listener'));
?>
<style type="text/css">
.ui-datepicker { z-index: 10000; }
</style>
<p>
Default in-line:
<?php
ui_datepicker_create('listenerDatepicker', array('listener' => array('selector' => '#btnDatepickerListener', 'event' => 'click', 'after' => like_function(ui_datepicker_regional('#listenerDatepicker', 'uk')))));
?>
</p>
<div id="datepickerDiv"></div>
<fieldset>
<legend> Example: Actions buttons for ui.datepicker </legend>
<?php
echo ui_button_pane_init($type = 'single', array('btnDestroyDatepicker' => array('value' => 'Destroy'), 'btnBuildDatepicker' => array('value' => 'Build'), 'btnDisableDatepicker' => array('value' => 'Disable'), 'btnEnableDatepicker' => array('value' => 'Enable'), 'btnGetDatepickerOption' => array('value' => 'Get option'), 'btnSetDatepickerOption' => array('value' => 'Set option'), 'btnIsDisabledDatepicker' => array('value' => 'Is disabled'), 'btnHideDatepicker' => array('value' => 'Hide'), 'btnShowDatepicker' => array('value' => 'Show'), 'btnGetDatepickerDate' => array('value' => 'Get Date'), 'btnSetDatepickerDate' => array('value' => 'Set Date'), 'btnDialogDatepicker' => array('value' => 'Dialog'), 'btnl18nDatepicker' => array('value' => 'Localizaction[es]')));
?>
