От новичка до гуру: Курсы программирования на CyberDuff

Django-crispy-forms и всплывающая подсказка

Я использую Django Crispy Forms и пытаюсь улучшить UX в своих формах, добавляя к ним всплывающие окна Bootstrap или всплывающие подсказки (динамические пузырьки, которые переключаются при наведении курсора и показывают дополнительную информацию о поле формы).

По сути, мне нужно было бы добавить этот конкретный фрагмент кода рядом с определенной меткой формы (заголовок поля ввода в форме)

<a tabindex="0" role="button" data-toggle="popover"
   data-html="true" data-trigger="hover" data-placement="auto"
   title="Extra information"
   data-content="Here is the extra information I want to show when user hovers over the information glyphicon">
    <span class="glyphicon glyphicon-info-sign"></span>
</a>

До сих пор это то, что я пробовал, и заставил его показывать ПОСЛЕ метки и поля ввода. Я хотел бы показать между ними обоими.

self.helper.layout = Layout(
            'title',
            'description',
            Field('category', css_class='form-control select select-primary select-block mbl'),
            Html('<a tabindex="0" role="button" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="auto" title="Extra information" data-content="Here is the extra information I want to show when user hovers over the information glyphicon"><span class="glyphicon glyphicon-info-sign"></span></a>'))

Как лучше всего это сделать? Я не могу найти простой способ добавить чистый HTML рядом с конкретными ярлыками.

Спасибо за вашу помощь.

django twitter-bootstrap django-forms django-crispy-forms
20.12.2014

  • Вы уже читали о манипулировании макетом? 20.12.2014
  • Да, я сделал, но мне не удалось заставить это работать. С помощью манипуляций с макетом я получил всплывающую подсказку, отображаемую как после метки, так и после поля ввода. Я хотел бы, чтобы это было видно между обоими. 20.12.2014
  • Не могли бы вы показать, что вы пробовали в отношении макетов? 20.12.2014

Ответы:


1

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

self.helper.layout = Layout(
            Field('title', template="./path/to/template/popover.html"),
            ....

шаблон может быть примерно таким:

{% load crispy_forms_field %}
    <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" {% if not field|is_checkbox %}class="form-group{% else %}class="checkbox{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if form_show_errors%}{% if field.errors %} has-error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
    {% if field.label and not field|is_checkbox and form_show_labels %}
        <label for="{{ field.id_for_label }}" class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">
            {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
        </label>
    {% endif %}

    <a tabindex="0" role="button" data-toggle="popover"
       data-html="true" data-trigger="hover" data-placement="auto"
       title="Extra information"
       data-content="Here is the extra information I want to show when user hovers over the information glyphicon">
        <span class="glyphicon glyphicon-info-sign"></span>
    </a>

     <div class="controls {{ field_class }}">
        {% crispy_field field %}
        {% include 'bootstrap3/layout/help_text_and_errors.html' %}
    </div>
</{% if tag %}{{ tag }}{% else %}div{% endif %}>

Я только что скопировал элементы из crispy_form source и добавил свой html, но в зависимости от ваших потребностей, которые можно упростить, это зависит от вас.

20.12.2014
  • Спасибо большое за вашу помощь! Если бы я хотел сделать это со всеми своими полями, как лучше всего это сделать СУХИМ способом? Думаю, я мог бы «ввести» содержимое данных для всех полей? 20.12.2014
  • более прямым способом было бы определить базовый шаблон, а в поле вы указываете шаблоны, которые расширяют этот базовый шаблон и изменяют строку содержимого. Другим способом было бы добавить дополнительный контекст к этим шаблонам и указать это в определении поля, но у меня нет правильного ответа для этой опции, и в качестве оправдания, возможно, лучше оставить строки и шаблоны там, где они принадлежат (не в определение формы) 20.12.2014
  • @cyberjoac в любом случае, исправляя мой последний комментарий, вы можете попробовать передать в поле дополнительный_контекст: Field('..',template="..", extra_context={'custom_string': _("data string,..")}) и в шаблоне попытаться отобразить это с помощью {{ custom_string }} 20.12.2014
    • Новые материалы
    Отслеживание состояния с течением времени с дифференцированием снимков
    Время от времени что-то происходит и революционизирует часть моего рабочего процесса разработки. Что-то более забавное вместо типичного утомительного и утомительного процесса разработки. В..
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных.
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных. Пожалуйста, проверьте мой пост Инструментарий специалиста по данным для кодирования категориальных переменных в..
    Игра в прятки с данными
    Игра в прятки с данными Я хотел бы, чтобы вы сделали мне одолжение и ответили на следующие вопросы. Гуглить можно в любое время, здесь никто не забивается. Сколько регионов в Гане? А как..
    «Раскрытие математических рассуждений с помощью Microsoft MathPrompter и моделей больших языков»
    TL;DR: MathPrompter от Microsoft показывает, как использовать математические рассуждения с большими языковыми моделями; 4-этапный процесс для улучшения доверия и рассуждений в математических..
    Раскройте свой потенциал в области разработки мобильных приложений: Абсолютная бесплатная серия
    Глава 6: Работа в сети и выборка данных Глава 1: Введение в React Native Глава 2: Основы React Native Глава 3: Создание пользовательского интерфейса с помощью React Native Глава 4:..
    Все о кейсах: Camel, Snake, Kebab & Pascal
    В программировании вы сталкивались с ними при именовании переменной, класса или функции. Поддержание согласованности типов и стилей случаев делает ваш код более читабельным и облегчает совместную..
    Как работает дистанционное парное программирование и почему оно может изменить вашу жизнь
    Серебряная пуля от одиночества и отвлекающих факторов во время обучения программированию Независимо от того, работаете ли вы или учитесь удаленно, велика вероятность, что одиночество и..