0

すべてのデバイスでシームレスに応答し、ウィンドウのサイズが変更されるとサイズも変更されるインターフェイスを作成したいと考えています。

この例はそこに到達しています：

$('.resizer').resizable({
    aspectRatio: true,
    handles: 'all'
});

$("#slider").slider();

JSFIDDLE

スライダー要素の幅と高さは、パーセンテージ ベースであるため、動的に調整されます。でもハンドルはそのまま！スライダーでハンドルのサイズを変更できるようにするにはどうすればよいですか? jquery-ui の css をルート化する必要がありますか?

4

1 に答える 1

0

CSS プロパティを微調整します。

.ui-slider-handle {
    top: -0.3em;
    margin-left: -0.6em;
}
.ui-slider-handle 
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 0.2em;
    cursor: default;
}

動的に実行したい場合は、次のようなものを試すことができます。

$('.ui-slider-handle').css('width',$('.lyr2').width()*0.1);

編集：

申し訳ありませんが、以前はサイズ変更ビットを取得できませんでした。上記のcss()変更ステートメントを何らかの方法で適切なサイズ変更イベント ルーチンに入れる必要があります。このようなもの：

$('.resizer').resizable({
    aspectRatio: true,
    handles: 'all',
    resize: function(ev,ui) {var siz=ui.element.width()*0.1;
    $('.ui-slider-handle').css({width:siz,height:siz} );
    }});
$("#slider").slider();

ここを参照してください: JSfiddle。topとプロパティはまだ調整する必要があるため、まだ完全ではありませんmargin-leftが、それはあなたに任せます。;-)

于 2013-08-11T10:07:32.880 に答える