Skip to content

Commit da1b83f

Browse files
author
zhangzj4
committed
original
1 parent efcea80 commit da1b83f

File tree

4 files changed

+253
-0
lines changed

4 files changed

+253
-0
lines changed

‎app.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
'use strict';
2+
3+
var app = angular.module('app', ['ionic', 'z-range']);
4+
app.controller('IndexCtrl', function ($scope) {
5+
//angular version
6+
console.log('angular version : ' + angular.version.full);
7+
8+
$scope.range={
9+
value:5,
10+
min:0,
11+
max:10000,
12+
step:1
13+
};
14+
15+
$scope.range1={
16+
value:5,
17+
min:0,
18+
max:10,
19+
step:1
20+
};
21+
22+
$scope.range2={
23+
value:50,
24+
min:0,
25+
max:100,
26+
step:10
27+
};
28+
29+
$scope.range3={
30+
value:16,
31+
min:0,
32+
max:30,
33+
step:2
34+
};
35+
36+
$scope.range4={
37+
value:5000,
38+
min:0,
39+
max:10000,
40+
step:50
41+
};
42+
43+
});

‎index.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html ng-app="app">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<title>ionic-range-input-in-android-weChat</title>
8+
<link href="http://cdn.bootcss.com/ionic/1.1.0/css/ionic.min.css" rel="stylesheet">
9+
<script src="http://cdn.bootcss.com/ionic/1.1.0/js/ionic.bundle.min.js"></script>
10+
<script src="app.js"></script>
11+
<script src="range/z-range.js"></script>
12+
</head>
13+
14+
<body ng-controller="IndexCtrl" style="text-align: center">
15+
16+
<h3>ordinary range</h3>
17+
<div class="range range-calm">
18+
<input type="range" min={{range.min}} max={{range.max}} step="100" ng-model="range.value">
19+
</div>
20+
<hr />
21+
<h3>my range</h3>
22+
<h4>{{'min:'+range1.min+' max:'+range1.max+' value:'+range1.value+' step:'+range1.step}}</h4>
23+
<z-range
24+
z-value="range1.value"
25+
z-id="1"
26+
z-min="{{range1.min}}"
27+
z-max="{{range1.max}}"
28+
z-step="{{range1.step}}"
29+
></z-range>
30+
31+
<h4>{{'min:'+range2.min+' max:'+range2.max+' value:'+range2.value+' step:'+range2.step}}</h4>
32+
<div style="width: 80%;margin: 0 auto">
33+
<z-range
34+
z-value="range2.value"
35+
z-id="2"
36+
z-min="{{range2.min}}"
37+
z-max="{{range2.max}}"
38+
z-step="{{range2.step}}"
39+
></z-range>
40+
</div>
41+
42+
<h4>{{'min:'+range3.min+' max:'+range3.max+' value:'+range3.value+' step:'+range3.step}}</h4>
43+
<div style="width: 50%;">
44+
<z-range
45+
z-value="range3.value"
46+
z-id="3"
47+
z-min="{{range3.min}}"
48+
z-max="{{range3.max}}"
49+
z-step="{{range3.step}}"
50+
></z-range>
51+
</div>
52+
53+
<h4>{{'min:'+range4.min+' max:'+range4.max+' value:'+range4.value+' step:'+range4.step}}</h4>
54+
<div style="width: 50%;margin-left: 50%">
55+
<z-range
56+
z-value="range4.value"
57+
z-id="4"
58+
z-min="{{range4.min}}"
59+
z-max="{{range4.max}}"
60+
z-step="{{range4.step}}"
61+
></z-range>
62+
</div>
63+
64+
65+
66+
67+
68+
69+
</body>
70+
</html>

‎range/z-range.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="range range-calm"
2+
style="padding:0;!important;margin-left: auto;margin-right: auto;overflow: hidden;position: relative">
3+
<ion-scroll id={{rangeId}} on-touch="onOutTouch()" ng-click="addOnClick($event)" ng-init="doInit()"
4+
on-drag="onScroll()" on-release="onRelease()" delegate-handle={{'handle'+rangeId}} has-bouncing="false"
5+
zooming="false" scrollbar-x="false" scrollbar-y="false" direction="x" style=" position: absolute; z-index:1;display: block;
6+
width: 100%;height: 43px;overflow: hidden;background-color: #e42012;opacity:0;
7+
">
8+
<div style="width: 188.679245%; height: 43px; text-align: center;background-color: #69717d;opacity:0.5; ">
9+
<div on-touch="onTouch()"
10+
style="width: 6%; height: 43px; margin-left: 47%;background-color: #e6b400;opacity:0.5;"></div>
11+
</div>
12+
</ion-scroll>
13+
<input ng-if="(min!=undefined)&&max&&(value!=undefined)" class="zRangeInput" style="margin:0;!important;padding:0;!important;opacity:1;" type="range" min={{min}}
14+
max={{max}} ng-model="value">
15+
</div>

‎range/z-range.js

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
angular.module('z-range', ['ionic'])
2+
.directive('zRange', function () {
3+
return {
4+
restrict: 'E',
5+
scope: {
6+
realValue: '=zValue',
7+
rangeId: '@zId',
8+
min: '@zMin',
9+
max: '@zMax',
10+
step:'@zStep',
11+
position: '=zPosition', //向外输出滚动百分比
12+
onReleaseCallBack: '&zOnReleaseCallback',
13+
onReleaseCallBackMark: '@zOnReleaseCallbackMark'
14+
},
15+
controller: "rangeController",
16+
templateUrl: 'range/z-range.html'
17+
};
18+
})
19+
.controller('rangeController', function ($ionicScrollDelegate, $timeout, $scope) {
20+
var mark = 1;
21+
$scope.onScroll = function () {
22+
var width = document.getElementById($scope.rangeId).clientWidth;
23+
var max = $scope.max;
24+
var min = $scope.min;
25+
$scope.position = (1 - (($ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId)
26+
.getScrollPosition().left) * 0.531241 / 0.47 / width));
27+
var newValue = (min * 1 + Math.round((max - min) * (1 - (($ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId)
28+
.getScrollPosition().left) * 0.531241 / 0.47 / width))));
29+
//console.log("nw:"+newValue+" max:"+$scope.max+" min:"+$scope.min+" with:"+width);
30+
if (!($scope.value == newValue))($scope.value = newValue);
31+
if ($scope.value < min) {
32+
$scope.value = min;
33+
}
34+
$scope.realValue=$scope.value*$scope.step;
35+
mark = 1;
36+
};
37+
$scope.onRelease = function () {
38+
39+
$ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId).scrollTo($scope.getPosition(), 0, false);
40+
41+
$ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId).freezeScroll(true);
42+
43+
if (angular.isDefined($scope.onReleaseCallBackMark)) {
44+
$scope.onReleaseCallback();
45+
//console.log($scope.onReleaseCallback);
46+
}
47+
mark = 0;
48+
};
49+
$scope.onOutTouch = function () {
50+
if ($scope.value != $scope.max && $ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId)
51+
.getScrollPosition().left == 0) {
52+
$ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId).scrollTo($scope.getPosition(), 0, false);
53+
$ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId).freezeScroll(false);
54+
}
55+
56+
};
57+
$scope.onTouch = function () {
58+
$ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId).freezeScroll(false);
59+
};
60+
$scope.getPosition = function () {
61+
var width = document.getElementById($scope.rangeId).clientWidth;
62+
var max = $scope.max;
63+
var min = $scope.min;
64+
$scope.position = ($scope.value - min * 1) / (max - min);
65+
var position = ((1 - ($scope.value - min * 1) / (max - min)) * width * 0.47 / 0.53);
66+
//console.log((1 - ($scope.value - min * 1) / (max - min)) * width*0.47/0.53);
67+
return position;
68+
};
69+
$scope.doInit = function () {
70+
angular.element(document).ready(function () {
71+
mark = 0;
72+
if(angular.isUndefined($scope.step)){$scope.step=1;}
73+
$scope.max=$scope.max/$scope.step;
74+
$scope.min=$scope.min/$scope.step;
75+
$scope.value=$scope.realValue/$scope.step;
76+
77+
$ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId).scrollTo($scope.getPosition(), 0, false);
78+
$ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId).freezeScroll(true);
79+
//当max过大时，比如3000，range初始化时会出现同步问题，这里微调value，触发双向绑定，使range同步
80+
//var tempValue = $scope.value;
81+
//$scope.value = $scope.value * 1 + 0.01;
82+
//$timeout(function () {
83+
// $scope.value = Math.round(tempValue);
84+
//}, 0);
85+
//当max过大时，比如3000，range初始化时会出现同步问题，这里微调value，触发双向绑定，使range同步
86+
});
87+
};
88+
$scope.addOnClick = function (event) {
89+
var width = document.getElementById($scope.rangeId).clientWidth;
90+
var max = $scope.max;
91+
var min = $scope.min;
92+
var el = document.getElementById($scope.rangeId);
93+
for (var lx = 0, ly = 0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
94+
$scope.value = Math.round((event.x - lx) / width * (max - min) + min * 1);
95+
if ($scope.value < min) {
96+
$scope.value = min;
97+
}
98+
if ($scope.value > max) {
99+
$scope.value = max;
100+
}
101+
$ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId).scrollTo($scope.getPosition(), 0, false);
102+
};
103+
104+
$scope.$watch('value', function () {
105+
if (mark == 0) {
106+
var max = $scope.max;
107+
var min = $scope.min;
108+
if ($scope.value * 1 < min * 1) {
109+
$scope.value = min;
110+
}
111+
if ($scope.value * 1 > max * 1) {
112+
$scope.value = max;
113+
}
114+
$ionicScrollDelegate.$getByHandle('handle' + $scope.rangeId).scrollTo($scope.getPosition(), 0, false);
115+
$scope.realValue=$scope.value*$scope.step;
116+
}
117+
});
118+
119+
$scope.$watch('realValue', function () {
120+
if (mark == 0) {
121+
$scope.value=$scope.realValue/$scope.step;
122+
}
123+
});
124+
125+
});

0 commit comments

Comments
 (0)