bxSlider — наиболее костомезируемый слайдер, и с хорошим API

Часто при создании веб сайтов, необходимо добавить слайдер, слайдер на весь экран, слайдер товаров, изображений и тд. Все это можно реализовать с помощью bxSlider, он обладает полным набором возможностей, адаптивный и легко устанавливается в проект.

  1. Небольшой список основных возможностей bxSlider:
  • полностью адаптивный
  • может быть горизонтальным, вертикальным
  • может содержать в себе изображения, видео или HTML-контент
  • поддержка функций touch/swipe
  • для анимаций используются CSS transitions
  • маленький размер файла, легко видоизменяется и настраивается
  • поддержка браузерами Firefox, Chrome, Safari, iOS, Android, Ie7+
  • большое число настроек

Установка

Установка стандартная и ни чем не отличается от подобных библиотек:

  1. Идем на официальный сайт
  2. Качаем архив
  3. Если у вас еще не подключен jQuery, то необходимо его подключить
  4. И подключаем js и css bxSlider
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/css/jquery.bxslider.css" rel="stylesheet" />

Разметка

Разметка очень простая, это маркированный список, ul название класса или ид, будет использоваться в js. li служат контейнерами для слайдеров, там можно хранить текст, фото и видео.

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Инициализация

Создадим js файл и добавим его к сайту. В нем инициализируем слайдер.

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Вот и все, слайдер работает.
Стилизовать все тоже очень просто, заходим в jquery.bxslider.css и изменяем все как надо. В архиве так же идут изображения, стрелки прокрутки, загрузки, если они не загрузились укажите нужный путь в css файле или подключите свои.
В js так же можно настроить различный параметры, автопрокрутку, количество слайдев, отступы и тд.

$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true
});

Полный список опций доступно на официальном сайте.

Так же у bxSlider хорошее API. Если вам необходимо реализовать не стандартный функционал он очень часто спасает. Вообщем очень хорошая библиотека, чуть чуть помучившись можно реализовать любой слайдер.

JQuery 3.0: следующее поколение

С момента релиза JQuery прошло восемь лет. За эти годы, веб разработка сильно изменилась и JQuery менялся вместе с ней.

Вот главное в JQuery 3.0 API кто не любит долго читать большие тексты:

  • Если необходима поддержка большого количества браузеров, в том числе IE8, Opera 12, Safari 5 и других, используйте jQuery Compat 3.0. Эта версия обеспечивает лучшую совместимость для всех без исключения пользователей.
  • Если сайт создан для новых и популярных браузеров, или вы разрабатываете приложение на HTML для WebView, используйте jQuery 3.0.0.
  • Пока оба пакета содержат одинаковый публичный API в соответствующих мажорных и минорных версиях. Это должно облегчить разработчикам переключение между ними и улучшить совместить со сторонними плагинами jQuery.

С каждым будущим релизом они будут выкладываться на npm и Bower. Оба пакета также будут доступны одним сборочным файлом на jQuery CDN. Использовать их будет просто как дважды два: просто включить jquery-compat-3.0.0 или jquery-3.0.0, в зависимости.

По мере того, как будет идти работа над версией 3.0, мы будем рассказывать детали об изменениях кода, поддержке браузеров и тому подобном. Оставайтесь на связи!

Плавная прокрутка по странице

Часто необходимо на лендингах реализовать плавную прокрутку по сайту. Для этого я использую якори.

Первым шагом будет подключение библиотеки JQuery, если она еще не подключена на вашем сайте:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/libs/jquery-2.0.3.min.js"><\/script>')</script>

Теперь создадим html разметку:

<ul>
  <li><a href="#menu1">меню 1</a></li>
  <li><a href="#menu2">меню 2</a></li>
  <li><a href="#menu3">меню 3</a></li>
</ul>
<div id="menu1">
  якорь 1
</div>
<div id="menu2">
  якорь 2
</div>
<div id="menu3">
  якорь 3
</div>

Здесь у нас простые якори. Все работает но конечно без плавной прокрутки.
CSS для увеличения размера страницы:

div{
  margin-top:500px;
}

Ну и сам скрипт плавной прокрутки:

