Создание Windows-подобного интерфеса при помощи jQuery UI

by Denis Tverdokhlebov

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Создание Windows-подобного интерфеса при помощи jQuery UI</title>
        <!-- Загрузка jQuery UI CSS -->
        <link rel="stylesheet" href="css/flick/jquery-ui-1.8.16.custom.css" type="text/css" />
        
        <!-- Загрузть jQuery сначала перед jQuery UI! -->
        <script src="js/jquery-1.6.2.min.js"></script>
        <script src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script>
        
        </script>
        <script>
            
        </script>
        
        <style>
        
        </style>
    </head>
    <body>
        <div id="dialog_window_minimized_container"></div>
        <div id="dialog_window_1" class="dialog_window" title="Создать новое  диалоговое  окно">
            <h3>Создать новое диалоговое окно</h3>
            <table class="dialog_form">
                <tr>
                    <th>Заголовок окна</th>
                </tr>
                <tr>
                    <td><input type="text" id="new_window_title" /></td>
                </tr>
                <tr>
                    <th>
                        Содержимое окна
                    </th>
                </tr>
                <tr>
                    <td>
                        <textarea id="new_window_content"></textarea>
                    </td>
                </tr>
                <tr>
                    <th>
                        Кнопки окна
                    </th>
                </tr>
                <tr>
                    <td id="buttonlist">
                        <input type="checkbox" id="alertbutton" /><label for="alertbutton">Предупреждение</label>
                        <input type="checkbox" id="closebutton" /><label for="closebutton">Закрыть</label>
                    </td>
                </tr>
            </table>
        </div>
        <button id="create_button">Создать новое окно</button>
    </body>
</html>

CSS

/*
 * jQuery UI CSS Framework 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit...

JavaScript

var _init = $.ui.dialog.prototype._init;
        $.ui.dialog.prototype._init = function() {
            _init.apply(this, arguments);
            
            var dialog_element = this;
            var dialog_id = this.uiDialogTitlebar.next().attr('id');
            
            this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id + 
            '-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">'+
            '<span class="ui-icon ui-icon-minusthick"></span></a>');
            
            $('#dialog_window_minimized_container').append(
                '<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' + 
                dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + 
                '<span class="ui-icon ui-icon-newwin"></div>');
                
            $('#' + dialog_id + '-minbutton').hover(function() {
                $(this).addClass('ui-state-hover');
            }, function() {
                $(this).removeClass('ui-state-hover');
            }).click(function() {
                dialog_element.close();
                $('#' + dialog_id + '_minimized').show();
            });
            
            $('#' + dialog_id + '_minimized').click(function() {
                $(this).hide();
                dialog_element.open();
            });
        }; 
$(document).ready(function() {
                $('#create_button').button().click(function() {
                    var create_dialog = $('#dialog_window_1');
                    var create_button = $(this);
                    if( create_dialog.dialog('isOpen') ) {
                        create_button.button('option', 'label', 'Создать новое окно');
                        create_dialog.dialog('close');
                    } else {
                        create_button.button('option', 'label', 'Закрыть окно');
                        create_dialog.dialog('open');
                    }
                });
        ...