Question

请查看jquery UI滑块的这个示例。我在一个页面上使用三个滑块。当我滚动滑块其他滑块也移动。我拖动一个滚动，其他两个滚动保持在同一个地方，但他们的内容滚动。示例中有很多代码。如何使用最少冗余代码的三个滑块。请看下面的示例，然后单击页面上的查看源链接。

http://jqueryui.com/slider/#side-scroll

示例代码

 $(function() {
//scrollpane parts
var scrollPane = $( ".scroll-pane" ),
  scrollContent = $( ".scroll-content" );

//build slider
var scrollbar = $( ".scroll-bar" ).slider({
  slide: function( event, ui ) {
    if ( scrollContent.width() > scrollPane.width() ) {
      scrollContent.css( "margin-left", Math.round(
        ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
      ) + "px" );
    } else {
      scrollContent.css( "margin-left", 0 );
    }
  }
});

//append icon to handle
var handleHelper = scrollbar.find( ".ui-slider-handle" )
.mousedown(function() {
  scrollbar.width( handleHelper.width() );
})
.mouseup(function() {
  scrollbar.width( "100%" );
})
.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();

//change overflow to hidden now that slider handles the scrolling
scrollPane.css( "overflow", "hidden" );

//size scrollbar and handle proportionally to scroll distance
function sizeScrollbar() {
  var remainder = scrollContent.width() - scrollPane.width();
  var proportion = remainder / scrollContent.width();
  var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
  scrollbar.find( ".ui-slider-handle" ).css({
    width: handleSize,
    "margin-left": -handleSize / 2
  });
  handleHelper.width( "" ).width( scrollbar.width() - handleSize );
}

//reset slider value based on scroll content position
function resetValue() {
  var remainder = scrollPane.width() - scrollContent.width();
  var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
    parseInt( scrollContent.css( "margin-left" ) );
  var percentage = Math.round( leftVal / remainder * 100 );
  scrollbar.slider( "value", percentage );
}

//if the slider is 100% and window gets larger, reveal content
function reflowContent() {
    var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
    var gap = scrollPane.width() - showing;
    if ( gap > 0 ) {
      scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
    }
}

//change handle position on window resize
$( window ).resize(function() {
  resetValue();
  sizeScrollbar();
  reflowContent();
});
//init scrollbar size
setTimeout( sizeScrollbar, 10 );//safari wants a timeout
    });

Answer 1

好吧，我想出来了!! .. @ mark我说的是兄弟。首先在你自己的功能中采取一切。然后在document .ready中对你的独特课程进行调用

$(document).ready(function(){
 sliderMos(".slider1"); 
  sliderMos(".slider2");
  sliderMos(".slider3");
});

这是函数的其余部分。把它称之为文件.ready。多数民众赞成

function sliderMos ( sliders ) {

//scrollpane parts
var scrollPane = $(sliders+" .scroll-pane" ),
  scrollContent = $(sliders+" .scroll-content" );
  //scrollPane.hide()
//build slider
var scrollbar = $(sliders+" .scroll-bar" ).slider({
  slide: function( event, ui ) {
    if ( scrollContent.width() > scrollPane.width() ) {
      scrollContent.css( "margin-left", Math.round(
        ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
      ) + "px" );
    } else {
      scrollContent.css( "margin-left", 0 );
    }
  }
});


//append icon to handle
var handleHelper = scrollbar.find( ".ui-slider-handle" )
.mousedown(function() {
  scrollbar.width( handleHelper.width() );
})
.mouseup(function() {
  scrollbar.width( "100%" );
})
.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();

//change overflow to hidden now that slider handles the scrolling
scrollPane.css( "overflow", "hidden" );

//size scrollbar and handle proportionally to scroll distance
function sizeScrollbar() {
  var remainder = scrollContent.width() - scrollPane.width();
  var proportion = remainder / scrollContent.width();
  var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
  scrollbar.find( ".ui-slider-handle" ).css({
    width: handleSize,
    "margin-left": -handleSize / 2
  });
  handleHelper.width( "" ).width( scrollbar.width() - handleSize );
}

//reset slider value based on scroll content position
function resetValue() {
  var remainder = scrollPane.width() - scrollContent.width();
  var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
    parseInt( scrollContent.css( "margin-left" ) );
  var percentage = Math.round( leftVal / remainder * 100 );
  scrollbar.slider( "value", percentage );
}

//if the slider is 100% and window gets larger, reveal content
function reflowContent() {
    var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
    var gap = scrollPane.width() - showing;
    if ( gap > 0 ) {
      scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
    }
}
   $(sliders+" .ui-slider-handle ").append("<span class='dragStyle'>Drag</span>")
//change handle position on window resize
$( window ).resize(function() {
  resetValue();
  sizeScrollbar();
  reflowContent();
});
//init scrollbar size
setTimeout( sizeScrollbar, 10 );//safari wants a timeout


  }

如何在页面上添加多个Jquery UI滑块

1 个答案: