1

jquery UI スライダー ( http://jqueryui.com/slider/ ) を使用しています。

サイト全体でスケーリング/ズームを行う必要があります。css スタイル - 「ズーム」を使用して IE+Chrome im でスケーリングする場合。

すべてがズーム状態で正常に動作します。問題はスライダーにあり、スライドをクリックしてもトリガーされません(親がズームされている場合)。

これが私の意味の例です - http://jsfiddle.net/8hbMx/

<style>
    .slider{
      width: 363px;;
      height: 15px;
      margin-left: 40px;
  }
    #test{
      zoom: 50%;
}
 </style>
 <div id="test">
    <div class="slider"></div>
</div>
<script>
    $('.slider').slider({
        min: 1,
        max: 10,
        width: 50,
        value: 1
    });
</script>

ズームを起動する方法は次のとおりです。

                $(window).resize(debouncer(function(e) {
                    scale_elements();
                }));

scale_elements() - 私のページのスケール ラッパー。

助けてください、ありがとう。

4

2 に答える 2

0

コンストラクターでslideandchange属性を使用して、これを試してください。slider

HTML

<div id="zoom-box">
    <div id="slider"></div>
</div>
<div id="debug"></div>  <!-- Remove for production -->

CSS

#slider {
    width: 363px;
    height: 15px;
    margin-left: 40px;
}

JavaScript

$('#slider').slider({
    min: 1,
    max: 100,
    width: 50,
    value: 100,
    slide: updateZoom,
    change: updateZoom
});

function updateZoom() {
    var scale = $('#slider').slider('value');
    $('#zoom-box').css('zoom', (scale) + '%');
    $('#debug').prepend(scale + '<br/>');  // Remove for production
}
于 2013-07-11T17:29:12.047 に答える