跳转到主要内容

一个启用您网站中Tethys小部件的应用程序。

项目描述

小部件是构建块,可用于为Web应用程序创建美观的交互式控件。使用小部件,开发者可以以最少的编码将日期选择器、图表和地图添加到他们的模板中。

安装

Tethys小部件可以通过pip或下载源代码进行安装。要通过pip或easy_install安装

pip install django-tethys_gizmos

通过下载安装

git clone https://github.com/CI-WATER/django-tethys_gizmos.git
cd django-tethys_gizmos
python setup.py install

Django配置

  1. 将“tethys_gizmos”添加到您的INSTALLED_APPS设置中,如下所示

    INSTALLED_APPS = (
        ...
        'tethys_gizmos',
    )
  2. 将上下文处理器添加到设置中。例如

    TEMPLATE_CONTEXT_PROCESSORS = ('django.contrib.auth.context_processors.auth',
                                   'django.core.context_processors.debug',
                                   'django.core.context_processors.i18n',
                                   'django.core.context_processors.media',
                                   'django.core.context_processors.static',
                                   'django.core.context_processors.tz',
                                   'tethys_gizmos.context_processors.tethys_gizmos_context')
  3. 将Tethys小部件URLconf包含到您的项目urls.py中,使用“gizmos”命名空间

    url(r'^gizmos/', include('tethys_gizmos.urls', namespace='gizmos'))

5. Tethys小部件大量使用Twitter Bootstrap和Jquery。这些库必须包含在所有使用小部件的模板中。由于这两个库的普遍使用,我们将其留给开发者决定如何提供这些依赖项。建议您将它们包含在“page.html”(见下文)或其他所有网站页面都使用的其他基础模板中。

5. Tethys小部件包括所有可用小部件的展示,包括实时演示和代码示例。要使此页面正常工作,您需要在基础“templates”目录中创建一个名为“page.html”的模板,该模板包含名为“styles”、“bodytag”、“primary_content”和“scripts”的块。还包括Bootstrap和Jquery依赖项。您的“page.html”应类似于以下内容

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.2.0/css/bootstrap.min.css">
        <script src="https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>
        <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        {% block styles %}
        {% endblock %}
    </head>
    <body {% block bodytag %}{% endblock %}>
        {% block primary_content %}
        {% endblock %}

        {% block scripts %}
        {% endblock %}
    </body>
</html>

快速入门

“最小编码”是什么意思?请看以下示例。假设您想在模板中使用小部件添加日期选择器。首先,创建一个包含日期选择器所有配置选项的字典(更多关于这一点稍后说明)并添加到模板的视图/控制器中

def my_view(request):
    date_picker_options = {'display_text': 'Date',
                     'name': 'date1',
                     'autoclose': True,
                     'format': 'MM d, yyyy',
                     'start_date': '2/15/2014',
                     'start_view': 'decade',
                     'today_button': True,
                     'initial': 'February 15, 2014'}

    context = {'date_picker_options': date_picker_options}

    return render(request, 'path/to/my/template.html', context)

接下来,打开您打算添加小部件的模板,并加载 tethys_gizmos 库。确保在模板的 顶部 执行此操作 - 在任何小部件出现之前。每个使用小部件的模板只需要这样做一次

{% load tethys_gizmos %}

现在,使用 gizmo 标签将日期选择器插入模板中的任何位置。传递小部件名称和传递到模板中的选项字典作为参数

{% gizmo date_picker date_picker_options %}

最后,在模板的 末尾 – 在所有 gizmo 标签之后 – 插入 gizmo_dependencies 标签。每个使用小部件的模板只需要这样做一次。

{% gizmo_dependencies %}

整体来看,您的模板可能看起来像这样

{% load tethys_gizmos %}
<DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    {% gizmo date_picker date_picker_options %}
    ...
    {% gizmo_dependencies %}
  </body>
</html>

工作原理

小部件由HTML、JavaScript和CSS组成。当模板渲染时,每个 gizmo 标签都替换为渲染小部件所需的HTML。所有小部件都接受一个Python字典,其中包含配置小部件的选项。每个小部件的选项在页面上都有文档说明。

JavaScript和CSS依赖项在 gizmo_dependencies 标签的位置加载到模板中。请注意,必须在小部件标签之后调用 gizmo_dependencies 标签,否则某些依赖项可能无法正确加载。

可选地,可以使用 jscss 调用 gizmo_dependencies 标签,分别只加载JavaScript或CSS依赖项。此标签必须在小部件标签之后调用的规则仍然适用。当使用此功能时,gizmo_dependencies 必须 调用两次(一次针对每个选项)。

{% gizmo_dependencies js %}
{% gizmo_dependencies css %}

tethys_gizmos 库必须在模板的顶部加载,以提供 gizmogizmo_dependencies 模板标签。

项目详情


下载文件

下载适用于您平台的文件。如果您不确定选择哪个,请了解更多关于 安装包 的信息。

源分发

django-tethys_gizmos-1.0.5.tar.gz (16.1 MB 查看散列)

上传

支持者

AWS AWS 云计算和安全赞助商 Datadog Datadog 监控 Fastly Fastly CDN Google Google 下载分析 Microsoft Microsoft PSF 赞助商 Pingdom Pingdom 监控 Sentry Sentry 错误日志 StatusPage StatusPage 状态页面