Question

这是我想要完成的事情的图像http://imgur.com/GxgTzpT。您将拖动/单击开关，它将坚持打开或关闭位置。与我发现的这个例子非常相似 - http://codepen.io/stevenfabre/pen/qpBDy。问题是在示例中拖动不适用于移动设备。

到目前为止，我见过的所有交换机示例都使用了JQuery UI，如果可能的话可以避免使用它，因为除了draggable方法之外，我不需要库中的任何其他内容。

感谢任何帮助。

编辑：

我目前使用的是JQuery和Foundation，我的目标是不再添加任何库。我的最终解决方案是将基础滑块修改为开关按钮。 http://codepen.io/anthony-dandrea/pen/XbOmoG

绝对不是一个干净的解决方案，但黑客很简单，它可以满足我的需要。如果有人知道使用这些工具或一些小型库的更好方法，请告诉我。

Answer 1

您使用的是Boostrap CSS / JS吗？如果您正在寻找轻量级解决方案并且已经在使用Bootstrap，我建议使用Bootstrap Switch。 http://www.bootstrap-switch.org/

您还可以浏览修改后的开关示例，了解如何更改其外观（如果您愿意，可以将其置于侧面）。 http://www.bootstrap-switch.org/examples.html

交换机只需要标准的jQuery而不是jQuery UI。如果你已经有了jQueryand Bootstrap，那么你可以加载bootstrap-switch.js文件并设置为go。

Answer 2

我正在使用粉底，并最终将一个可拖动的开关混在一起。

＆＃13;

// Init for foundation
$(document).foundation();

// Turns foundation range into a switch
$(document).ready(function() {
	var isDown;
	// Slider begins to move 
	$('[data-slider]').on('mousedown touchstart', function() {
		isDown = true;
	});

	// Let go of slider event
	$(document).on('mouseup touchend', function() {
		if (isDown) {
			isDown = false;
			var $switch = $('[data-slider]');
			var val = $switch.attr('data-slider');

			if (val > 50) {
				// On
				$switch.foundation('slider','set_value', 100);
			} else {
				// Off
				$switch.foundation('slider','set_value', 0);
			}
		}
	});
});

＆＃13;

body {
  padding: 3em;
}

.range-slider-handle {
  height: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css" rel="stylesheet"/>

<div class="range-slider vertical-range" data-slider data-options="vertical: true; initial: 0;">
  <span class="range-slider-handle" role="slider" tabindex="0"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

＆＃13;

如何在现代桌面和移动浏览器上使交换机可拖动/可点击

2 个答案: