django 1.8 官方文档翻译:5-2-2 表单素材 ( Media 类)
表单素材 ( Media
类)
渲染有吸引力的、易于使用的web表单不仅仅需要HTML – 同时也需要CSS样式表,并且,如果你打算使用奇妙的web2.0组件,你也需要在每个页面包含一些JavaScript。任何提供的页面都需要CSS和JavaScript的精确配合,它依赖于页面上所使用的组件。
这就是素材定义所导入的位置。Django允许你将一些不同的文件 – 像样式表和脚本 – 与需要这些素材的表单和组件相关联。例如,如果你想要使用日历来渲染DateField,你可以定义一个自定义的日历组件。这个组件可以与渲染日历所需的CSS和JavaScript关联。当日历组件用在表单上的时候,Django可以识别出所需的CSS和JavaScript文件,并且提供一个文件名的列表,以便在你的web页面上简单地包含这些文件。
素材和Django Admin
Django的Admin应用为日历、过滤选择等一些东西定义了一些自定义的组件。这些组件定义了素材的需求,DJango Admin使用这些自定义组件来代替Django默认的组件。Admin模板只包含在提供页面上渲染组件所需的那些文件。
如果你喜欢Django Admin应用所使用的那些组件,可以在你的应用中随意使用它们。它们位于django.contrib.admin.widgets
。
选择哪个JavaScript工具包?
现在有许多JavaScript工具包,它们中许多都包含组件(比如日历组件),可以用于提升你的应用。Django 有意避免去称赞任何一个JavaScript工具包。每个工具包都有自己的有点和缺点 – 要使用适合你需求的任何一个。Django 有能力集成任何JavaScript工具包。
作为静态定义的素材
定义素材的最简单方式是作为静态定义。如果使用这种方式,定义在Media
内部类中出现,内部类的属性定义了需求。
这是一个简单的例子:
from django import formsclass CalendarWidget(forms.TextInput):class Media:css = {'all': ('pretty.css',)}js = ('animations.js', 'actions.js')
上面的代码定义了 CalendarWidget
,它继承于TextInput
。每次CalendarWidget在表单上使用时,表单都会包含CSS文件pretty.css
,以及JavaScript文件animations.js
和 actions.js
。
静态定义在运行时被转换为名为media
的组件属性。CalendarWidget
实例的素材列表可以通过这种方式获取:
>>> w = CalendarWidget()
>>> print(w.media)
<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://static.example.com/animations.js"></script>
<script type="text/javascript" src="http://static.example.com/actions.js"></script>
下面是所有可能的Media
选项的列表。它们之中没有必需选项。
css
各种表单和输出媒体所需的,描述CSS的字典。
字典中的值应该为文件名称的列表或者元组。对于如何指定这些文件的路径,详见路径的章节。
字典中的键位输出媒体的类型。它们和媒体声明中CSS文件接受的类型相同: ‘all’, ‘aural’, ‘braille’, ‘embossed’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’ 和‘tv’。如果你需要为不同的媒体类型使用不同的样式表,要为每个输出媒体提供一个CSS文件的列表。下面的例子提供了两个CSS选项 – 一个用于屏幕,另一个用于打印:
class Media:css = {'screen': ('pretty.css',),'print': ('newspaper.css',)}
如果一组CSS文件适用于多种输出媒体的类型,字典的键可以为输出媒体类型的逗号分隔的列表。在下面的例子中,TV和投影仪具有相同的媒体需求:
class Media:css = {'screen': ('pretty.css',),'tv,projector': ('lo_res.css',),'print': ('newspaper.css',)}
如果最后的CSS定义即将被渲染,会变成下面的HTML:
<link href="http://static.example.com/pretty.css" type="text/css" media="screen" rel="stylesheet" />
<link href="http://static.example.com/lo_res.css" type="text/css" media="tv,projector" rel="stylesheet" />
<link href="http://static.example.com/newspaper.css" type="text/css" media="print" rel="stylesheet" />
js
所需的JavaScript文件由一个元组来描述。如何制定这些文件的路径,详见路径一节。
extend
一直布尔值,定义了Media
声明的继承行为。
通常,任何使用静态Media
定义的对象都会继承所有和父组件相关的素材。无论父对象如何定义它自己的需求,都是这样。例如,如果我们打算从上面的例子中扩展我们的基础日历控件:
>>> class FancyCalendarWidget(CalendarWidget):
... class Media:
... css = {
... 'all': ('fancy.css',)
... }
... js = ('whizbang.js',)>>> w = FancyCalendarWidget()
>>> print(w.media)
<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
<link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://static.example.com/animations.js"></script>
<script type="text/javascript" src="http://static.example.com/actions.js"></script>
<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>
FancyCalendar 组件继承了所有父组件的素材。如果你不想让Media
以这种方式被继承,要向Media
声明中添加 extend=False
声明:
>>> class FancyCalendarWidget(CalendarWidget):
... class Media:
... extend = False
... css = {
... 'all': ('fancy.css',)
... }
... js = ('whizbang.js',)>>> w = FancyCalendarWidget()
>>> print(w.media)
<link href="http://static.example.com/fancy.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>
如果你需要对继承进行更多控制,要使用动态属性来定义你的素材。动态属性可以提供更多的控制,来控制继承哪个文件。
Media as a dynamic property
如果你需要对素材需求进行更多的复杂操作,你可以直接定义media
属性。这可以通过定义一个返回forms.Media
实例的组件属性来实现。forms.Media
的构造器接受 css
和 js
关键字参数,和在静态媒体定义中的格式相同。
例如,我们的日历组件的静态定义可以定义成动态形式:
class CalendarWidget(forms.TextInput):def _media(self):return forms.Media(css={'all': ('pretty.css',)},js=('animations.js', 'actions.js'))media = property(_media)
对于如何构建动态media
属性的的返回值,详见媒体对象一节。
素材定义中的路径
用于指定素材的路径可以是相对的或者绝对的。如果路径以 /
,http://
或者https://
开头,会被解释为绝对路径。所有其它的路径会在开头追加合适前缀的值。
作为 staticfiles app的简介的一部分,添加了两个新的设置,它们涉及到渲染完整页面所需的“静态文件”:STATIC_URL
和STATIC_ROOT
。
Django 会检查是否STATIC_URL
设置不是None
,来寻找合适的前缀来使用,并且会自动回退使用MEDIA_URL
。例如,如果你站点的 MEDIA_URL
是 'http://uploads.example.com/'
并且 STATIC_URL
是None
:
>>> from django import forms
>>> class CalendarWidget(forms.TextInput):
... class Media:
... css = {
... 'all': ('/css/pretty.css',),
... }
... js = ('animations.js', 'http://othersite.com/actions.js')>>> w = CalendarWidget()
>>> print(w.media)
<link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://uploads.example.com/animations.js"></script>
<script type="text/javascript" src="http://othersite.com/actions.js"></script>
但如果STATIC_URL
为 'http://static.example.com/'
:
>>> w = CalendarWidget()
>>> print(w.media)
<link href="/css/pretty.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://static.example.com/animations.js"></script>
<script type="text/javascript" src="http://othersite.com/actions.js"></script>
Media
对象
当你访问表单上的一个组件的media
属性时,返回值是一个forms.Media
对象。就像已经看到的那样,表示 Media
对象的字符串,是在你的HTML页面的<head>
代码段包含相关文件所需的HTML。
然而,Media
对象具有一些其它的有趣属性。
素材的子集
如果你仅仅想得到特定类型的文件,你可以使用下标运算符来过滤出你感兴趣的媒体。例如:
>>> w = CalendarWidget()
>>> print(w.media)
<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://static.example.com/animations.js"></script>
<script type="text/javascript" src="http://static.example.com/actions.js"></script>>>> print(w.media['css'])
<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
当你使用下标运算符的时候,返回值是一个新的 Media
对象,但是只含有感兴趣的媒体。
组合Media
对象
Media
对象可以添加到一起。添加两个Media
的时候,产生的Media
对象含有二者指定的素材的并集:
>>> from django import forms
>>> class CalendarWidget(forms.TextInput):
... class Media:
... css = {
... 'all': ('pretty.css',)
... }
... js = ('animations.js', 'actions.js')>>> class OtherWidget(forms.TextInput):
... class Media:
... js = ('whizbang.js',)>>> w1 = CalendarWidget()
>>> w2 = OtherWidget()
>>> print(w1.media + w2.media)
<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://static.example.com/animations.js"></script>
<script type="text/javascript" src="http://static.example.com/actions.js"></script>
<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>
表单上的Media
组件并不是唯一拥有media
定义的对象 – 表单可以定义media
。在表单上定义media
的规则和组件上面一样:定义可以为静态的或者动态的。声明的路径和继承规则也严格一致。
无论是否你定义了media
, 所有表单对象都有media
属性。这个属性的默认值是,向所有属于这个表单的组件添加media
定义的结果。
>>> from django import forms
>>> class ContactForm(forms.Form):
... date = DateField(widget=CalendarWidget)
... name = CharField(max_length=40, widget=OtherWidget)>>> f = ContactForm()
>>> f.media
<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://static.example.com/animations.js"></script>
<script type="text/javascript" src="http://static.example.com/actions.js"></script>
<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>
如果你打算向表单关联一些额外的素材 – 例如,表单布局的CSS – 只是向表单添加Media
声明就可以了:
>>> class ContactForm(forms.Form):
... date = DateField(widget=CalendarWidget)
... name = CharField(max_length=40, widget=OtherWidget)
...
... class Media:
... css = {
... 'all': ('layout.css',)
... }>>> f = ContactForm()
>>> f.media
<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
<link href="http://static.example.com/layout.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://static.example.com/animations.js"></script>
<script type="text/javascript" src="http://static.example.com/actions.js"></script>
<script type="text/javascript" src="http://static.example.com/whizbang.js"></script>
译者:Django 文档协作翻译小组,原文:Integrating media。
本文以 CC BY-NC-SA 3.0 协议发布,转载请保留作者署名和文章出处。
Django 文档协作翻译小组人手紧缺,有兴趣的朋友可以加入我们,完全公益性质。交流群:467338606。
django 1.8 官方文档翻译:5-2-2 表单素材 ( Media 类)相关推荐
- django 1.8 官方文档翻译: 5-1-1 使用表单
使用表单 关于这页文档 这页文档简单介绍Web 表单的基本概念和它们在Django 中是如何处理的.关于表单API 某方面的细节,请参见表单 API.表单的字段和表单和字段的检验. 除非你计划构建的网 ...
- django 1.8 官方文档翻译: 2-5-7 自定义查找
自定义查找 New in Django 1.7. Django为过滤提供了大量的内建的查找(例如,exact和icontains).这篇文档阐述了如何编写自定义查找,以及如何修改现存查找的功能.关于查 ...
- django 1.8 官方文档翻译: 2-5-6 多数据库
多数据库 这篇主题描述Django 对多个数据库的支持.大部分Django 文档假设你只和一个数据库打交道.如果你想与多个数据库打交道,你将需要一些额外的步骤. 定义你的数据库 在Django中使用多 ...
- django 1.8 官方文档翻译:2-1-1 模型语法
模型 模型是你的数据的唯一的.权威的信息源.它包含你所储存数据的必要字段和行为.通常,每个模型对应数据库中唯一的一张表. 基础: 每个模型都是django.db.models.Model 的一个Pyt ...
- django 1.8 官方文档翻译:6-3 Django异常
Django异常 DJango会抛出一些它自己的异常,以及Python的标准异常. Django核心异常 Django核心异常类定义在django.core.exceptions中. ObjectDo ...
- django 1.8 官方文档翻译:13-12 验证器
验证器 编写验证器 验证器是一个可调用的对象,它接受一个值,并在不符合一些规则时抛出ValidationError异常.验证器有助于在不同类型的字段之间重复使用验证逻辑. 例如,这个验证器只允许偶数: ...
- django 1.8 官方文档翻译:9-1-4 格式本地化
格式本地化 概览 Django的格式化系统可以在模板中使用当前地区特定的格式,来展示日期.时间和数字.也可以处理表单中输入的本地化. 当它被开启时,访问相同内容的两个用户可能会看到以不同方式格式化的日 ...
- django 1.8 官方文档翻译:5-1-4 内建的Widget
Widgets Widget 是Django 对HTML 输入元素的表示.Widget 负责渲染HTML和提取GET/POST 字典中的数据. 小贴士 不要将Widget 与表单字段搞混淆.表单字段负 ...
- django 1.8 官方文档翻译:5-1-2 表单API
表单 API 关于这篇文档 这篇文档讲述Django 表单API 的详细细节.你应该先阅读表单简介. 绑定的表单和未绑定的表单 表单要么是绑定的,要么是未绑定的. 如果是绑定的,那么它能够验证数据,并 ...
最新文章
- pyspark 核心概念
- python多进程模板
- python解析库beautifulsoup_12_Python_解析库_BeautifulSoup的使用
- [YTU]_2914 ( xiaoping学构造函数)
- DOS命令查看网络信息
- 纹个鸡儿天才小熊猫_给熊猫用户的5个提示
- python读取枚举_在python中枚举(enumerate in python)
- 梯度下降来龙去脉附matlab代码
- php实用教程第3版郑阿奇课后答案_SQL Server 实用教程(第3版)课后实验答案 郑阿奇主编的 邮箱344561468@qq.com...
- 智能商场管理系统(可当做毕设)
- TomExam开源在线考试系统
- 【kaggle】Airbnb新用户的民宿预定结果预测
- 【正点原子Linux连载】第四十四章 设备树下的LED驱动实验 -摘自【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.0
- node.js请求接口
- OSError: pydot failed to call GraphViz.Please install GraphViz (https://www.graphviz.org/) and ensur
- 微软实习生招聘笔试题目
- linux怎么撤销关机命令,Linux怎么关机
- Co-LncRNA:lncRNA与蛋白编码基因的共表达网络数据库
- Stetho、 inspect
- 手机可用熵_熵_手机搜狐网
热门文章
- manjaro双系统 windows_在Windows基础上安装Manjaro双系统和基本配置
- c语言二叉树_linux学习第20节,二叉树的特性和插入、查询、删除等基本操作
- mysql 创建表_每天10分钟带你学会MySQL(三)表的创建
- 傅里叶变换 c语言程序,(快速傅里叶变换)C语言程序汇编
- 数字图像处理(三)——频域滤波
- 蓝桥杯小结,下阶段规划
- MYSQL的C 语言接口
- java parallel.for作用_“Parallel.For”for Java?
- 【JAVA SE】第五章 数组、多维数组和Arrays类
- 面试题17.04.消失的数字