2

Hay imはjqueryを初めて使用し、サイズ変更可能なものを使用しようとしています。正常に動作させることはできますが、新しいサイズを戻す方法がわからないようです。新しいサイズをphp変数に設定して、DBに保存したいと思います。私はjavascriptとjqueryに慣れていないので、どんな助けでも大きな助けになるでしょう。

4

3 に答える 3

5

サイズ変更可能なプラグイン自体は、サイズを取得するためのメソッドを提供しません。jQueryコアにはこれを行うためのメソッドがすでに存在するため、同じノード上の冗長メソッドであるため、これは実装されていないと思います。

jQueryは、実行したいことに応じて、幅と高さを見つけるいくつかの方法を提供します。プレーンな幅/高さのメソッドはcss値を取得します。多くの場合、outerWidthメソッドとouterHeightメソッドを使用すると、すべての余白や境界線などを含む、ページ上の要素の計算された合計サイズが返されるため、より便利な場合があります。

例：

//Width/Height of just the element (as from css)
var w = $('.selector').width()
var h = $('.selector').height()

//Width/Height of total space the element takes up with formatting (includes border and margin)
var w = $('.selector').outerWidth()
var h = $('.selector').outerHeight()

//Width/Height of the space the content of the element takes up
var w = $('.selector').innerWidth()
var h = $('.selector').innerHeight()

編集サイズ変更可能なイベントへのメソッドの適用

サイズ変更可能なプラグインは、バインドするいくつかのイベントを提供します：作成、開始、サイズ変更、および停止。関数をバインドして、初期化時またはそれ以降の任意の時点でこれらのイベントのいずれかで呼び出されるようにすることができます。聞こえるように、要素のサイズ変更を開始すると開始イベントが発生し、要素のサイズ変更を停止すると停止イベントが発生し、サイズ変更中に要素のサイズが変更されるたびに（ピクセルごとに）サイズ変更が呼び出されます。

初期化時のバインド：

$('.selector').resizable({
    //Other options
    create : function(event,ui) {...},
    start : function(event,ui) {...},
    stop : function(event,ui) {...},
    resize : function(event,ui) {...}
});

または後で任意の時点でバインド

$('.selector').bind('resizecreate',function(event,ui) {...});
$('.selector').bind('resizestart',function(event,ui) {...});
$('.selector').bind('resizestop',function(event,ui) {...});
$('.selector').bind('resize',function(event,ui) {...});

さて、あなたの場合、2つのオプションのうちの1つをお勧めします。開始コマンドと停止コマンドをバインドして元のサイズと変更されたサイズを取得するか、サイズを変更してリアルタイムで値を処理します。

スタート/ストップパターンの例

var startW = 0;
var startH = 0;

$('.selector').resizable({
    //Other options
    start : function(event,ui) {
        startW = $(this).outerWidth();
        startH = $(this).outerHeight();
    },
    stop : function(event,ui) {
        endW = $(this).outerWidth();
        endH = $(this).outerHeight();
        alert("width changed:"+ (endW-startW) + " -- Height changed:" + (endH-endW));
    }
});

コンソールに移動するときに値を出力する例

$('.selector').resizable({
    //other options
    resize: function(event,ui) {
        console.log([$(this).outerWidth(),$(this).outerHeight()]);
    }
});

お役に立てれば

于 2011-12-12T00:47:04.993 に答える
4

これらの回答の時点では状況が異なっていた可能性がありますが、jQuery UIを使用すると、イベントやUI要素に関する情報を非常に簡単に取得できるようになります。ui変数から利用できる情報がたくさんあるので、コンソールでui変数をログに記録することを強くお勧めします。しかし、あなたの質問にもう少しよく答えるために：

$('.selector').resizable({
    stop: function (evt, ui) {
        console.log(ui.size);
    }
});

プロパティがheightとwidthのオブジェクトを生成する必要があります。これらは、サイズ変更可能なアイテムの新しい高さと幅です

これらの値のいずれかのデルタを計算したい場合は、ui.originalSizeそこの高さまたは幅のプロパティを参照することもできます。

これが他の答えよりも少し簡潔にうまくいくことを願っています

于 2013-11-18T07:00:25.750 に答える
2

divの例：

<div id="div">
    <p>this is the div i want to retrieve demensions</p>

    <p>second paragraph</p>
</div>

このJavaScriptでディメンションを取得します

var width = $("#div").css("width"),
    height =$("#div").css("height");

alert (width + ", " + height);

ディメンションをデータベースに書き戻すには、の一部として、formまたはAJAXリクエストを介して値をPOSTする必要があります。

于 2011-12-12T00:43:53.587 に答える