This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags
Nothing to show
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Cancel Create
- Local
- Codespaces
HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Как сделать хештеги в меню ВКонтакте
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
Latest commit message
Commit time
README.md
Универсальный модуль навигации позволяет создать систему навигации в приложении на основе списка маршрутов в вашем приложении.
Источником истины в роутере является внутренний стек.
На данный момент модуль поддерживает только навигацию через query — параметры.
Используйте npm или yarn для установки.
в классовых компонентах
// App.js import router > from ‘./router.js’; import Component > from ‘react’; class App extends Component constructor() // получение начального состояния навигации this.state = router.getState(); > routerListener( toState >) => this.setState(toState); > componentDidMount() this.unsubscribe = router.subscribe(this.routerListener); > componentWillUnmount() // остановка роутера, удаление обработчиков событий router.stop(); this.unsubscribe(); > // . >
с использованием хуков
import useEffect, useState > from ‘react’; const App = () => // получение начального состояния навигации const [state, setState] = useState(router.getState()); const routerListener = ( toState >) => setState(toState); > useEffect(() => const unsubscribe = router.subscribe(routerListener); return unsubscribe; > [ ]); // . >
с использованием HOC и контекста из
| defaultRoute | string | ‘default’ | Задает стандартную страницу на которую осуществляется переход при старте приложения, если в router.start() не указана начальная страница. Так же задает страницу которая помещается первой в стек навигации. Страница должна существовать в коллекции маршрутов |
| subRouteKey | string | ‘modal’ | задает ключ свойства по которому будет определяться, является ли маршрут модальным окном или нет |
| preserveHash | boolean | false | если query параметры внутри хэша, убирать ли хэш из url |
| preservePath | boolean | true | строить путь от корня ресурса example.com/? или сохранять папку в url example.com/folder? |
| fillBrowserStack | boolean | false | при старте роутера стек браузера наполняется вхождениями через pushState в соответствии с внутренним стеком роутера |
| errorLogger | function | (err) => | позволяет передать callback функцию для обработки ошибок роутера |
Название маршрутов должно быть уникальным. Создавать маршруты и явно задавать им позицию в дереве навигации можно следующим образом:
Как сделать навигацию Вконтакте
через указание name
const routes = [ name: ‘home’ >, name: ‘home.contacts’ > ];
Перемещение по стеку навигации
При старте роутер создает внутренний стек навигации и наполняет его вхождениями на страницы. Первое вхождение — всегда config.defaultRoute . При шагании назад по стеку мы упираемся в маршрут указанный как config.defaultRoute .
Если стек браузера пуст, то переход назад по стеку роутера возможен только с помощью router.back() ;
При использовании параметра конифгурации config.fillBrowserStaсk при старте роутера стек браузера наполняется вхождениями через pushState.
Так мы можем переходить назад стрелкой браузера при изначально пустом стеке браузера (к примеру при переходе по прямой ссылке и/или под анонимным пользователем), на манер навигации в нативных приложениях.
По умолчанию, нажатия на все ссылки, которые относятся к ресурсу, на котором существует наше приложение, обрабатываются внутри роутера.
Роутер возвращает состояние в виде объекта
page: ‘home’, // текущая страница modal: ‘cabinet’, // текущее модальное окно params: id: ‘1’ >, // параметры маршрута, как обязательные так и не обязательные meta: // мета-информация о состоянии source: ‘go’, > options: > // опции переданные вместе с состоянием >
мета-информация о состоянии
источник создания состояния
- go — состояние в результате перехода на маршрут
- popstate — переход стрелками браузера назад/вперед
- default — начальное состояние роутера
- url — состояние сгенерировано из явно переданного url
опции переданные при переходе replace — замена текущего состояние в стеке и в урле новым reload — перезагрузка страницы при переходе на роут
Метод router.go — основной метод навигации. Старт приложения выполняет метод router.start с указанием страницы с которой нужно начать навигацию в приложении.
Создание 404 страницы
При переходе на переданный маршрут мы должны получить состояние, в котором как минимум будет указан page. В случае, если этого не произошло, мы можем поймать выполнить переход на 404 страницу, либо помощью сonfig.errorLogger получить и обработать соответствующую ошибку и выполнить переход на 404 страницу нашего приложения. Страница должна быть указана в коллекции маршрутов.
const errorLogger = (err) => if (err === ROUTER_ERROR_NOT_FOUND) router.go(‘404’); > > const config = errorLogger, // . > const router = createNavigator(routes, config); // или const routerListener = ( toState >) => if (!toState.page) router.go(‘404’); > >; router.subscribe(routerListener);
Создание разных деревьев навигации и переключение между ними
Управление модальными окнами
Попасть на страницу а затем на модальное окно можно сделать последовательным переходом router.go(‘home’) , router.go(cabinet) ;
Метод получения копии внутреннего стека истории роутера
задание активного дерева навигации
- treeName — идентификатор активного дерева
Метод для добавления дерева навигации
- treeName — идентификатор дерева
- routes — коллекция объектов маршрутов
Метод для удаления дерева навигации.
- treeName — идентификатор дерева
Метод создания состояния на основе переданного URL в инициализированный роутер, используется для конструирования состояния роутера
- url — ссылка из которой нужно извлечь состояние
подписка на обновления состояния роутера
- subscriber — функция принимающая объекты состояния
отписка от обновлений состояния роутера
- subscriber — функция принимающая объекты состояния
удаление всех подписчиков на роутер
добавление узлов в указанное дерево, по умолчанию в текущее активное.
routes — объект маршрута или массив маршрутов
удаление узлов из указанного дерева, по умолчанию из текущего активного
Метод создания ссылки на основе имени роута и параметров.
Метод получения коллекции активных узлов, в порядке от корня дерева заканчивая текущим активным роутом
построение состояния роутера на основе, переданного имени роута, параметров, а так же текущего активного дерева роутов
- routeName — имя маршрута,
- routeParams — параметры навигации,
- stateSource — источник создания состояния, может быть go | popstate | default ,
Основной метод навигации роутера routeName: string, * routeParams * options * done
Метод закрытия для модальных окон.
- Метод закрытия для модальных окон.
- история отматывается до активной страницы без модального окна,
- иначе действует как router.back()
Метод навигации назад. При пустом стеке браузера переходит назад по внутреннему стеку с выполнением window.history.replaceState .
Метод активирует роутер, выполняет метод построение истории buildHistory, выполняют привязку основных обработчиков событий popstate и обработчика для перехвата нажатий на ссылки. Осуществляет начальный переход на актуальное состояние роутера
- деактивирует роутер, удаляет обработчики событий.
возвращает текущее состояние роутера.
возвращает предыдущее состояние роутера.
Утилита роутера, возвращает булево значение является ли переданный роут с параметрами активным в данном состоянии роутера.
- routeName
- routeParams
- strictCompare — строгое сравнение со всеми параметрами, по умолчанию true
- ignoreQueryParams — игнорирование необязятельных query параметров, по умолчанию false
добавляет во внутреннюю коллекцию обработчик, выполняемый при переходе на указанный роут * routeName * routerHandler
Источник: github.com
Навигация сделать навигацию вконтакте
Панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы. Рассмотрим, как создать простенькую панель навигации.
Фактически панель навигации — это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент . Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.
Вертикальное меню
Распространенное решение данной проблемы для создания вертикального меню состоит в том, чтобы сделать ссылку блочным элементом.
После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.
Горизонтальное меню
Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block .
Использование float
Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li , в который заключена ссылка, устанавливается float: left; . Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.
Второй этап заключается в установке у элемента ссылки display: block , что дает нам возможность устанавливать ширину, отступы, вообщем все те признаки, которые характерны для блочных элементов.
inline и inline-block
Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline . После этого для элемента ссылки, которая располагается в элементе li , мы можем установить display: inline-block :
Источник: metanit.com
Урок 6. Навигация по изображениям галереи
От автора: продолжаем работать над скриптом фотогалереи как «ВКонтакте» На данном этапе у нас выводится блок просмотра увеличенной копии изображения, который отображается при клике по миниатюрам изображений галереи. В данном уроке мы с Вами разобьем общий шаблон галереи на несколько отдельных, каждая часть которого будет выводить отдельный элемент галереи. А также реализуем навигацию по изображениям галереи, в блоке просмотра увеличенной копии изображения.
Все уроки курса:
Warning: include(seolink.php): failed to open stream: No such file or directory in /home/webformy/public_html/wp-content/plugins/wfm-premium/templates/single-premium.php on line 78
Warning: include(): Failed opening ‘seolink.php’ for inclusion (include_path=’.:/opt/alt/php74/usr/share/pear’) in /home/webformy/public_html/wp-content/plugins/wfm-premium/templates/single-premium.php on line 78
Количество уроков: 9
Продолжительность курса: 07:06:21
Меня зовут Виктор Гавриленко. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении многих лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием.
Описание курса: Цикл уроков по созданию фотогалереи как Вконтакте посвящен созданию собственной фотогалереи с абсолютного нуля, функционал которой похож на фотогалерею социальной сети Вконтакте. При этом при создании данного скрипта мы будем использовать язык PHP, систему управления базой данных Mysql и язык JavaScript в связке с библиотекой JQuery.
Источник: webformyself.com