jQuery UI滑塊部件+ fancybox +縮放/縮放

Question

我使用jQuery UI滑塊（http://jqueryui.com/slider/）。

我需要在整個網站上進行縮放/縮放。 對於使用css風格 - 「縮放」在IE + Chrome中進行縮放。

所有在縮放狀態下都能正常工作，問題出現在滑塊中，滑動只是通過點擊他而不是觸發（當他的父縮放時）。

這裏是我的意思的例子 - 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（） - 我的網頁的規模包裝。

請幫忙，謝謝。

Answer 1

只是萬一有人也會面對這個問題，那我是怎麼解決它的。

我無法使用縮放工作，所以我只是關閉滑塊點擊跟蹤，並推動他只使用拖動（拖動它更正確地工作）。

關閉拖動有點複雜，我不知道怎麼做的：

   if (scale < 100) { // detect zooming 
        $('.slider').css('height', '0px'); //setting height of slider to 0, so user can't click on it 
       } 

Answer 2

試試這個，在slider構造使用slide和change屬性：

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 
}