示例#1
0
<input type="button" id="btnGo" value="Go" />
<input type="button" id="btnStop" value="Stop" />
<input type="button" id="btnBack" value="Back" />



<?php 
echo add_jquery_support('#btnGo', 'click', like_function(jquery_execute_effect('.block', 'animate', array('options' => array('left' => "+=100px"), 'speed' => 2000))));
?>

<?php 
echo add_jquery_support('#btnStop', 'click', like_function(jquery_execute_effect('.block', 'stop')));
?>

<?php 
echo add_jquery_support('#btnBack', 'click', like_function(jquery_execute_effect('.block', 'animate', array('options' => array('left' => "-=100px"), 'speed' => 2000))));
?>

<div class="block" style="background-color:#AABBCC;height:60px;left:0;margin:5px;position:absolute;width:60px;">
  <br>
</div>
示例#2
0
ui_add_effects_support('bounce');
use_helper('ysUtil');
?>
<style type="text/css">
  #tabs { margin-top: 1em; }
  #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
</style>


<?php 
echo ui_link_button(array('id' => 'btnTabsListener', 'value' => 'Listener'));
?>
<br><br>
<div class="demo">
<?php 
ui_tabs_init_panel('tabPanelId', array('listener' => array('selector' => '#btnTabsListener', 'event' => 'click', 'after' => like_function(jquery_execute_effect('#tabPanelId', 'show'))), 'selected' => 2, 'disabled' => array(2), 'sortable' => true, 'fx' => array('opacity' => 'toggle', 'duration' => 'slow'), 'unselect' => true, 'collapsible' => false), 'style="display:none"');
?>

        <?php 
ui_tabs_init();
?>
          <?php 
ui_tab('myTab1', 'Lorem ipsum');
?>
          <?php 
ui_tab('myTab2', 'What is Lorem ipsum?');
?>
          <?php 
ui_tab(url_for('jqueryui_demo/accordion'), 'Remote', true);
?>
        <?php
示例#3
0
<?php

use_helper('ysJQueryRevolutions');
use_helper('ysJQueryUISlider');
?>

<?php 
echo ui_link_button(array('id' => 'btnSliderListener', 'value' => 'Listener'));
?>

<div class="demo">
  Slider 1:
  <br>
  <?php 
ui_slider_create('slider1', array('listener' => array('selector' => '#btnSliderListener', 'event' => 'click', 'after' => like_function(jquery_execute_effect('#slider1', 'show'))), 'change' => like_function('alert("Change Successful");')), 'style="display:none"');
?>
  <br>
  Slider 2: values [1,20,80]
  <br>
  <?php 
ui_slider_create('slider2', array('max' => 80, 'values' => array(1, 20, 80)));
?>
  <br>

  <?php 
echo ui_init_content_panel(array('style' => 'float:left; width:auto; margin:2px;'));
?>
    <?php 
ui_slider_create('sliderId0', array('orientation' => 'vertical', 'value' => 88), 'style="height:120px; float:left; margin:15px"');
?>
    <?php
示例#4
0
</div>

<?php 
echo ui_button_pane_init($type = 'single', array('btnExecuteSwitchClass' => array('value' => 'Execute Switch Class Effect')));
echo ui_button_pane_end();
?>

<?php 
echo ui_effects_switch_class('#testSwitchClass', array('listener' => array('selector' => '#btnExecuteSwitchClass', 'event' => 'click'), 'remove' => 'ui-widget-content', 'add' => 'ui-widget-header', 'duration' => 'slow'));
?>

<br><br><br>


<?php 
echo add_jquery_support('document', 'ready', like_function(jquery_toggle_event('#btnAnimate', array(like_function(jquery_execute_effect('.divToAnimate', 'animate', array('options' => array('backgroundColor' => '#aa0000', 'color' => '#fff', 'width' => 500), 'speed' => 1000))), like_function(jquery_execute_effect('.divToAnimate', 'animate', array('options' => array('backgroundColor' => '#fff', 'color' => '#000', 'width' => 240), 'speed' => 1000)))))));
?>

<div class="divToAnimate" style="width:250px">
    <br>
    <p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
    <br>
</div>
  
<br>

<?php 
echo ui_button_pane_init($type = 'single', array('btnAnimate' => array('value' => 'Animate')));
echo ui_button_pane_end();
?>
示例#5
0
<?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"');
?>