Как использовать один и тот же заголовок для нескольких страниц внутри одного HTML-файла - PullRequest
Новая
       1

Как использовать один и тот же заголовок для нескольких страниц внутри одного HTML-файла

1 голос
/ 01 февраля 2012

Я хочу создать приложение для iPad на базе HTML5 / CSS3, и я узнал о JQuery Mobile и попытался его использовать.Вот как это выглядит:

Screenshot from my mobile app

Это страница сводки, когда пользователь нажимает на один из элементов сетки, он должен перейти на соответствующую страницу сведений.(Нажмите на сетку «а», чтобы перейти на внутреннюю страницу с идентификатором «blockA» и т. Д.).

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

  1. Я хочу, чтобы мой заголовок + фотография и сводка + панель "информация" были исправлены.Единственное решение, которое я нашел, - это скопировать / вставить заголовочный div на мою страницу "blockA" и в 5 других, которые я нашел действительно раздражающими.По сути, я хочу, чтобы мой верхний экран был исправлен, а нижний экран изменился при переходе по ссылкам.Я думал об использовании jquery append методов и тому подобного, но есть ли какой-нибудь «нативный» способ сделать это?
  2. Мой заголовок было действительно трудно вывести, как вы можете видеть на картинке.Мне пришлось немного изменить CSS.Есть ли более простой способ?Какой-то класс, который я пропустил в структуре JQuery CSS, может быть?Не могу найти исчерпывающий список классов для JQM.
  3. Как установить высоту для моих различных компонентов без изменения CSS.

Вот мой HTML-код: 

    <body>
    <div data-role="page" id="page_main" style="min-height: 496px; ">
        <div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
            <h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
            <ul data-role="listview">
                <li class="pta-file-content" data-icon="custom" data-theme="c">
                    <img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='mail'>whatever.x@mail.com</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <h1 class="ui-title">Informations</h1>
        </div>

            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <a href="#blockA"><span id='ptaGetUserBlockA'>a</span></a>
                </div>
                <div class="ui-block-b">
                    <a href="#blockB"><span id='ptaGetUserBlockB'>b</span></a>
                </div>
                <div class="ui-block-c">
                    <a href="#blockC"><span id='ptaGetUserBlockC'>c</span></a>
                </div>
                <div class="ui-block-a">
                    <a href="#blockD"><span id='ptaGetUserBlockD'>d</span></a>
                </div>
                <div class="ui-block-b">
                    <a href="#blockE"><span id='ptaGetUserBlockE'>e</span></a>
                </div>
                <div class="ui-block-c">
                    <a href="#blockF"><span id='ptaGetUserBlockF'>f</span></a>
                </div>
            </div>

    </div>
    <div data-role="page" data-title="Page Foo" id="blockA">
        <div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
            <h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
            <ul data-role="listview">
                <li class="pta-file-content" data-icon="custom" data-theme="c">
                    <img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='mail'>whatever.x@mail.com</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <h1 class="ui-title">Informations</h1>
        </div>
        mon bloc A
    </div>
</body>

Не смотрите на диапазоны ptaGetUser, я должен работать над моей более поздней средой персистентности, чтобы добавить бесшовную персистентность к HTML-страницам, подобным этой.Пока что это здесь просто даром.Я также только добавил первый блок для этого примера.

Мой CSS, чтобы сделать это правильное измерение: 

.ui-title,.ui-title
{
    height:24px;
}

.banner
{
    height:45px;
    padding: 0px 15px !important;
}

.ui-li-thumb, .ui-li-icon {
    max-width:165px;
    max-height:165px;
}

.pta-file-content
{
    height:148px;
}

.ui-li-has-thumb
{
    padding-left: 165px !important;
}
.ui-grid-a
{
    padding-top: 5px;
}
.ui-grid-b
{
    height:543px;
    width: 1022px;
}

.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b,.ui-grid-b .ui-block-c
{
    height:50%;
    width:32%;
    border: 1px solid black;
}

Весь экран скользит, когда я нажимаю на первый элемент сетки, чтобыпоказать страницу.Как вы можете видеть, я скопировал весь заголовок во второй раздел страницы, что очень плохо для удобства чтения кода.У меня также есть проблемы с CSS с моими границами сетки, так как они не показывают нижние границы, как я могу добавить границы в сетку без изменения CSS?

Ответы [ 2 ]

1 голос
/ 04 февраля 2012

1) В настоящее время jQuery Mobile не предлагает постоянные верхние и нижние колонтитулы, но в следующей версии 1.1 они появятся.Останутся ли они на странице во время переходов или нет - это вопрос, на который пока нет ответа.Лучше всего использовать какой-нибудь серверный язык для своих страниц, а затем установить заголовок в качестве включаемого.Таким образом, вам не нужно копировать и вставлять несколько страниц.

2) jQuery Mobile отлично подходит для создания приложений, но чтобы получить что-то действительно нестандартное, вы должны написать это самостоятельно;будь то CSS или HTML или оба.

3) Единственный способ достичь пользовательских высот для ваших элементов - это написать собственный CSS.

0 голосов
/ 02 февраля 2012

Похоже, вы пытаетесь сделать многое без изменения CSS.Почему это требование вашего проекта?

  1. Похоже, вы ищете постоянный заголовок. Начните здесь с документацией нижнего колонтитула JQM.Они охватывают постоянство, и оно должно быть одинаковым для заголовков.Если документы JQM не решают эту проблему, ознакомьтесь с этой другой статьей Stackoverflow .

  2. Если вы ищете пользовательскую конфигурацию, ознакомьтесь с самой нижней частьюэто документация по заголовкам JQM .Если это не совсем так, вы также можете попробовать сетку макетов JQM .В противном случае вам понадобится CSS, будь то встроенный или другой.

  3. Хотя я не уверен, что полностью понимаю проблему, я слышал, что CSS / HTML следует использовать для управления макетомширина, но не высота.Извините, но не могу найти статьи, подтверждающие это, поэтому давайте рассмотрим одну философию дизайна.Точно так же, этот пост расскажет вам, как равномерно сбалансировать высоту с помощью CSS .

Что касается вашего последнего вопроса о границах, вам придется использовать CSS для управленияих.Независимо от того, делаете ли вы это встраиваемо или в виде таблицы стилей, подобной той, которая была создана с помощью JQM Themeroller , я не знаю другого способа стилизации границ, кроме CSS.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...