ASP.NET MVC 4. Урок 5 . Разработка для мобильных устройств.

Автор Nadezhda Belousova
ASP.NET MVC 4. Урок 5 . Разработка для мобильных устройств.

Мы добрались до последнего урока тема урока разработка приложений для мобильных устройств и устройств использование номер 4.

Оренбург Но конечно разработка. Под мобильные устройства — это отдельное направление и обычно под этим подразумевается создание приложения которые будут запускаться на самом приложении на самом устройстве мы же будем с вами говорить о том как сайт который для десктопа будет выглядеть озёр по одному 1 минут будет структуру при заходе на этот сайт мобильного устройства структура сайта страница будет будет более удобное для мобильного давай шаблон который предоставляется вместе четвёртом для создания мобильных приложений базируется на библиотеки jquery Mobile. Понятно Что лежит в основе этой библиотеке вот поэтому если вы собираетесь работать jquery Mobile вам нужны библиотека jquery знаний соответственно использование джейквери.

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

Сейчас посмотрим намного больше чем в этом туре показано ну, а сама документацией на официальном сайте jquery Mobile доступно в открытом виде если на английском языке. Но я думаю что. Достаточно знать английский язык чтобы понять это, наверно мы не будем уже дальше по поэтому мы пока посмотрим посмотрим первый пример в котором показаны некоторые печах библиотеки jquery Mobile который в библиотеку jquery Mobile. Мы можем взять джейквери аквариум и у нас есть вот вверху панельки Mobile. Вот здесь мы можем скачать библиотеку можем посмотреть документацию создать отдельные темы всё на сайте здесь. Вот ссылка на библиотеку если мы хотим пользоваться феном. Давайте запустим примеры посмотрим на первую страницу главная страница у нас представляет представляет ссылками при клике. По первой ссылке мы переходим на простую пустую страницу в виде которое состоит из стекла, а тут какой-то контент. Наверное сделаем браузер поменьше, что он был похож на мобильный брал ты будем — это jquery Mobile example. Отдайте смотреть. Что такое, что я типа представляет вот эта форма вьюшка. Мы зашли по адресу Home Get page и передали it-шник Simple page. Давайте посмотрим, что делается. У нас контрольная Rehau эти вот наш git fetch он принимает идентификатор использовать индификатору как имя вьюшки которые будут возвращаться мы сейчас передали in a future Simple Page в папку берём Simple page и смотрим на то какая структура должна быть у страница чтобы страница поддерживала jquery Mobile начать на странице обычная HTML разметка, но некоторые узлы декорированных специальными атрибутами которые добавляются через рекавери на которых дают какой-то смысл. При добавлении jquery Mobile первое, что мы подключаем — это на 12 строчки Link ведущие на fidence стилями jquery mobile. Почему на странице чёрный и белый текст потому, что уже скачались CSS Same страница вообще весь проект использующие jquery Mobile спрашивает атрибуты роль вот у нас есть div Data роль page — это та часть которая видео. Потом обсудим. Для чего нужен этот page depth Data роль хедер — это будет над заголовком. И если мы начнём там настраивать какие-то специальные элементы тут могут кнопочки появится дополнительный контроллер которые будут лежать в заголовке div Content Hello world девчонок нету Hello world, что потому, что у нас тут выявил применил сейчас ножей. А мы наверное удалили его ещё раз вот — это контент на этой странице кто World и есть скутер чтобы все эти элементы data-role и прочее начали работать и как-то видоизменять нашу страницу. Нам необходимо подключить сценарий 36 и 38 строчки сценарий которые будут первый сценарий который представляет говори фреймворк 2 сценарий который представляет. Джерри Mobile наличие этих сценариев делают нашу страницу. Вот именно мобильная страница все вот эти атрибута не считываются и. Джерри просто видоизменяет нужны узлы на страничку открой себя представляет. Синий платочек. У нас есть также твоя вот эта система в котором заложена точно такая же разметка. Если вы перелетели я вот ничего нового не увидите единственная вместо Hello world на 23 строке мы renderbody и соответственно контент в дороге контент будет записываться содержимое какой-то конкретной страницы которые мы выполняли переход. Давайте посмотрим, что делать на следующий ссылочки возвращаемся обратно и нажимаем посылки кнопка. Я думаю что. Вы встречали приложения с какими кнопками кнопки удобно нажимать именно пальцами потому, что они большие широкие кнопок есть иконка слева и также в конце этого завитушки не ссылка которая перенаправит вас на сайт джейквери там где вы сможете посмотреть какие именно иконки существуют. Какие вы можете оставить перечень законов дуа при нажатии кнопок по кнопкам у нас что-то происходит,. Тверь посмотрим как делают какие кнопки вьюшка у нас находится в папке Home Button CSS HTML и вьюшка представлен кнопки представлены в нашем случае обычными ссылками эти идёт 3 строка 5 минут первая ссылка используется атрибут data-role батон и Data icon Star просто просим чтобы джейквери ссылку превратилась кнопку до. Тролль adata icon мы просим чтобы картинка слева появилась определенными настройками тоже самое на шестой строчке для 2 ссылки для для ссылки номер 3 настройки номер семь никаких настроек нету поэтому ссылка следующая вьюшка list View отображается список мы можем производить поиск по списку.

0 комментариев
0

Читайте также