Профили пользователей
Сниппет загрузки профилей юзеров и открытие окна с деталями при помощи плагина AngularJS и Bootstrap 3, используется API.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<style>
body {
background-color: #fff;
color: #444;
}
.fa {
color: #eee;
}
#userList {
display: none;
}
#loader {
position: absolute;
z-index: 2;
width: 100%;
text-align: center;
top: 40%;
}
</style>
<i class="fa fa-spin fa-refresh fa-5x" id="loader"></i>
<div class="container" ng-app="myApp" ng-controller="Main">
<div class="row" id="userList">
<div ng-repeat="u in users" class="col-xs-4 col-sm-2">
<a href="" ng-click="showUserModal($index)"><img src="{{u.user.picture.large}}" class="img-thumbnail img-responsive img-circle"></a>
<h3 class="text-center">{{u.user.name.first}}</h3>
<hr>
</div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-info">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h1 id="myModalLabel" class="text-center"></h1>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-xs-offset-4"><img src="{{currUser.picture.large}}" class="img-thumbnail img-responsive img-circle"></div>
</div>
<hr>
<div class="row">
<h4 class="text-center"><i class="fa fa-fw fa-map-marker fa-2x"></i> {{currUser.location.street}} {{currUser.location.city}}, {{currUser.location.state}}</h4>
<h4 class="text-center"><i class="fa fa-fw fa-phone fa-2x"></i> {{currUser.cell}}</h4>
<h4 class="text-center"><i class="fa fa-fw fa-envelope-o fa-2x"></i> {{currUser.email}}</h4>
<h4 class="text-center"><i class="fa fa-fw fa-user fa-2x"></i> {{currUser.username}}</h4>
</div>
</div>
</div>
<div class="modal-footer bg-info">
<button class="btn btn-lg btn-default center-block" data-dismiss="modal" aria-hidden="true">Okay!</button>
</div>
</div>
</div>
</div>
<!--/modal-->
</div>
<!--/container-->
<script type='text/jаvascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/jаvascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type='text/jаvascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
function Main($scope, $http) {
$http.get('https://api.randomuser.me/?results=20').success(function(data) {
$scope.users = data.results;
$('#loader').hide();
$('#userList').show();
}).error(function(data, status) {
alert('get data error!');
});
$scope.showUserModal = function(idx) {
var user = $scope.users[idx].user;
$scope.currUser = user;
$('#myModalLabel').text(user.name.first + ' ' + user.name.last);
$('#myModal').modal('show');
}
}
//$(document).ready(function() {});
</script>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap CSS css CSS3 dle DLE fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Как в HTML пишется верхний индекс