Fork me on GitHub

Widgets

Miscellaneous Utilities

Box WhBox.php

Basic Box

You use boxes to wrap up elements with a nice window effect. A Box is like a CPortlet type widget with the beauty of Bootstrap.

Basic Box

My Basic Content (you can use renderPartial here too :))
<?php $this->widget('yiiwheels.widgets.box.WhBox', array(
    'title' => 'Basic Box',
    'headerIcon' => 'icon-home',
    'content' => 'My Basic Content (you can use renderPartial here too :))'
)); ?>

Advanced Content

Wrap any content within.

Advanced Box

# First name Last name Language Hours worked
1 Mark Otto CSS 10
2 Jacob Thornton JavaScript 20
3 Stu Dent HTML 15 
<?php $box = $this->beginWidget('bootstrap.widgets.TbBox', array(
    'title' => 'Advanced Box',
    'headerIcon' => 'icon-th-list',
    // when displaying a table, if we include bootstra-widget-table class
    // the table will be 0-padding to the box
    'htmlOptions' => array('class'=>'bootstrap-widget-table')
));?>
<?php $this->renderPartial('partials/_table');?>
<?php $this->endWidget();?>

Box with actions

You can also set actions to a box, so they can nicely display on its right corner as a dropdown button -icon actions on the way :)

Heads Up! Now you can add any type of buttons to boxes

test

LeftMiddleRight
 
Action 
<?php
$this->widget(
'yiiwheels.widgets.box.WhBox',
array(
    'title'         => 'test',
    'headerIcon'    => 'icon-home',
    'headerButtons' => array(
        TbHtml::buttonGroup(
            array(
                array('label' => 'Left'),
                array('label' => 'Middle'),
                array('label' => 'Right'),
            )
        ),
        '&nbsp;',
        TbHtml::buttonDropdown(
            'Action',
            array(
                array('label' => 'Action', 'url' => '#'),
                array('label' => 'Another action', 'url' => '#'),
                array('label' => 'Something else here', 'url' => '#'),
                TbHtml::menuDivider(),
                array('label' => 'Separate link', 'url' => '#'),
            )
        ),
    )
));
?>

TimeAgo WhTimeAgo.php

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago"). For more information about its jquery plugin functionality and options, please visit http://timeago.yarp.com/.

  
<?php $this->widget(
    'yiiwheels.widgets.timeago.WhTimeAgo',
    array(
        'date' => '2008-07-17T09:24:17Z'
    )
); ?>

TimeAgo Format Component WhTimeAgoFormatter.php

TimeAgo comes in two flavours: a widget and a format component. The format component differs from the widget in that it takes a UNIX_TIMESTAMP value, making it perfect to work with database values that are goign to be displayed on a grid.

TimeAgo format component requires that you configure it on your main.php config file. Check how it is configured on this site at its github source code.

1732279837= a day ago
1732366177= about a minute ago 
<?php $time = strtotime('-1 day'); ?>
<?php echo $time; ?>=
<?php echo Yii::app()->format->timeago($time); ?><br>
<?php $time = strtotime('-1 minute'); ?>
<?php echo $time; ?>=
<?php echo Yii::app()->format->timeago($time); ?>

RangeSlider WhRangeSlider.php

RangeSlider implements jQRangeSlider, A powerful slider for selecting value ranges, supporting dates and more.

Basic


Editable

Date Range with scales

<?php $this->widget(
    'yiiwheels.widgets.rangeslider.WhRangeSlider',
    array(
        'id' => 'rangesliderbasictest',
        'name' => 'rangesliderbasictest',
        'delayOut' => 4000,
    )
);?>
<p>Basic</p>
<br>
<?php $this->widget(
    'yiiwheels.widgets.rangeslider.WhRangeSlider',
    array(
        'id' => 'rangeslidereditabletest',
        'name' => 'rangeslidereditabletest',
        'delayOut' => 4000,
        'type' => 'editRange'
    )
);?>
<p>Editable</p>
<?php
$months = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec");
$this->widget(
    'yiiwheels.widgets.rangeslider.WhRangeSlider',
    array(
        'id' => 'rangesliderdatetest',
        'name' => 'rangesliderdatetest',
        'delayOut' => 4000,
        'type' => 'dateRange',
        'scales' => array(array(
            'first' => 'js: function(value){return value;}',
            'end' => 'js: function(value){return value;}',
            'next' => 'js: function(value){
                var next = new Date(value);
                return new Date(next.setMonth(value.getMonth() + 1));
            }',
            'label' => 'js: function(value){
                var months = [
                    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
                    "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
                    ];
                return months[value.getMonth()];
            }',
            'format' => 'js: function(tickContainer, tickStart, tickEnd){
                tickContainer.addClass("myCustomClass");
            }'
        )),
        'pluginOptions' => array(
            'bounds' => array(
                'min' => 'js: new Date(2012, 0, 1)',
                'max' => 'js: new Date(2012, 11, 31, 12, 59, 59)'
            ),
            'defaultValues' => array(
                'min' => 'js:new Date(2012, 1, 10)',
                'max' => 'js:new Date(2012, 4, 22)'
            ),
        )
    )
);?>
<p>Date Range <small>with scales</small></p>
comments powered by Disqus