javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

SEXY

Browse Source
This commit is contained in:
Max Lynch
2013-12-16 15:36:14 -06:00
parent 4de3403f79
commit b996e9a8c7
7 changed files with 123 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dist/css/ionic.css vendored
View File

@@ -4408,8 +4408,7 @@ button.item-button-right:after {
.slider {
position: relative;
overflow: hidden;
visibility: hidden;
background-color: #000; }
visibility: hidden; }
.slider-slides {
position: relative; }
@@ -4420,8 +4419,9 @@ button.item-button-right:after {
width: 100%;
float: left;
vertical-align: top; }
.slider-slide img {
width: 100%; }
.slider-slide-image > img {
width: 100%; }
.slider-pager {
position: absolute;

21
dist/js/ionic-angular.js vendored
View File

@@ -507,7 +507,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
transclude: true,
template: '<header class="bar bar-header">\
<div class="buttons">\
<button ng-repeat="button in leftButtons" class="button" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
<button ng-repeat="button in leftButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
</button>\
</div>\
<h1 class="title" ng-bind-html="title"></h1>\
@@ -1818,6 +1818,7 @@ angular.module('ionic.ui.slideBox', [])
replace: true,
transclude: true,
scope: {
doesContinue: '@',
showPager: '@',
onSlideChanged: '&'
},
@@ -1826,20 +1827,34 @@ angular.module('ionic.ui.slideBox', [])
var slider = new ionic.views.Slider({
el: $element[0],
continuous: $scope.$eval($scope.doesContinue) === true,
slidesChanged: function() {
$scope.currentSlide = slider.getPos();
// Occasionally we need to trigger a digest
// Try to trigger a digest
$timeout(function() {});
},
callback: function(slideIndex) {
$scope.currentSlide = slideIndex;
$scope.onSlideChanged({index:$scope.currentSlide});
$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
$scope.$apply();
// Try to trigger a digest
$timeout(function() {});
}
});
$scope.$on('slideBox.nextSlide', function() {
slider.next();
});
$scope.$on('slideBox.prevSlide', function() {
slider.prev();
});
$scope.$on('slideBox.setSlide', function(e, index) {
slider.slide(index);
});
$scope.slider = slider;

2
js/ext/angular/src/directive/ionicBar.js vendored
View File

@@ -11,7 +11,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
transclude: true,
template: '<header class="bar bar-header">\
<div class="buttons">\
<button ng-repeat="button in leftButtons" class="button" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
<button ng-repeat="button in leftButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
</button>\
</div>\
<h1 class="title" ng-bind-html="title"></h1>\

19
js/ext/angular/src/directive/ionicSlideBox.js vendored
View File

@@ -21,6 +21,7 @@ angular.module('ionic.ui.slideBox', [])
replace: true,
transclude: true,
scope: {
doesContinue: '@',
showPager: '@',
onSlideChanged: '&'
},
@@ -29,20 +30,34 @@ angular.module('ionic.ui.slideBox', [])
var slider = new ionic.views.Slider({
el: $element[0],
continuous: $scope.$eval($scope.doesContinue) === true,
slidesChanged: function() {
$scope.currentSlide = slider.getPos();
// Occasionally we need to trigger a digest
// Try to trigger a digest
$timeout(function() {});
},
callback: function(slideIndex) {
$scope.currentSlide = slideIndex;
$scope.onSlideChanged({index:$scope.currentSlide});
$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
$scope.$apply();
// Try to trigger a digest
$timeout(function() {});
}
});
$scope.$on('slideBox.nextSlide', function() {
slider.next();
});
$scope.$on('slideBox.prevSlide', function() {
slider.prev();
});
$scope.$on('slideBox.setSlide', function(e, index) {
slider.slide(index);
});
$scope.slider = slider;

BIN
js/ext/angular/test/app_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

121
js/ext/angular/test/slideBox.html
View File

@@ -14,30 +14,38 @@
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.box {
.slider-slide {
width: 100%;
height: 100%;
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
}
.box > * {
font-weight: 100;
font-family: 'Helvetica Neue';
}
.blue {
background-color: rgb(71, 138, 238);
}
.yellow {
background-color: rgb(233, 233, 109);
}
.pink {
background-color: rgb(233, 109, 233);
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.slider-pager .slider-pager-page {
color: #000;
}
#logo {
margin: 30px 0px;
}
#list {
width: 170px;
margin: 30px auto;
font-size: 20px;
}
#list ol {
margin-top: 30px;
}
#list ol li {
text-align: left;
list-style: decimal;
margin: 10px 0px;
}
</style>
</head>
<body>
@@ -46,23 +54,34 @@
<header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
<slide-box on-slide-changed="slideChanged(index)">
<slide>
<div class="box">
<h3>Thank you for choosing my app!</h3>
<p>
We've worked super hard to make you happy.
</p>
<p>
But if you are angry, please contact us at support@example.com
</p>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
<img src="app_icon.png">
</div>
<p>
We've worked super hard to make you happy.
</p>
<p>
But if you are angry, too bad.
</p>
</slide>
<slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</slide>
<slide>
<div class="box">
</div>
</slide>
<slide>
<div class="box">
</div>
<h3>Any questions?</h3>
<p>
Too bad!
</p>
</slide>
</slide-box>
</div>
@@ -71,46 +90,64 @@
.controller('SlideCtrl', function($scope) {
$scope.next = function() {
console.log('NEXT');
$scope.$broadcast('slideBox.nextSlide');
};
$scope.rightButtons = [
var rightButtons = [
{
content: 'Next',
type: 'button-positive button-clear',
onTap: function(e) {
tap: function(e) {
console.log('NEXT');
$scope.next();
}
}
];
$scope.leftButtons = [
var leftButtons = [
{
content: 'Skip',
type: 'button-positive button-clear',
onTap: function(e) {
tap: function(e) {
alert('Skipping');
}
}
];
$scope.leftButtons = leftButtons;
$scope.rightButtons = rightButtons;
$scope.slideChanged = function(index) {
console.log('Slide changed', index);
if(index > 0) {
$scope.leftButtons = [
{
content: 'Back',
type: 'button-positive button-clear',
tap: function(e) {
$scope.$broadcast('slideBox.prevSlide');
}
}
];
} else {
$scope.leftButtons = leftButtons;
}
if(index == 2) {
$scope.rightButtons = [
{
content: 'Start using MyApp',
type: 'button-positive button-clear',
onTap: function(e) {
tap: function(e) {
alert('Done!');
}
}
];
} else {
$scope.rightButtons = [
{
content: 'Next',
type: 'button-positive button-clear',
onTap: function(e) {
}
}
];
$scope.rightButtons = rightButtons;
}
$scope.$apply();
};
});
</script>

6
scss/_slide-box.scss
View File

@@ -9,7 +9,6 @@
// Make sure items don't scroll over ever
overflow: hidden;
visibility: hidden;
background-color: #000;
}
.slider-slides {
position: relative;
@@ -22,7 +21,10 @@
float: left;
vertical-align: top;
img {
}
.slider-slide-image {
> img {
width: 100%;
}
}