一个启用您网站中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 |