Форум

fatalstrike · #1 (**permalink**) 12.06.2013, 19:37

Пишу плагин выбора изображения для сайта, но возникли некоторые вопросы. Помогите разобраться.

Смысл таков. При создании поста на сайте пользователю предлагается выбрать 2 изображения: большое и маленькое.
Соответственно 2 кнопки: выбрать большое изображение и выбрать маленькое. Возле каждой кнопки есть изображение-превью.

Например, пользователь нажимает на кнопку "выбрать большое изображение", появляется всплывающее окно, где он выбирает изображение и нажимает кнопку "ок". Далее всплывающее окно исчезает и в превью отображается выбранное изображение.

Проблема в том, что при выборе большого изображения, заполняется и маленькое. И наоборот.

Вот накидал в песочнице простой аналог, только вместо выбора диалога с изображениями появляется простое окно с кнопкой "цвет".

http://codepen.io/fatalstrike/pen/bIfBy

Заранее спасибо за помощь

js код плагина:

(function ($) {
    $.fn.test = function (options) {
        options = $.extend({
            'color': '#777',
            'myclick': function () {
            }
        }, options);

        var $this = this;
        var color_btn = $("#button");
        var popup = $('.popup');


        $.each($this, function () {


            $(this).click(function () {
                popup.css('display', 'block');
              popup.find('p').text('Квадрат должен окрасится в цвет: ' + options.color);
            })

            color_btn.click(function() {
              popup.css('display', 'none');
                var color = options.color;
                options.myclick.call($this, color);
            });
        });

    }
})(jQuery);

$('#close').click(function() {
    $(this).parent().css('display', 'none');
});

$('#link1').test({
    color: 'red',
    myclick: function (color) {
        $('.box').css('background', color);
    }
});


$('#link2').test({
    color: 'green',
    myclick: function (color) {
        $('.box').css('background', color);
    }
});

рони · #2 (**permalink**) 12.06.2013, 20:03

fatalstrike,
Вариант...

<!DOCTYPE HTML>
<html>

    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <style type="text/css">
            <!-- .box {
                display: block;
                width: 100px;
                height: 100px;
                background: gray;
            }
            .popup {
                display: none;
                position: fixed;
                top: 20%;
                left: 40%;
                width: 200px;
                height: 100px;
                background: gray;
                padding: 10px;
            }
            -->
        </style>
    </head>

    <body>
        <div class="box"></div> <a href="#" id="link1">link1</a>
        <br> <a href="#" id="link2">link2</a>

        <div class="popup">
            <p>text</p>
            <button id="button">COLOR!</button>
            <button id="close">Close this</button>
        </div>
        <script>
            (function ($) {
                $.fn.test = function (options) {
                    options = $.extend({
                        'color': '#777',
                        'myclick': function () {}
                    }, options);

                    var $this = this;
                    var color_btn = $("#button");
                    var popup = $('.popup');


                    $.each($this, function () {
                        $(this).click(function () {
                            popup.css('display', 'block');
                            popup.find('p').text('Квадрат должен окрасится в цвет: ' + options.color);
                            color_btn.click(function () {
                                popup.css('display', 'none');
                                var color = options.color;
                                options.myclick.call($this, color);
                            });
                        })


                    });

                }
            })(jQuery);

            $('#close').click(function () {
                $(this).parent().css('display', 'none');
            });

            $('#link1').test({
                color: 'red',
                myclick: function (color) {
                    $('.box').css('background', color);
                }
            });


            $('#link2').test({
                color: 'green',
                myclick: function (color) {
                    $('.box').css('background', color);
                }
            });
        </script>
    </body>

</html>

fatalstrike · #3 (**permalink**) 13.06.2013, 15:04

А Если сделать тоже, только с двумя квадратами, то при выборе цвета для одного квадрата, окрашивается и другой

http://codepen.io/fatalstrike/pen/ixabd

Подскажите, что не так в этом случае

рони · #4 (**permalink**) 13.06.2013, 16:36

fatalstrike, попробуйте размещать пример прямо тут
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Вариант ... добавлена строка 73 и исправлена функция кнопки закрытия

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">
.box {
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background: gray;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.popup {
  display: none;
  position: fixed;
  top: 20%;
  left: 40%;
  width: 200px;
  height: 100px;
  background: gray;
  padding: 10px;
}

.pull-left
{
  float: left;
  margin-right: 10px;
}
</style>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
<div class="pull-left">
  <div class="box" id="box1">box1</div>
  <a href="#" id="link1">Выбрать цвет</a>
</div>

<div class="pull-left">
  <div class="box" id="box2">box2</div>
  <a href="#" id="link2">Выбрать цвет</a>
</div>

<div class="popup">
  <p>Выберите цвет
  <select id="color_select">
    <option value="red">Красный</option>
    <option value="green">Зеленый</option>
  </select></p>
  <div>  <button id="button">Окрасить</button>
  <button id="close">Закрыть</button></div>

</div>
<script>
            (function ($) {
                $.fn.test = function (options) {
                   var options = $.extend({
                        'myclick': function () {}
                    }, options);
                    var $this = this;
                    var color_btn = $("#button");
                    var popup = $('.popup');
                    $.each($this, function () {
                        $(this).click(function () {
                            popup.css('display', 'block');
                            color_btn.unbind();
                            color_btn.click(function () {
                                popup.css('display', 'none');
                                var color = $('#color_select').val();
                                options.myclick(color);
                            });
                        })
                    });

                }
            })(jQuery);

            $('#close').click(function () {
                $('.popup').css('display', 'none');
            });

            $('#link1').test({
                myclick: function (color) {
                    $('#box1').css('background', color);
                }
            });


            $('#link2').test({
                myclick: function (color) {
                    $('#box2').css('background', color);
                }
            });
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript