Переход от .css к jQuery css (), не работает, когда элементы добавляются на лету - PullRequest
Новая
       13

Переход от .css к jQuery css (), не работает, когда элементы добавляются на лету

0 голосов
/ 15 декабря 2011

Прежде чем вы прокомментируете это, я знаю, что лучше иметь отдельный файл CSS для удобства сопровождения.Но мне нужно использовать плагин Jcrop без CSS или изображения , все должно быть встроено в один файл croppable.js.

Проблема : css неприменяется к элементам, добавленным на лету Jcrop (некоторые divs с .jcrop-vline, .jcrop-hline и другими классами).

Что я сделал: я удалил оригинал jquery.Jcrop.cssФайл и base64, закодированные Jcrop.gif внутри оригинального Jcrop пакета.Получается croppable.js: 

$(document).ready(function() {
    var cropborder64 = "data:image/gif;base64,dasn/%£"; // Crop image (cutted)

    $(".jcrop-holder").css({"text-align" : "left"});

    $(".jcrop-vline, .jcrop-hline").css({
        "font-size"  : "0px",
        "position"   : "absolute",
        "background" : "white url(" + cropborder64 + ") top left repeat",
        "height"     : "100%",
        "width"      : "1px !important"
    });

    $(".jcrop-vline.right").css({ "right" : "0px" });
    $(".jcrop-hline.bottom").css({ "bottom" : "0px" });

    $(".jcrop-handle").css({
        "font-size"        : "1px",
        "width"            : "7px !important",
        "height"           : "7px !important",
        "border"           : "1px #eee solid",
        "background-color" : "#333"
    });

    $(".jcrop-tracker").css({ "width"  : "100%", "height" : "100%" });
    $(".custom.jcrop-vline, .custom.jcrop-hline").css({
        "background" : "yellow"
    });

    $(".custom.jcrop-handle").css({
        "border-color"          : "black",
        "background-color"      : "#C7BB00",
        "-moz-border-radius"    : "3px",
        "-webkit-border-radius" : "3px"
    });
}); // End of document.ready

И вот как я его использую: 

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="../js/jquery.Jcrop.min.js" type="text/javascript"></script>
        <script src="../js/croppable.js" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                $('img.crop').each(function() {
                    $(this).Jcrop();
                });
            }); // End of document.ready
        </script>
    </head>
    <body>
        <img class="crop" src="../images/test.jpg" alt="" />
    </body>
</html>

1 Ответ

1 голос
/ 15 декабря 2011

Я думаю, вам нужно поместить все в функцию, которая вызывается при каждом добавлении элемента.

Edit:

Примерно так: 

$(function() {
    var cropborder64 = "data:image/gif;base64,dasn/%£";

    function reload(){

        $(".jcrop-holder").css({"text-align" : "left"});

        $(".jcrop-vline, .jcrop-hline").css({
            "font-size"  : "0px",
            "position"   : "absolute",
            "background" : "white url(" + cropborder64 + ") top left repeat",
            "height"     : "100%",
            "width"      : "1px !important"
        });

        $(".jcrop-vline.right").css({ "right" : "0px" });
        $(".jcrop-hline.bottom").css({ "bottom" : "0px" });

        $(".jcrop-handle").css({
            "font-size"        : "1px",
            "width"            : "7px !important",
            "height"           : "7px !important",
            "border"           : "1px #eee solid",
            "background-color" : "#333"
        });

        $(".jcrop-tracker").css({ "width"  : "100%", "height" : "100%" });
        $(".custom.jcrop-vline, .custom.jcrop-hline").css({
            "background" : "yellow"
        });

        $(".custom.jcrop-handle").css({
            "border-color"          : "black",
            "background-color"      : "#C7BB00",
            "-moz-border-radius"    : "3px",
            "-webkit-border-radius" : "3px"
        });

    }
    reload();

    $('#addNewElementButton').on({
        click: function(){
            $('.crop').append('<img class="crop" src="../images/test.jpg" alt="" />');
            reload();
        }
    });

});
...