0

これについてコメントする前に、保守性のために別の CSS ファイルを用意する方がよいことを知っています。しかし、CSS や画像なしで Jcrop プラグインを使用する必要があります。すべてを 1 つのファイルに埋め込む必要がありcroppable.jsます。

問題は、 css がJcrop によってオンザフライで追加された要素に適用されないことです(いくつかdivsの.jcrop-vline、.jcrop-hlineおよびその他のクラス)。

私がしたこと: 元のjquery.Jcrop.cssファイルと、Jcrop.gif元の Jcrop パッケージ内でエンコードされた base64 を削除しました。結果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>
4

1 に答える 1

1

要素を追加するたびに呼び出される関数にすべてを配置する必要があると思います。

編集：

そんな感じ ：

$(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();
        }
    });

});
于 2011-12-15T10:22:45.487 に答える