Truc 17 : Organiser ses Div comme dans les boutiques Pro avec Angular.

Introduction.


Une méthode pour organiser ses divs comme dans les magasins pro, par exemple comme :

http://www.louboutinssoldespascher.fr

Note : designer les div avec ce générateur http://makewebsimple.net/cssdivbuilder , puis coller le code dans la classe CSS « cart »

Résultat :jojojojo

le Code simple :


<!DOCTYPE html>
<html ng-app="myApp">
  <head>
   <meta charset="utf8" >
    <title>Note la Ville</title>
		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<script src="angular-filter.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>
		
		<!--	APPEL LIB BOOTSTRAP -->
		<script src="librairies/ui-bootstrap.min.js"></script>
		<link rel="stylesheet" href="librairies/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="librairies/font-awesome-4.3.0/css/font-awesome.min.css">
		
		<script>
	
		
		 var myApp = angular.module('myApp',['ui.bootstrap']);
		<!-- LE CONTROLEUR	 -->
			myApp.controller("AlbumCtrl", function($scope) {
				$scope.images = [
				{"thumbnail":"nice.jpg", "description":"Image 01 description"},
				{"thumbnail":"nice.jpg", "description":"Image 02 description"},
				{"thumbnail":"nice.jpg", "description":"Image 03 description"},
				{"thumbnail":"nice.jpg", "description":"Image 04 description"},
				{"thumbnail":"nice.jpg", "description":"Image 05 description"},
				{"thumbnail":"nice.jpg", "description":"Image 01 description"},
				{"thumbnail":"nice.jpg", "description":"Image 02 description"},
				{"thumbnail":"nice.jpg", "description":"Image 03 description"},
				{"thumbnail":"nice.jpg", "description":"Image 04 description"},
				{"thumbnail":"nice.jpg", "description":"Image 05 description"}
				];
			});
		
		  </script>
  
  </head>

<!--   LA VUE -->
<body>
  <div id="main" ng-controller="AlbumCtrl">
	 
		<div ng-repeat="image in images" class="cart" >
		  <img ng-src="{{image.thumbnail}}" class="image""><br>
			{{image.description}}
			
		</div>

	</div>
</body>

<!-- TOUS LES CSS -->
<style>
.cart{
	width: 253px;
	height: 288px;
	border: 4px rgb(89,89,89) double;
	padding: 12px;
	margin: 7px;
	background: rgb(255, 255, 255);
	color: rgb(197, 67, 67);
	font-size: inherit;
	font-weight: inherit;
	font-family: Tahoma, Geneva, sans-serif;
	font-style: inherit;
	text-decoration: inherit;
	text-align: center;
	line-height: 1.55em;
	text-shadow: 0px 0px 1px rgb(89,89,89);
	-moz-box-shadow: inset 4px -2px 9px 0px rgb(128,128,128);
	-webkit-box-shadow: inset 4px -2px 9px 0px rgb(128,128,128);
	box-shadow: inset 4px -2px 9px 0px rgb(128,128,128);
	float:left;
}

.cart:hover{
	 cursor: pointer;
    background-color: #9f9 !important;
}
#main{
	background-color:grey;
	margin-top:10%;
	margin-left:auto;
	margin-right:auto;
	margin-left:auto;
	width:50%;
}
.image{
height:100px;

}
li{
float:left;

}
.logo{
	width : 150 px;
	height:150px;
}

.timg{
	width : 80 px;
	height:80px;
}

.ascenceur{
background-color:lightgrey;
	height:300px;
	max-height:30%;
	overflow:scroll;
}
.droite{
	float:right;
	}
</style>

PARTIE 2 AMELIORATION

On ajoute une pagination + une case de recherche qui continue à marcher sur tout le modèle!
A tester ici

La Directive Angular de pagination est celle ci :https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

Le code:


<!DOCTYPE html>
<html ng-app="myApp">
  <head>
   <meta charset="utf8" >
    <title>Note la Ville</title>
		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<script src="angular-filter.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>
		
		<!--	APPEL LIB BOOTSTRAP -->
		<script src="librairies/ui-bootstrap.min.js"></script>
		<link rel="stylesheet" href="librairies/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="librairies/font-awesome-4.3.0/css/font-awesome.min.css">
		
		<!-- APPEL LIB PAGINATION ANGULAR -->
		<script src="librairies/dirPagination.js"></script>
		<script src="librairies/dirPagination.tpl.html"></script>

		
		<script>
	
		
		 var myApp = angular.module('myApp', ['angularUtils.directives.dirPagination']);
		<!-- LE CONTROLEUR	 -->
			myApp.controller("AlbumCtrl", function($scope) {
				$scope.images = [
				{"thumbnail":"nice.jpg", "description":"Image 01 description"},
				{"thumbnail":"nice.jpg", "description":"Image 02 description"},
				{"thumbnail":"nice.jpg", "description":"Image 03 description"},
				{"thumbnail":"nice.jpg", "description":"Image 04 description"},
				{"thumbnail":"nice.jpg", "description":"Image 05 description"},
				{"thumbnail":"nice.jpg", "description":"Image 06 description"},
				{"thumbnail":"nice.jpg", "description":"Image 07 description"},
				{"thumbnail":"nice.jpg", "description":"Image 08 description"},
				{"thumbnail":"nice.jpg", "description":"Image 09 description"},
				{"thumbnail":"nice.jpg", "description":"Image 10 description"},
				{"thumbnail":"nice.jpg", "description":"Image 11 description"},
				{"thumbnail":"nice.jpg", "description":"Image 12 description"},
				{"thumbnail":"nice.jpg", "description":"Image 13 description"},
				{"thumbnail":"nice.jpg", "description":"Image 14 description"},
				{"thumbnail":"nice.jpg", "description":"Image 15 description"}
				];
			});
		
		  </script>
  
  </head>

<!--   LA VUE -->
<body>
	<div id ="filtres">
		<input type="search" ng-model="q" placeholder="Rechercher " /> 
	</div>
	<div id="main" ng-controller="AlbumCtrl">
	
		<div dir-paginate="image in images  |  filter:q | itemsPerPage: 6  " class="cart" >
		  <img ng-src="{{image.thumbnail}}" class="image""><br>
			<br>{{image.description}}
			<br> Bla Bla
			<br> Bla bla
		</div>
		<dir-pagination-controls></dir-pagination-controls>
	</div>

</body>

<!-- TOUS LES CSS -->
<style>
.cart{
	width: 253px;
	height: 288px;
	border: 4px rgb(89,89,89) double;
	padding: 12px;
	margin: 7px;
	background: rgb(255, 255, 255);
	color: rgb(197, 67, 67);
	font-size: inherit;
	font-weight: inherit;
	font-family: Tahoma, Geneva, sans-serif;
	font-style: inherit;
	text-decoration: inherit;
	text-align: center;
	line-height: 1.55em;
	text-shadow: 0px 0px 1px rgb(89,89,89);
	-moz-box-shadow: inset 4px -2px 9px 0px rgb(128,128,128);
	-webkit-box-shadow: inset 4px -2px 9px 0px rgb(128,128,128);
	box-shadow: inset 4px -2px 9px 0px rgb(128,128,128);
	float:left;
}

.cart:hover{
	 cursor: pointer;
    background-color: lightblue !important;
}
#main{
	background-color:ivory;
	margin-top:1%;
	margin-left:auto;
	margin-right:auto;
	margin-left:auto;
	width:50%;
	border: 4px rgb(89,89,89) double;
	overflow:auto;
	height:700px;
	max-height:800px;
	
}

#filtres{
margin-top:1%;
	margin-left:auto;
	margin-right:auto;
	margin-left:auto;
	width:50%;


}

.image{
height:100px;

}
li{
float:left;

}
.logo{
	width : 150 px;
	height:150px;
}

.timg{
	width : 80 px;
	height:80px;
}

.ascenceur{
background-color:lightgrey;
	height:300px;
	max-height:30%;
	overflow:scroll;
}
.droite{
	float:right;
	}
</style>
Publicités