Как добавить комментарий к изображению с помощью jQuery - PullRequest
Новая
       19

Как добавить комментарий к изображению с помощью jQuery

0 голосов
/ 28 апреля 2010

Итак, я пытаюсь повторить функциональность тегов картинок Facebook, и у меня есть функция, которая позволяет onClick создать окно и поле для комментариев.

Теперь проблема в том, что я хочу иметь возможность (без выполнения какой-либо внутренней обработки) взять входные данные из поля ввода и добавить его в некоторой форме к основной области изображения, которую они выбрали. Я также хотел бы добавить к этой области небольшое изображение, которое показывает, что комментарий есть.

Как мне это сделать?

Посмотрите код ниже для того, что у меня есть для поля для комментариев: 

<script type="text/javascript">

    $(function() {
            var tag_box = $("<div>").appendTo("body").css({
                "width": "40px",
                "height":"40px",
                "border":"4px solid #000000",
                "position":"absolute",
                "display":"none", 
                "padding":"15px"
                });

        var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});            

        $("#image-wrapper").live('click', function(e){
            tag_box.css({
                "left": e.pageX - 40,
                "top": e.pageY - 40, 
                "display": "block"
                })
            .after(comment_box.css({
                "left": e.pageX - 65,
                "top": e.pageY + 40
            }));

            });

        });


</script>
<body>    
<div align="center">  

    <img src="images/test.gif" width="760" height="182" alt="test" id="image-wrapper">

    </div>
</body>

Теперь ... всякий раз, когда пользователь нажимает ввод, информация в поле для комментариев добавляется к URL-адресу следующим образом:

.html? Comment = значение комментария #

Спасибо

Редактировать: Мой плохой ... Я пропустил HTML ... Я добавил его в тег скрипта выше.

1 Ответ

0 голосов
/ 28 апреля 2010

Возможно, это не лучшее решение, но попробуйте:) 

<script type="text/javascript">
    $(function() {

        var tag_box = $("<div class=\"comment-box\"></div>").css({
                "width": "40px",
                "height":"40px",
                "border":"4px solid #000000",
                "position":"absolute",
                "padding":"15px"
        });

        var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});            

        $("#image-wrapper").live('click', function(e){
            if($(this).parent().find('.comment-box').length === 0) {
                $(this).parent().append(tag_box).css('top',182).find('input#comment').focus();
            }
            return false;
        });
        $(".comment-box").
            live('mouseenter mouseleave', function(event) {
                if(event.type == 'mouseout') {
                    $(this).remove();
                }
            })
            .find('form').live('submit',function() {
                var comment = $(this).find('input#comment').val();
                var wrapperOffset = $("#image-wrapper").offset();
                var commentBlock = '<div class="comment-block" style="position:absolute;color:white; display:block; float:left; clear:both; height:auto; width:760px; background:red;">' + comment + '</div>';
                var posTop = wrapperOffset.top;
                $(commentBlock).css({
                    'width' : 760,
                    'top' : posTop,
                    'left' : wrapperOffset.left,
                    'z-Index' : 100
                });

                if($("#image-wrapper").parent().find('.comment-block').length > 0) {
                    var lastBlock = $("#image-wrapper").parent().find('.comment-block:last');
                    var lastBlockOffset = $(lastBlock).offset();
                    $(commentBlock).insertAfter($(lastBlock)).css('top', lastBlockOffset.top + $(lastBlock).height() + 4);
                } else {
                    $(commentBlock).insertBefore('#image-wrapper');
                }

                $(this).parent().parent().find('.comment-box').remove();
                $(this).get(0).reset();
                return false;
            });
    });
</script>
<style>
#image_container { display:block; height:auto; width:760px;margin:0 auto; background:yellow;}
</style>
<body>
<div align="center">
    <div id="image_container">
        <img src="/images/image1.jpg" width="760" height="182" alt="test" id="image-wrapper">
    </div>
</div>
</body>

Обновление: 

<style>
#image_container { display:block; height:auto; width:760px;margin:0 auto; background:yellow;}
</style>
<body>
<div align="center">
    <div id="image_container">
        <img src="/images/image1.jpg" width="760" height="182" alt="test" id="image-wrapper">
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...