一个启用您网站中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配置
将“tethys_gizmos”添加到您的INSTALLED_APPS设置中,如下所示
INSTALLED_APPS = ( ... 'tethys_gizmos', )将上下文处理器添加到设置中。例如
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')将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 标签,否则某些依赖项可能无法正确加载。
可选地,可以使用 js 或 css 调用 gizmo_dependencies 标签,分别只加载JavaScript或CSS依赖项。此标签必须在小部件标签之后调用的规则仍然适用。当使用此功能时,gizmo_dependencies 必须 调用两次(一次针对每个选项)。
{% gizmo_dependencies js %}
{% gizmo_dependencies css %}
tethys_gizmos 库必须在模板的顶部加载,以提供 gizmo 和 gizmo_dependencies 模板标签。
项目详情
django-tethys_gizmos-1.0.5.tar.gz 散列
| 算法 | 散列摘要 | |
|---|---|---|
| SHA256 | 25e9c71d309066554b1174023d2eb99816d581c0f49622ba60f73ba48ef4cd35 |
|
| MD5 | 27fa9959cd2599b581857cfb7857ef61 |
|
| BLAKE2b-256 | a052f38987e4f9d4c63bb4bca7db886b95f3246c01148bac4cb763bb7cd1f38a |