1. Requirements
2. Usage
3. Change log
4. Resources
5. Alternative solution

This widget encapsulates the jQuery BlockUI Plugin (Version 2.38 (29-MAR-2011)).

This plugin lets you block user interaction with the page or with a specific element on the page. Also great at displaying modal dialogs.

Requirements ¶

Yii 1.1.6 or above...

Usage ¶

• extract the widget file under .../protected/extensions
• put in a view a code blocks like the following...

<h1>Example 1: Page Blocking</h1>
<p>
This page demonstrates several ways to block the page.
Each button below activates blockUI and then makes a remote call to the server.
</p>
<?php
$widget=$this->widget('ext.blockui.JuiBlockUI');
$widget->addScriptLines(array("$(document).ajaxStop($.unblockUI);"));
$widget->addScriptLines(array(
    "function test() {",
    JuiBlockUI::ajax(array(
        'url'=>array('/blockUi/wait'),
        'cache'=>false
    )),
    "}",    
));
$widget->registerScript(CClientScript::POS_HEAD);
?>

<p>
    <input id="pageDemo1" class="demo" value="Default Message" type="submit">
    <?php $widget->addEventHandler('#pageDemo1','click',array(
        JuiBlockUI::blockUI(),
        "test();",
    ));?>
    <input id="pageDemo2" class="demo" value="Custom Message" type="submit">
    <?php $widget->addEventHandler('#pageDemo2','click',array(
        JuiBlockUI::blockUI(array(
            'message'=> '<h1><img src="'.$widget->getImage().'" /> Just a moment...</h1>'
        )),
        "test();",
    ));?>
    <input id="pageDemo3" class="demo" value="Custom Style" type="submit">
    <?php $widget->addEventHandler('#pageDemo3','click',array(
        JuiBlockUI::blockUI(array(
            'css'=>array(
                'backgroundColor'=>'#f00'
                ,'color'=> '#fff')
        )),
        "test();",
    ));?>
    <input id="pageDemo4" class="demo" value="DOM Element as Message" type="submit">
    <?php $widget->addEventHandler('#pageDemo4','click',array(
        JuiBlockUI::blockUI(array(
            'message'=> "js:$('#domMessage')"
        )),
        "test();",
    ));
    $widget->registerScript();
    ?>
</p>

<div id="domMessage" style="display: none;">
    <h1>We are processing your request.  Please be patient.</h1>
</div>

Change log ¶

Version 1.0 ¶

• initial release

Version 1.2 ¶

• added helper methods to generate javascript code
• added minified javascript file

Version 1.3 ¶

• updated javascript: Version 2.39 (23-MAY-2011)

Resources ¶

• Project page of the plugin

Alternative solution ¶

• yii-blockui