Показать сообщение отдельно
  #4 (permalink)  
Старый 13.06.2013, 16:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

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>

Последний раз редактировалось рони, 13.06.2013 в 16:43.
Ответить с цитированием