master

分支 (1)

管理

管理

master

weui
/
滑块.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dodou-移动框架-滑块</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="css/weui.css">
	<link rel="stylesheet" href="css/jquery-weui.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div class="weui-slider" id="slider1">
	  <div class="weui-slider__inner">
	    <div style="width: 30%;" class="weui-slider__track"></div>
	    <div style="left: 30%;" class="weui-slider__handler"></div>
	  </div>
	  <div id="sliderValue" class="weui-slider-box__value">30</div>
	</div>


	<div class="weui-slider-box" id="slider2">
	  <div class="weui-slider" >
	    <div id="sliderInner" class="weui-slider__inner">
	      <div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>
	      <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
	    </div>
	  </div>
	  <div id="sliderValue" class="weui-slider-box__value">50</div>
	</div>


	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-weui.min.js"></script>
	<script>
	  $('#slider1').slider();
	  $('#slider2').slider();
	</script>
</body>
</html>