【问题标题】:How to show ajax loading icon with Django EndlessPagination?如何使用 Django EndlessPagination 显示 ajax 加载图标?
【发布时间】:2014-02-25 10:25:15
【问题描述】:

我正在使用 Django 无限分页

https://github.com/frankban/django-endless-pagination

现在不是显示图形加载图标,而是显示“加载”一词。是否可以以某种方式显示图形图标?我在为图标设置 URL 的选项列表中看不到任何内容。

        var defaults = {
        // Twitter-style pagination container selector.
        containerSelector: '.endless_container',
        // Twitter-style pagination loading selector.
        loadingSelector: '.endless_loading',
        // Twitter-style pagination link selector.
        moreSelector: 'a.endless_more',
        // Digg-style pagination page template selector.
        pageSelector: '.endless_page_template',
        // Digg-style pagination link selector.
        pagesSelector: 'a.endless_page_link',
        // Callback called when the user clicks to get another page.
        onClick: function() {},
        // Callback called when the new page is correctly displayed.
        onCompleted: function() {},
        // Set this to true to use the paginate-on-scroll feature.
        paginateOnScroll: false,
        // If paginate-on-scroll is on, this margin will be used.
        paginateOnScrollMargin : 1,
        // If paginate-on-scroll is on, it is possible to define chunks.
        paginateOnScrollChunkSize: 0
    },

【问题讨论】:

  • 能否在页面上有一个img元素并调整loadingSelector使其包含在内?

标签: jquery ajax django django-endless-pagination


【解决方案1】:

你必须覆盖一个模板

endless/show_more.html - 并放在那里 loading.gif :)

{% load i18n %}
{% load static %}
{% if querystring %}
    <div class="clearfix"></div>
    <div class="endless_container">
        <a class="endless_more" href="{{ path }}{{ querystring }}"
            rel="{{ querystring_key }}">
            <button>Więcej</button></a>
        <div class="endless_loading" style="display: none;">
            <img src="{% static "img/ajax-loader.gif" %}"></div>
    </div>
{% endif %}

【讨论】:

    【解决方案2】:

    在settings.py中设置图片:

    ENDLESS_PAGINATION_LOADING = ""

    这里列出了所有其他选项:

    http://django-endless-pagination.readthedocs.org/en/latest/customization.html

    【讨论】:

      猜你喜欢
      • 2014-02-26
      • 2012-06-05
      • 2012-03-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-19
      • 1970-01-01
      相关资源
      最近更新 更多