Блог

Главная - Вопросы по программированию - Как создать упорядоченный список jquery Mobile с символами списка, установленными на outside?

Как создать упорядоченный список jquery Mobile с символами списка, установленными на outside?

#jquery #jquery-mobile

#jquery #jquery-mobile

Вопрос:

 <ol data-role="listview">
    <li>
        <h3>heading</h3>
        <p>description</p>
    </li>
</ol>

Результатом является: 

    1.
   Heading 
   Description

Я хочу:

     1.    Heading
          Description

Я бы подумал, что мог бы использовать list-style-position:outside в качестве встроенного стиля с тегом li. Не повезло. Если я удалю роль данных listview, стиль будет применен правильно.

Каким-то образом роль даты listview управляет стилями, я не могу понять, каким образом… Я искал строку list-style-position в файлах jquery mobile css и js, и никаких результатов возвращено не было, что здесь происходит?

Пожалуйста, какая-нибудь помощь?

PS. используя jquery mobile 1.0a4.1

Ответ №1:

Похоже, вам нужно добавить какой-нибудь пользовательский CSS

Живой пример:http://jsfiddle.net/7Bn2z/43 / Живой пример # 2: http://jsfiddle.net/7Bn2z/48 / (Немного исправлено расположение)

HTML:

 <div data-role="page" data-theme="b" id="jqm-home">
    <div data-role="content"> 
        <ol data-role="listview">
            <li>
                <span>
                    <span class="oi-li-heading">heading</span>
                    <span class="oi-li-desc">description</span>
                </span>
            </li>
        </ol>
    </div>
</div>

CSS:

 .oi-li-heading {
    font-size: 16px;
    font-weight: bold;
    margin: .6em 0;
}

.oi-li-desc {
    font-size: 12px;
    font-weight: normal;
    margin: -.5em 0 .6em;
}

Обновить:

Если у вас установлен Chrome, вы можете щелкнуть правой кнопкой мыши страницу примера здесь:http://jsfiddle.net/7Bn2z/49 / и проверить элемент. Как вы можете видеть, jQM добавляет в CSS

Итак, в примере мы начинаем с:

 <ol data-role="listview">
    <li>
        <h3>heading</h3>
        <p>description</p>
    </li>
</ol>

И jQM добавляет к этому свои теги:

 <ol data-role="listview" class="ui-listview">
    <li class="ui-li ui-li-static ui-body-c">
        <h3 class="ui-li-heading">heading</h3>
        <p class="ui-li-desc">description</p>
    </li>
</ol>

Комментарии:

1. Hrm, ваш пример, похоже, работает в jsfiddle, но когда я копирую его в свой проект, это не так. Я использую jquery.js версия v1.4.4 и jquery-mobile.js vs1.0a4.1. Я заметил, что jsfiddle не упоминает jquery mobile.

2. на самом деле я использую jquery.js версия v1.5.2 и jquery-mobile.js версия v1.0.a4.1 также я немного изменил CSS во втором примере

3. Ок, код работает. Сначала я использовал ваш оригинальный пример. Я надеюсь на лучшее решение, мне не нравится полагаться на заполнение для выравнивания объектов. Если вы просматриваете код в нескольких разных браузерах, результат не будет одинаковым. Я надеялся получить ответ о том, почему установка list-style-position в значение li не работает и как это переопределить.

4. Хм, это действительно работает, за исключением того, что когда вы добавляете другой тег, такой как теги <h3> или <p> , это отключает отображение и устанавливает новые элементы под номером вместо того, чтобы оставлять номер слева от элементов. Я подниму это как проблему и посмотрю, что скажут разработчики jQM. Вы можете следить за проблемой здесь: github.com/jquery/jquery-mobile/issues/1609

5. Вот пример работы списка номеров: jquerymobile.com/demos/1.0a4.1/docs/lists / … но, как вы можете видеть, он отображается встроенным. При добавлении тегов header и description также добавляется CSS, который отключает отображение упорядоченного списка

Ответ №2:

У меня была такая же проблема при создании нумерованного списка в моем мобильном приложении jquery. Приведенный ниже css исправил проблему для меня:

   ol.ui-listview .ui-li-heading {
    display: inline-block;
    width: 100%;
    margin-left: -1.3em;
    text-indent: 1.3em;
    vertical-align: middle;
  }