$('a[href*=#]').bind("click", function(e){
  var anchor = $(this);
  $('html, body').stop().animate({
     scrollTop: $(anchor.attr('href')).offset().top
  }, 1000);
  e.preventDefault();
});

Все вместе получим следующий результат:

7661

Доступ к внешним API с помощью AngularJS

AngularJS имеет простой способ взаимодействия с внешними API. В этой статье мы покажем вам, как использовать службы для доступа API GitHub и создать простой обозреватель репозитория.

Шаг 1: Подготовка

Давайте начнем с HTML шаблона:

<!DOCTYPE html>
<html>
    <head>
        <title>GitHub Search</title>
    </head>
    <body>
    </body>
</html>

Теперь добавим AngularJS в head:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

Теперь добавим основные CSS стили:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: sans-serif;
}
body, html { margin: 0; }
p { margin: 0; }
input { width: 100%; }
pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
div.repo {
    border-bottom: 1px solid;
    cursor: pointer;
}
#search, #repo, #user { float: left; }
#search { width: 20%; }
#repo { width: 60%; }
#user { width: 20%; }

Как вы заметили, здесь нет ничто необычного, только основные стили. Конечно, вы можете добавить больше стилей, чтобы сделать шаблон более красивым, просто имейте в виду, что скриншоты в этом уроке будут использовать только эти стили.

Шаг 2: Модуль

Cоздать модуль для нашего приложения:

var app = angular.module('githubsearch', []);

Давайте добавим его в тег с помощью директивы ngApp:

<body ng-app="githubsearch">

Шаг 3: Контроллер

Нам также понадобится контроллер для нашего приложения. Для простоты, это будет только один контролер для всего приложения, по этому нам не придется иметь дело с передачей информации между контроллерами:

app.controller('SearchController', function SearchController($scope) {
});

Шаг 4: Базовая служба

Давайте определим нашу базовую службу:

app.factory('GitHub', function GitHub($http) {
    return {
    };
});

Мы используем метод app.factory(), чтобы мы могли просто вернуть объект с несколькими методами, чтобы использовать их позже. Мы будем использовать $http для получения данных из API GitHub.

Шаг 5: Поиск репозитория

Первый метод в нашем сервисе будет поиск репозитория с использованием API GitHub. Использование $http сервиса довольно просто (эта функция переходит в объект возвращенного нашей функции фабрики):

searchRepos: function searchRepos(query, callback) {
    $http.get('https://api.github.com/search/repositories', { params: { q: query } })
        .success(function (data) {
            callback(null, data);
        })
        .error(function (e) {
            callback(e);
        });
}

Метод $http.get() является сокращением от запросы GET. Первый параметр является URL, к которуму мы хотим получить доступ. Второй является объектом с параметрами. Нам нужно только params объекта — это хэш параметров запроса, которые будут добавлены к запросу (параметр q является строкой поиска, как описано здесь).

$http.get() возвращает promise. Мы можем использовать success () и error () слушателей и вызвать соответствующую функцию.

Шаг 6: Блок поиска

Чтобы воспользоваться функцией, которую мы создали в предыдущем шаге мы должны будем добавить поле поиска:

<div id="search">
    <input ng-model="query" placeholder="search" ng-keyup="$event.keyCode == 13 && executeSearch()">
    <div class="repo" ng-repeat="repo in repos" ng-click="openRepo(repo.full_name)">
        <strong>{{ repo.full_name }}</strong>
        <p>{{ repo.description }}</p>
    </div>
</div>

Мы используем директиву ngModel для связи значение этого поля и переменной query и ngKeyup для вызова функцию executeSearch(), когда пользователь нажмет клавишу enter ($event.keyCode == 13). Мы не можем использовать условные операторы в выражениях AngularJS, но простая логика операции будет работать.

Под полем ввода, мы используем ngRepeat для отображения результатов поиска. Мы будем отображать полное имя репозитория и описание (вы можете увидеть все поля, доступные в API GitHub, если вы хотите отобразить что то другое).

Мы также используем ngClick для вызова функцию openRepo() с полным описанием репозитория. Мы определим эту функцию позже.

Шаг 7: Использование функции поиска

Теперь мы можем использовать сервис который мы создали. Сначала добавим параметр GitHub к функции контроллера:

app.controller('SearchController', function SearchController($scope) {

Теперь определим функцию executeSearch():

$scope.executeSearch = function executeSearch() {
    GitHub.searchRepos($scope.query, function (error, data) {
        if (!error) {
            $scope.repos = data.items;
        }
    });
}

Как вы можете заметить, мы вызываем метод GitHub.searchRepos() с параметром поиска $scope.query и помещаем результаты поиска (data.items) в переменную $scope.repos.

Это все, что нам нужно для вывода результатов поиска. Откроем HTML-файл в браузере и тестируем поиск:

search_results
image-133

Шаг 8: Получение информации о репозитории

Теперь, когда у нас есть функция поиска можно вывести информацию о репозитории, выбранным пользователем. Создадим функцию, для получения данных из репозитория:

getRepo: function getRepo(name, callback) {
    $http.get('https://api.github.com/repos/'+ name)
        .success(function (data) {
            callback(null, data);
        })
        .error(function (e) {
            callback(e);
        });
    }

Название передаваемое в эту функцию должно быть полное имя (имя автора, слэш, имя репозитория — как angular/angular.js), так как мы должны передать его в API GitHub.

Шаг 9: Получение из репозитория README файл

Содержание файл README мы получим не в предыдущей функции, а в отдельной:

getReadme: function getReadme(name, callback) {
    $http.get('https://api.github.com/repos/'+ name +'/readme')
        .success(function (data) {
            callback(null, atob(data.content));
        })
        .error(function (e) {
            callback(e);
        });
}

Эта и предыдущая функция почти идентичны, только изменен URL. Мы также используем функцию atob(), чтобы декодировать содержимое файла README, так как он кодирован в кодировке base64.

Мы не использовали два запроса в одной функции так как некоторые репозитории не имеют README файла.

Шаг 10: Отображение информации о репозитории

Мы будем отображать полное имя репозитория, количество людей посмотревших его и файл README:

<div id="repo" ng-show="activeRepo">
    <strong>{{ activeRepo.full_name }}</strong> <em>Watched by {{ activeRepo.watchers_count }} people.</em>
    <pre>{{ activeRepo.readme }}</pre>
</div>

Мы будем хранить эту информацию в переменной activeRepo. Существует также ngShow который покажет элемент, только если в нем есть данные.

Шаг 11: Обновление контроллера

Мы также должны обновить наш контроллер поэтому он получает данные из репозитория и помещает его в scope. Создим функцию openRepo (), которую мы повесили на директиву ngClick ранее:

$scope.openRepo = function openRepo(name) {
    GitHub.getRepo(name, function (error, data) {
        if (!error) {
            $scope.activeRepo = data;
            GitHub.getReadme(name, function (error, data) {
                if (!error) {
                    $scope.activeRepo.readme = data;
                } else {
                    $scope.activeRepo.readme = 'No README found!';
                }
            });
        }
    });
}

Как вы можете видеть, мы сначала использовать метод GitHub.getRepo (), для проверки на наличие ошибок, а затем поместим данные в переменной activeRepo. После этого мы получим файл README файл если он есть.

Теперь вы можете запустить наше приложение снова и посмотреть, как все это работает

repo_informations
image-134

Введение в Bookshelf.js

В течение последних трех лет можно было заметить всплеск популярности JavaScript. На протяжении многих лет, были многочисленные попытки принятие этого популярного языка на сервере. Наиболее удачный попыткой является платформа Node.js, которая была представлена как быстрый способ написания серверных приложений.

В результате люди начали использовать back end разработку с помощью Node. Одна из самых важных вещей back end системы эффективное взаимодействие с базой данных. Для этого используется ORM( объектно-реляционного отображение). ORM упрощает разработку, позволяет программисту взаимодействовать с базой данных используя объекты. В этой статье мы рассмотрим ORM библиотеку для Node.js — Bookshelf.js.

Что такое ORM?

Википедия определяет объектно-реляционного отображение как:

технология программирования, которая связывает для преобразования данных несовместимые типы систем: базу данных и данные объектно-ориентированного языка программирования, создавая «виртуальную объектную базу данных», которую можно использоваться внутри языка программирования

В нашем случае, язык программирования JavaScript, и несовместимая система является реляционная база данных, такая как MySQL. Это означает, что ORM библиотека должна позволить нам взаимодействовать с базами данных таким же образом как мы взаимодействуем с обычными объектами в JavaScript. Есть много библиотек ORM, которые существуют для Node.js, наиболее популярные из них: Persistence.js, Sequelize.js и Bookshelf.js. Здесь мы рассмотрим Bookshelf.js.

Примеры использования Bookshelf.js

Взаимодействие базой данных, как правило, сосредоточены вокруг четырех операций CRUD — создание, чтение, обновление и удаление. Bookshelf.js обеспечивает интуитивный способ этого взаимодействия. Пример создания выглядит следующим образом:

new Post({name: 'New Article'}).save().then(function(model) {
  // ...
});

Здесь Post является моделью, которая имеет соответствующую таблицу базы данных а name является атрибутом, который соответствует полю в таблице базы данных.

Операция чтения выглядит следующим образом:

// select * from `user` where `email` = 'user@mail.com'
new User({email: 'user@mail.com'})
  .fetch()
  .then(function(model) {
    console.log(model.get('gender'));
  });

Обратите внимание на вызов then в коде. Bookshelf.js поддерживает интерфейсы основ взаимодействия, которые в данном случае означают, что анонимная функция будет вызван только если наш запрос был успешным. model является результирующим объектом JavaScript, который можно использовать для доступа к атрибутам User. В нашем случае model.get (‘gender’) возвращает пол нашего пользователя.

Разработка с Bookshelf.js и Express.js

Для более полного примера, предположим, что мы должны построить API JSON для блога со следующими методами:

GET  /api/article
GET  /api/article/:article_id
POST /api/article

У нас есть база данных MySQL со следующими параметрами:

create table article (
  id int not null primary key,
  title varchar(100) null,
  body text null,
  author varchar(100) null
);

Для начала, нам нужно настроить наш Express.js среду с package.json:

{
  "name": "article_api",
  "description": "expose articles via JSON",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "bluebird": "^2.1.3",
    "body-parser": "^1.3.1",
    "express": "4.4.3",
    "mysql": "*",
    "knex": "*",
    "bookshelf": "*"
  }
}

Для bookshelf нам нужны knex, построитель запросов, и bluebird. Наша структура app.js теперь выглядит следующим образом:

// При запуске приложение
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var Promise = require('bluebird');
var dbConfig = {
  client: 'mysql',
  connection: {
    host: 'localhost',
    user: 'root',
    password: 'your_password',
    database: 'blog',
    charset: 'utf8'
  }
};
var knex = require('knex')(dbConfig);
var bookshelf = require('bookshelf')(knex);
app.set('bookshelf', bookshelf);
var allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  next();
};
app.use(allowCrossDomain);
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded());
// parse application/json
app.use(bodyParser.json());
// parse application/vnd.api+json as json
app.use(bodyParser.json({type: 'application/vnd.api+json'}));
// для использования bookshelf клиента в другом месте
var bookshelf = app.get('bookshelf');
// {код определения нашей модели}
app.listen(3000, function() {
  console.log('Express started at port 3000');
});

Наша база данных MySQL называется blog. Нам необходимо определить модель Article и связать ее с таблицей article. Мы заменим // {код определения нашей модели} на:

var Article = bookshelf.Model.extend({
  tableName: 'article'
});

Вот и все, что нужно для определения модели в Bookshelf.js. Теперь мы можем использовать эту модель для запросов к базе данных в нашем API. Начнем с метода GET /api/article, должна вернуть все статьи в базе данных:

app.get('/api/article', function(req, res) {
  new Article().fetchAll()
    .then(function(articles) {
      res.send(articles.toJSON());
    }).catch(function(error) {
      console.log(error);
      res.send('An error occured');
    });
});

fetchAll в Bookshelf.js извлекает все записи в таблице базы данных, и catch выполняется только в случае возникновения ошибки.

Вывод

Node.js развивается как технология и может быть использована для создания веб-приложений и интерфейса API с помощью модулей, таких как Bookshelf.js для облегчения взаимодействия с реляционной базой данных.