네이버에서는 검색이 어려운 블로그입니다. 구글검색을 이용해 주세요.
http://stackoverflow.com/questions/9989615
http://stackoverflow.com/questions/22290350
http://demos.jquerymobile.com/1.4.2/slider/
http://www.w3schools.com/jquerymobile/jquerymobile_form_sliders.asp
필요에 맞게 수정한 소스이다.
기본으로 제공하는 값을 제거하고 내가 원하는곳에 원하는대로 넣기 위해서..
아직 shadow 를 잡아내지 못했다 ㅠㅠ
http://jsbin.com/vijuvufema/edit?html,output
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
<style>
.ui-slider-track {
width: 200px;//슬라이드 전체 길이
height: 5px !important;
}
.ui-slider-handle {
width: 31px !important;//백그라운드 이미지 크기
height: 15px !important;
top: 0%;
background: url(img/volume2.png);
}
.ui-btn {
border: 0px;
top: 3px !important;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script>
var isMobile=(typeof window.orientation!=='undefined')?true:false;
$(document).on("pagecreate","#settings", function() {
$('#slider').on("change", function(){
$('#tool_tip').html($(this).val()); //움직이는대로 값을 수정
}
});
});
$(document).ready(function() {
$('#tool_tip').html($("#slider").slider().val()); //처음값 표시
});
</head>
<body>
<div data-role="page" id="settings" data-theme="b">
<div data-role="fieldcontain">
<input type="range" name="slider" id="slider" value="60" min="0" max="100" data-highlight="true" data-mini="true" /> //기본 UI 제거
</div>
</body>
</html>
'Web Source' 카테고리의 다른 글
| How do I check if file exists in jQuery or JavaScript? (0) | 2015.07.27 |
|---|---|
| Javascript getUTCHours, getUTCDay 세계 표준시 (0) | 2015.07.21 |
| Javascript Script onload, Object.onload in Internet Explorer 6, 7 and 8 (0) | 2015.07.08 |
| Javascript Iframe Onload IE (0) | 2015.07.07 |
| Window Media Player PlayStateChange event (0) | 2015.06.24 |
