Skip to content
Browse files

슬라이더 모듈 샘플추가, 완료

  • Loading branch information...
1 parent 6e74b01 commit 163dd401fd11169f6c2c7733c6027c6916b74641 @chorr chorr committed Feb 23, 2012
Showing with 82 additions and 14 deletions.
  1. +36 −14 static/dot.ui.js
  2. +46 −0 test/slider.html
View
50 static/dot.ui.js
@@ -17,46 +17,47 @@ dot.UI.Slider = Backbone.View.extend({
hasMove: false,
initialize: function(options) {
+ this.max = options.max || 100;
+ this.value = options.value || 0;
this.$target = options.target;
- this.handler = options.handler;
this.render();
this.$point = $(".slider-point", this.$el);
+ this.$bar = $(".slider-bar", this.$el);
+ this.goByValue(this.value);
/* for PC Browser */
if (!this.hasTouchEvent) {
this.events["mousedown .slider-bar"] = "handle";
this.events["mousemove .slider-bar"] = "handle";
this.events["mouseup .slider-bar"] = "handle";
- this.events["mouseout .slider-bar"] = "handle";
}
this.delegateEvents(this.events);
-
},
render: function() {
this.setElement(this.template);
this.$target.html(this.$el);
return this;
},
minusHandler: function() {
- this.handler.minus();
+ this.goByValue(this.value = Math.max(0, this.value - 10));
},
plusHandler: function() {
- this.handler.plus();
+ this.goByValue(this.value = Math.min(this.value + 10, this.max));
},
handle: function(ev) {
var e = (ev.originalEvent.touches && ev.originalEvent.touches[0]) ?
ev.originalEvent.touches[0] : ev,
- offset = $(".slider-bar").offset(),
+ offset = this.$bar.offset(),
x = (e.pageX || this.lastX) - offset.left,
y = (e.pageY || this.lastY) - offset.left;
ev.preventDefault();
- ev.stopPropagation();
switch (ev.type) {
case "touchstart":
case "mousedown":
+ this.go(x);
this.hasHold = true;
this.hasMove = false;
this.lastX = x;
@@ -67,24 +68,45 @@ dot.UI.Slider = Backbone.View.extend({
case "mousemove":
if (this.hasHold) {
this.hasMove = true;
- console.log(this.$point)
- this.$point.css({
- left: x
- });
+ this.go(x);
}
this.lastX = x;
this.lastY = y;
break;
case "touchend":
case "mouseup":
- case "mouseout":
- this.hasHold = false;
- this.hasMove = false;
+ this.hasMove = this.hasHold = false;
break;
default: return;
}
+ },
+
+ go: function(x) {
+ var px = Math.round(x - this.$point.width()/2);
+ px = Math.max(0, px);
+ px = Math.min(px, this.$bar.width() - this.$point.width());
+
+ this.$point.css({
+ left: px
+ });
+ this.value = this.xToValue(px);
+ this.trigger("change", this.value);
+ },
+
+ goByValue: function(val) {
+ this.go(this.valueToX(val) + (this.$point.width()/2));
+ },
+
+ xToValue: function(px) {
+ var ratio = this.max / (this.$bar.width() - this.$point.width());
+ return Math.floor(px * ratio);
+ },
+
+ valueToX: function(val) {
+ var ratio = (this.$bar.width() - this.$point.width()) / this.max;
+ return Math.floor(val * ratio);
}
});
View
46 test/slider.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width">
+ <title>Dot.</title>
+ <link href="../static/style.css" rel="stylesheet" type="text/css">
+ <script type="text/javascript" src="../lib/jquery.js"></script>
+ <script type="text/javascript" src="../lib/underscore.js"></script>
+ <script type="text/javascript" src="../lib/backbone.js"></script>
+
+ <script type="text/javascript" src="../static/dot.ui.js"></script>
+
+ <style>
+ .item-slider {width:auto;}
+ .ui-slider {float:left;}
+ .slider-less, .slider-more {float:left;width:32px;height:32px;}
+ .slider-bar {float:left;position:relative;width:120px;height:22px;background-color:#392D2C;border:5px solid #392D2C;}
+ .slider-point {position:absolute;left:0;top:0;width:20px;height:22px;background-color:#E7E9E1;}
+ </style>
+</head>
+
+<body>
+
+ <div style="margin-top:40px">
+ <div class="item item-slider"></div>
+ <br style="clear:both" />
+ <pre id="val"></pre>
+ </div>
+
+ <script type="text/javascript">
+ $(document).ready(function() {
+ window.s = new dot.UI.Slider({
+ target: $(".item-slider"),
+ max: 50,
+ value: 25
+ });
+
+ s.on("change", function(val) {
+ $("#val").html(val);
+ });
+
+ });
+ </script>
+</body>
+</html>

0 comments on commit 163dd40

Please sign in to comment.
Something went wrong with that request. Please try again.