VPF::Создание диалогового окна - Форум программистов

JAYBE

Дата 2.5.2012, 10:00 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 220
Регистрация: 27.3.2008

Репутация: нет
Всего: 0

Добрый день!
есть таблица

Код



<table id="request_table" cellspacing=7>
    <tr>
        <td>Провайдер внешнего обучения (компания):&nbsp;</td><td style="width:100%"><input type="text"/></td>
    </tr>
    <tr>
        <td>Дата начала обучения:</td><td><input class="datepicker" type="text"/></td>
    </tr>
    <tr>
        <td>Дата окончания обучения:</td><td><input class="datepicker" type="text"/></td>
    </tr>
    <tr>
        <td>Стоимость оубчения:&nbsp;</td><td><input type="text"/></td>
    </tr>
    <tr>
        <td colspan="2">Обоснование:&nbsp;<br><textarea cols="40"></textarea></td>
    </tr>
    <tr>
        <td><input type="button" class="button" value="Отправить руководителю заявку"/></td><td><input type="button" class="button" value="Закрыть"/></td>
    </tr>
    </table>

Решил вынести в функцию чтобы она "всплывала поверх остальных элементов"

Код


function createForm($obj1, $obj2, $obj3) {
    var _object = this;
    this.config = {
        effect: 'toggle',
        speed: 0
    }
    this.test = function() {alert()}
    this.container = $obj1,
    this.init = function(config) {
        $.extend(this.config, config);
        alert(config.speed)
        _object.draw();
    },
    this.draw = function() {
        $($obj2).click(function() {
            _object.container.is(":hidden")?_object.toggling():function(){return false};
            
        })
        $($obj3).click(function() {
            _object.container.is(":hidden")?function(){return false}:_object.toggling();
        })
    }
        
    this.toggling = function() {
        this.container.is(":hidden")?$obj1.show(_object.config.speed):$obj1.hide(_object.config.speed);
    }
}

инициализация её

Код


    $form = new createForm($('#request_table'),$("div#outer>input:first"), $('#request_table input[type="button"]:last'));
    $form.init({
        effect: 'toggle',
        speed: 300
    });

Насколько верен код? Хотелось бы чтобы этот скрипт был как можно более независим.

Ожидаю комментариев как улучшить код. Натке не понимаю как мне сделать так, чтобы принимался параметр effect при вызове функции и выпонлялся в this.toggling.

Это сообщение отредактировал(а) Aliance - 3.5.2012, 15:34

JAYBE

Дата 3.5.2012, 14:58 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 220
Регистрация: 27.3.2008

Репутация: нет
Всего: 0

Решил когда-нибудь преуспеть в написании плагинов и начал с простого.
Проверьте, пожалуйста, правильность написания.
Сам псевдо-"плагин":

Код


function createForm($obj) {
    var $this = this;
    this.test = function() {
        return $this.container.position()
    }
    this.config = {
        effect: 'toggle',
        speed: 0,
        openButton: null,
        closeButton: null,
        position:"center"
    };
    this.container = $obj;
    this.init = function(config) {
        if (arguments.length>0) {
            $.extend($this.config, config);
        }
        $this.container.css("display","absolute")
        $this.draw();
        switch($this.config.position) {
        case "left":
            return $this.container.css({
            marginTop: -($this.container.height()/2)-$this.config.openButton.height()+ "px"
            });
        default: 
            return $this.container.css({marginTop: -($this.container.height()/2)-$this.config.openButton.height()+ "px"});
        }
    },
    this.draw = function() {
        $this.config.openButton.click(function() {
            $this.container.is(":hidden")?$this.toggling():function(){return false};
            
        })
        $this.config.closeButton.click(function() {
            $this.container.is(":hidden")?function(){return false}:$this.toggling();
        })
    }
    this.toggling = function() {

        
        $this.container[$this.config.effect]($this.config.speed);
    }
}

Применение:

Код


$form = new createForm($('#request_table')); //передаётся элементы для всплывающей формы
    $form.init({
        effect: "fadeToggle",
        speed: 700,
        openButton: $("div#outer>input:first"),
        closeButton: $('#request_table input[type="button"]:last'),
    });

Это сообщение отредактировал(а) Aliance - 3.5.2012, 15:36

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »