Skip to content
This repository was archived by the owner on May 25, 2019. It is now read-only.

Commit 860d230

Browse files
PowerKiKiPowerKiKi
committed
Style demo to more similar to other angular-ui tools
1 parent e1eb1a3 commit 860d230

File tree

1 file changed

+84
-92
lines changed

1 file changed

+84
-92
lines changed

‎demo/index.html‎

Lines changed: 84 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,17 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
66
<title>AngularUI - Slider demo</title>
7+
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">
78
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
89
<link rel="stylesheet" href="css/slider.css">
910
<style>
10-
body {
11-
padding: 2em;
12-
}
13-
pre {
14-
border: 1px solid #999;
15-
padding: 1em;
16-
background-color: #FFE;
17-
}
1811
li {
1912
list-style-position: inside;
2013
}
2114
.sliderExample {
2215
width: 640px;
2316
padding: 2em;
24-
background-color: #f5f5f5;
25-
border: 1px solid #f0f0f0;
17+
border: 1px solid #CCC;
2618
margin: 2em;
2719
}
2820
.sliderExample > div {
@@ -45,9 +37,11 @@
4537
#blue .ui-slider-handle { border-color: #729fcf; }
4638
</style>
4739
</head>
48-
<body ng-controller="sliderDemoCtrl">
40+
<body ng-controller="sliderDemoCtrl" class="container">
4941

50-
<h1>AngularUI Slider demo</h1>
42+
<div class="page-header">
43+
<h1>Slider</h1>
44+
</div>
5145
<ol>
5246
<li>
5347
<div class="sliderExample"><a name="ex1"></a>
@@ -155,7 +149,7 @@ <h1>AngularUI Slider demo</h1>
155149
</li>
156150
<li>
157151
<div class="sliderExample"><a name="ex12"></a>
158-
<strong>Step slider with event listeners(see console log)</strong>
152+
<strong>Step slider with event listeners (see console log)</strong>
159153
<div ui-slider="slider.options" min="0" max="50" ng-model="demoVals.sliderExample1"></div>
160154
<input type="text" ng-model="demoVals.sliderExample1" />
161155

@@ -167,17 +161,15 @@ <h1>AngularUI Slider demo</h1>
167161
start: function (event, ui) { $log.info('Slider start'); },
168162
stop: function (event, ui) { $log.info('Slider stop'); }
169163
}
170-
}
171-
</pre>
164+
}</pre>
172165

173166
<p>And in markup:</p>
174167

175168
<pre>
176169
&lt;div ui-slider="slider.options"
177170
min="0"
178171
max="50"
179-
ng-model="demoVals.sliderExample1"&gt;&lt;/div&gt;
180-
</pre>
172+
ng-model="demoVals.sliderExample1"&gt;&lt;/div&gt;</pre>
181173

182174
<p>Options may also be set in in service uiSliderConfig, ie:</p>
183175
<pre>
@@ -186,19 +178,19 @@ <h1>AngularUI Slider demo</h1>
186178
start: function (event, ui) { $log.info('Slider start'); },
187179
stop: function (event, ui) { $log.info('Slider stop'); }
188180
};
189-
});
190-
</pre>
181+
});</pre>
191182
</div>
192183
</li>
193184
<li>
194185
<div class="sliderExample"><a name="ex13"></a>
195-
<strong>Slider with tick marks. Support horizontal slider bar so far. 'tick' and 'step' attributes are required.</strong>
186+
<strong>Slider with tick marks</strong>
187+
<p>Support horizontal slider bar so far. 'tick' and 'step' attributes are required.</p>
196188
<div ui-slider data-min="0" data-max="20" data-step="5" data-tick ng-model="demoVals.sliderExample13"></div>
197189
</div>
198190
</li>
199191
<li>
200192
<div class="sliderExample"><a name="ex14"></a>
201-
<strong>Slider with lower and upper bounds.</strong>
193+
<strong>Slider with lower and upper bounds</strong>
202194
<div ui-slider min="0" max="100" step="10" upper-bound="90" ng-model="demoVals.sliderExample14a">
203195
<div class="ui-slider-out-of-bounds" style="right:0; width: 10%"></div>
204196
</div>
@@ -222,7 +214,7 @@ <h1>AngularUI Slider demo</h1>
222214
</li>
223215
<li>
224216
<div class="sliderExample"><a name="ex16"></a>
225-
<strong>Slider with tip.</strong>
217+
<strong>Slider with tip</strong>
226218
<div ui-slider data-min="0" data-max="80" data-tip ng-model="demoVals.sliderExample16"></div>
227219
</div>
228220
</li>
@@ -232,82 +224,82 @@ <h1>AngularUI Slider demo</h1>
232224
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
233225
<script type="text/javascript" src="../src/slider.js"></script>
234226
<script>
235-
var app = angular.module('sliderDemoApp', ['ui.slider']);
236-
app.factory('colorpicker', function() {
237-
function hexFromRGB(r, g, b) {
238-
var hex = [r.toString(16), g.toString(16), b.toString(16)];
239-
angular.forEach(hex, function(value, key) {
240-
if (value.length === 1)
241-
hex[key] = "0" + value;
242-
});
243-
return hex.join('').toUpperCase();
244-
}
245-
return {
246-
refreshSwatch: function(r, g, b) {
247-
var color = '#' + hexFromRGB(r, g, b);
248-
angular.element('#swatch').css('background-color', color);
249-
}
250-
};
251-
});
227+
var app = angular.module('sliderDemoApp', ['ui.slider']);
228+
app.factory('colorpicker', function() {
229+
function hexFromRGB(r, g, b) {
230+
var hex = [r.toString(16), g.toString(16), b.toString(16)];
231+
angular.forEach(hex, function(value, key) {
232+
if (value.length === 1)
233+
hex[key] = "0" + value;
234+
});
235+
return hex.join('').toUpperCase();
236+
}
237+
return {
238+
refreshSwatch: function(r, g, b) {
239+
var color = '#' + hexFromRGB(r, g, b);
240+
angular.element('#swatch').css('background-color', color);
241+
}
242+
};
243+
});
252244

253-
/*
254-
// To set an option for all sliders
255-
app.factory('uiSliderConfig', function ($log) {
256-
return {
257-
start: function (event, ui) { $log.info('Event: Slider start - set with uiSliderConfig', event); },
258-
stop: function (event, ui) { $log.info('Event: Slider stop - set with uiSliderCOnfig', event); },
259-
};
260-
});
261-
*/
245+
/*
246+
// To set an option for all sliders
247+
app.factory('uiSliderConfig', function ($log) {
248+
return {
249+
start: function (event, ui) { $log.info('Event: Slider start - set with uiSliderConfig', event); },
250+
stop: function (event, ui) { $log.info('Event: Slider stop - set with uiSliderCOnfig', event); },
251+
};
252+
});
253+
*/
262254

263-
app.controller('sliderDemoCtrl', function($scope, $log, colorpicker) {
255+
app.controller('sliderDemoCtrl', function($scope, $log, colorpicker) {
264256

265-
function refreshSwatch(ev, ui) {
266-
var red = $scope.colorpicker.red,
267-
green = $scope.colorpicker.green,
268-
blue = $scope.colorpicker.blue;
269-
colorpicker.refreshSwatch(red, green, blue);
270-
}
257+
function refreshSwatch(ev, ui) {
258+
var red = $scope.colorpicker.red,
259+
green = $scope.colorpicker.green,
260+
blue = $scope.colorpicker.blue;
261+
colorpicker.refreshSwatch(red, green, blue);
262+
}
271263

272-
// Slider options with event handlers
273-
$scope.slider = {
274-
'options': {
275-
start: function(event, ui) {
276-
$log.info('Event: Slider start - set with slider options', event);
277-
},
278-
stop: function(event, ui) {
279-
$log.info('Event: Slider stop - set with slider options', event);
280-
}
281-
}
282-
};
264+
// Slider options with event handlers
265+
$scope.slider = {
266+
'options': {
267+
start: function(event, ui) {
268+
$log.info('Event: Slider start - set with slider options', event);
269+
},
270+
stop: function(event, ui) {
271+
$log.info('Event: Slider stop - set with slider options', event);
272+
}
273+
}
274+
};
283275

284-
$scope.demoVals = {
285-
sliderExample3: 14,
286-
sliderExample4: 14,
287-
sliderExample5: 50,
288-
sliderExample8: 0.34,
289-
sliderExample9: [-0.52, 0.54],
290-
sliderExample10: -0.37,
291-
sliderExample14a: 50,
292-
sliderExample14b: 50,
293-
sliderExample15: [30, 60],
294-
sliderExample16: 21
295-
};
276+
$scope.demoVals = {
277+
sliderExample3: 14,
278+
sliderExample4: 14,
279+
sliderExample5: 50,
280+
sliderExample8: 0.34,
281+
sliderExample9: [-0.52, 0.54],
282+
sliderExample10: -0.37,
283+
sliderExample14a: 50,
284+
sliderExample14b: 50,
285+
sliderExample15: [30, 60],
286+
sliderExample16: 21
287+
};
296288

297-
$scope.colorpicker = {
298-
red: 255,
299-
green: 140,
300-
blue: 60,
301-
options: {
302-
orientation: 'horizontal',
303-
min: 0,
304-
max: 255,
305-
range: 'min',
306-
change: refreshSwatch,
307-
slide: refreshSwatch
308-
}
309-
};
310-
});
289+
$scope.colorpicker = {
290+
red: 255,
291+
green: 140,
292+
blue: 60,
293+
options: {
294+
orientation: 'horizontal',
295+
min: 0,
296+
max: 255,
297+
range: 'min',
298+
change: refreshSwatch,
299+
slide: refreshSwatch
300+
}
301+
};
302+
});
311303
</script>
312304
</body>
313305
</html>

0 commit comments

Comments
 (0)