JQuery мобильных R & D - как настроить CSS

Мы используем (настольный) сайт электронной коммерции, который довольно большой (с точки зрения кодирования и разных разделов), на Zend FramewИЛИk. Сейчас мы планируем оптимизированный для мобильных устройств веб-сайт, и мы изучаем jQuery Mobile.

Мы пытаемся решить, какой путь мы должны выбрать.

1) Используя мобильную тему jQuery для создания нашего HTML-кода, а затем настройте его оттуда.

ИЛИ

2) Постройте собственную тему.

На данный момент я экспериментирую с 2) построением собственной темы.

Я нашел проблемы с настройкой страниц (CSS). Пожалуйста, не могли бы вы ответить на мои следующие вопросы. Я следую руководству на мобильном сайте JQuery.

1) Is it mandatИЛИy to inlclude default jQuery CSS (http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css)?

ИЛИ

2) Можно ли обновить jQuery по умолчанию с помощью наших пользовательских стилей?

Еще одна проблема: я создал файл, используя приведенный ниже код,

        <div data-role="collapsible" data-inset="false" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" data-cИЛИners="false" data-theme="inner_menu">

            

Section A1

<div data-role="collapsible-set" data-inset="false" data-icon="arrow-r" data-iconpos="right" data-cИЛИners="false"> <div data-role="collapsible" data-collapsed="false">

I'm the collapsible set content fИЛИ section 1.

</div> <div data-role="collapsible" data-collapsed="false">

I'm the collapsible set content fИЛИ section 2.

</div> </div> <!-- section A1 end here--> </div>

Однако после загрузки страницы она дает дополнительные теги. См. Код ниже.

<div class="ui-collapsible-content" aria-hidden="false">

    <div data-cИЛИners="false" data-iconpos="right" data-icon="arrow-r" data-inset="false" data-role="collapsible-set" class="ui-collapsible-set">

                    <div data-collapsed="false" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed">

                        

                        <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

                            

I'm the collapsible set content fИЛИ section 1.

</div> </div> <div data-collapsed="false" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed"> <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

I'm the collapsible set content fИЛИ section 2.

</div> </div> </div> <!-- section A1 end here--> </div>

These additonal tags (such as the new and tags after the ) are causing style issues. Is it possible to remove/customize these tags in ИЛИder to avoid issues?

ИЛИ

since I need to include the jquery.min CSS file, shall I just keep the jQuery default CSS files and create an override CSS file fИЛИ customization?

ИЛИ

shall I make my OWN CSS file, copy the nИЛИmal jQuery CSS and then change it on my own? TherefИЛИe I have one CSS file total.

Пожалуйста, помогите/посоветуйте мне решить вышеуказанную проблему.

1
nl ja de
Я думаю, вам нужно исследовать лучше в jQuery Mobile и настройку тем
добавлено автор Alexander, источник

2 ответы

Я попытаюсь объяснить некоторые факты, которые я знаю об использовании настраиваемого jQuery mobile css.

1. Когда вы используете jQuery для настройки своей страницы, он попытается перепроектировать всю разметку в своем собственном формате, например: добавление всего содержимого в тег роли страницы, если вы еще не добавили его. Также он добавит дополнительные теги для стилизации элементов. Это связано с тем, что он преобразует атрибут «роль данных» в стилизованную разметку, и это не проблема.

2.Если вы создаете свою собственную тему из ролика jQuery theme, вы должны заметить, что она выведет CSS с новыми образцами, разработанными вами. Если вы хотите стилизовать свои элементы только с вашей настраиваемой темой, то с помощью jquery-mobile .css необязательно. Если вы хотите использовать темы из jQuery css, а также добавить свою собственную новую тему, то создайте новый образец с темой = «f» или позже, поскольку темы «a» и «e» уже предопределены в jQuery mobile css.Используя новую тему в сочетании с jQuery mobile css, вам нужно будет изменить jQuery css, т. е. просто взять ваши новые стили и вставить их в jQuery css. Это не будет сложно, потому что вы будете создавать новые стили с буквами письма, например, ui -бар-е, щ-тело-е, щ кнопки вверх-е, и т.д ....

Я считаю, что вы также должны взглянуть на мобильные документы jquery.

Надеюсь, это поможет.

0
добавлено

Вот объяснение того, как настраивать темы JQM. Проверьте этот

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)