55 %
2.35% (Simple Toolbar)

My PHP Widget

Change title to update and save instantly!

Hello World!

I just want to say that word in <h2>

HTML Output (Run Time: 0.0003s)

<div class="jarviswidget some-cool-class" id="my-id-here" data-widget-fullscreenbutton="false" data-custom-attr="test" data-some-id="12341111">
    <header>
        <span class="widget-icon"> <i class="fa fa-check"></i> </span>
        <div class="widget-toolbar smart-form" id="toolbar-id" >
            <label class="input">
                <i class="icon-append fa fa-question-circle"></i> 
                <input type="text" placeholder="Focus to view the tooltip">
                <b class="tooltip tooltip-top-right"> <i class="fa fa-warning txt-color-teal"></i> Some helpful information</b>
            </label>
        </div>
        <div class="widget-toolbar" id="" data-cool-id="123454321">
            <div class="progress progress-striped active" rel="tooltip" data-original-title="55%" data-placement="bottom">
                <div class="progress-bar progress-bar-success" role="progressbar" style="width: 55%">55 %</div>
            </div>
        </div>
        <div class="widget-toolbar" id="" >
            <div class="label label-danger"> <i class="fa fa-arrow-up"></i> 2.35% (Simple Toolbar) </div>
        </div>
        <h2>
            My PHP Widget
        </h2>
    </header>
    <div>
        <div class="jarviswidget-editbox">
            <input class="form-control" type="text">
            <span class="note"><i class="fa fa-check text-success"></i> Change title to update and save instantly!</span>
        </div>
        <div class="widget-body">
            <div class="widget-body-toolbar">
                <div class="row">
                    <div class="col-xs-9 col-sm-5 col-md-5 col-lg-5">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            <input class="form-control" id="prepend" placeholder="Filter" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <h2>
                Hello World!
            </h2>
            <p>I just want to say that word in <h2></p>
        </div>
    </div>
</div>

Toolbar removed!!!

Change title to update and save instantly!
This is a new value using jQuery style setup.

<div class="jarviswidget jarviswidget-color-darken some-cool-class" id="my-id-here" data-widget-fullscreenbutton="false" data-custom-attr="test" data-some-id="12341111">
    <header>
        <span class="widget-icon"> <i class="fa fa-check"></i> </span>
        <h2>
            Toolbar removed!!!
        </h2>
    </header>
    <div>
        <div class="jarviswidget-editbox">
            <input class="form-control" type="text">
            <span class="note"><i class="fa fa-check text-success"></i> Change title to update and save instantly!</span>
        </div>
        <div class="widget-body">
            <div class="widget-body-toolbar">
                <div class="row">
                    <div class="col-xs-9 col-sm-5 col-md-5 col-lg-5">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            <input class="form-control" id="prepend" placeholder="Filter" type="text">
                        </div>
                    </div>
                </div>
            </div>
            This is a new value using jQuery style setup.
        </div>
    </div>
</div>

SmartUI::Widget Class

This is a basic usage of SmartUI's Widget class. If you want to know more about the real HTML layout, click here

SmartUI::Widget([$options = array(), $user_contents = array('body' = '', 'header' = '', 'color' = '')]);

Setup

$ui = new SmartUI;
$options = array("editbutton" => false);
$widget = $ui->create_widget($options);

Usage

// using standard
$widget->body = array(
    "editbox" => 'my edit box content',
    "content" => 'This is the content of my body.'
);
$widget->header = array(
    "title" => '<h2>The Title</h2>',
    "icon" => 'fa fa-check'
)

// using jQuery style
$widget->body("content", 'This is the content of my body.', function($widget) {
    // process callback here ...
    $widget->body("editbox", 'my edit box content');
})->header("title", '<h2>The Title</h2>')->header("icon", 'fa fa-check'); // chaining

Print!

$widget->print_html();

Property Reference

Below are the list of available properties for the class:

Widget::class

A string or closure that will add your custom class to the main widget container <div class="jarviswidget" ... > ... </div>

Widget::color

A string or closure that will add the color class to the main widget container <div class="jarviswidget jarviswidget-color-YOURCOLOR" ... > ... </div>. See other documentations to get the list of available SmartAdmin colors.

Widget::id

A string or closure

Widget::attr

A string, closure or array of your own custom attributes

Widget::options

An array of widget options. See available optionss in the HTML Documentation

$options = array(
    "editbutton" => true,
    "colorbutton" => true,     
    "editbutton" => true, 
    "togglebutton" => true, 
    "deletebutton" => true, 
    "fullscreenbutton" => true, 
    "custombutton" => true, 
    "collapsed" => false, 
    "sortable" => true,
    "refreshbutton" => false
);

Widget::header

A string, closure or array for the widget's header

$header = array(
    "icon" => "", 
    "class" => "", 
    "id" => "",
    "title" => "",
    "toolbar" => array( // can also be a string or closure
        array(
            "id" => "",
            "content" => "",
            "class" => "",
            "attr" => "" // can be array('data-my-attribute'=>'some-1234', 'data-id'=>'1235')
        ),
        // ... so on
    )
);

Widget::body

A string, closure or array for body.

$body = array( // can be string or closure
    "editbox" => "",
    "content" => "",
    "class" => "", // can also be an array
    "toolbar" => ""
)

Tips!

You can pass a closure and return an array (same way as passing the array directly)

$widget->body = function($w) {
    // some logic here ...
    return array(
        "editbox" => "editbox content ....",
        "content" => "<h2>Body Content here ...</h2>"
    );
};