python测试开发django-41.crispy-forms设计标签式导航菜单(TabHolder)
前言
xadmin的详情页面主要是用form_layout布局,学会了完全可以不用写html代码,也能做出很好看的页面。
xadmin的html页面是用的Bootstrap3框架设计的,layout布局用到的是django-crispy-forms框架,本篇详细讲下django-crispy-forms的官方文档案例
django-crispy-forms
当我们使用xadmin后台的时候,在INSTALLED_APPS里面同时添加了xadmin和crispy_forms这2个app,xadmin已经知道了,但不知道crispy_forms这个app是干什么的
可以在百度上搜到crispy_forms,顺藤摸瓜找到django-crispy-forms的github地址https://github.com/django-crispy-forms/django-crispy-forms
可以看出它是基于django-uni-form这个框架开发的,专门用于详情页面的布局设计,完美的支持Bootstrap前端框架。
它的设计理念是Forms have never been this crispy
更多功能介绍,查看官方文档https://django-crispy-forms.readthedocs.io/en/latest/
Tab&TabHolder
使用TabHolder 可以快速设计一个标签式导航菜单,不同的标签用Tab分开,Tab里面第一个参数是标签的名称,一个Tab可以设计多个Field。
TabHolder (
Tab ('First Tab' ,
'field_name_1' ,
Div ('field_name_2' )
),
Tab ('Second Tab' ,
Field ('field_name_3' , css_class = 'extra' )
)
)
标签式导航菜单
接着前面这篇python测试开发django-39.xadmin详情页面布局form_layout页面设计的基础上,添加一个标签式导航菜单案例。
关于导航菜单的更多的介绍可以看菜鸟教程地址http://www.runoob.com/bootstrap/bootstrap-navigation-elements.html
# adminx.py
import xadmin
from .models import ArticleDetail
from xadmin.layout import Main, TabHolder, Tab, Fieldset, Row, Col, AppendedText, Side, Field
class MoreActicl(object):
list_display = ['title', 'body', 'auth']
# layout布局
form_layout = (
Fieldset(u'',
Row('title', 'auth'), # Row 表示将里面的字段作为一行显示
Row('classify'),
css_class = 'unsort',
),
Fieldset(('正文内容'), # Fieldset第一个参数表示区块名称
'body',
css_class = 'unsort',
),
TabHolder(
Tab('body-raw',
Field('title', css_class="extra"),
Field('body'),
css_class = 'unsort'
),
Tab('body-json',
Field('body',)
),
css_class = 'unsort',
)
)
xadmin.site.register(ArticleDetail, MoreActicl)
打开之后页面显示效果如下图
css_class="extra"可以将输入框占一整行
python测试开发django-41.crispy-forms设计标签式导航菜单(TabHolder)的更多相关文章
- python测试开发django-36.一对一(OneToOneField)关系查询
前言 前面一篇在xadmin后台一个页面显示2个关联表(OneToOneField)的字段,使用inlines内联显示.本篇继续学习一对一(OneToOneField)关系的查询. 上一篇list_d ...
- python测试开发django-15.查询结果转json(serializers)
前言 django查询数据库返回的是可迭代的queryset序列,如果不太习惯这种数据的话,可以用serializers方法转成json数据,更直观 返回json数据,需要用到JsonResponse ...
- 2019第一期《python测试开发》课程,10月13号开学
2019第一期<python测试开发>课程,10月13号开学! 主讲老师:上海-悠悠 上课方式:QQ群视频在线教学,方便交流 本期上课时间:10月13号-12月8号,每周六.周日晚上20: ...
- python测试开发django-rest-framework-63.基于函数的视图(@api_view())
前言 上一篇讲了基于类的视图,在REST framework中,你也可以使用常规的基于函数的视图.它提供了一组简单的装饰器,用来包装你的视图函数, 以确保视图函数会收到Request(而不是Djang ...
- 《Python测试开发技术栈—巴哥职场进化记》—前言
写在前面 今年从4月份开始写一本讲Python测试开发技术栈的书,主要有两个目的,第一是将自己掌握的一些内容分享给大家,第二是希望自己能系统的梳理和学习Python相关的技术栈.当时我本来打算以故事体 ...
- python测试开发django-16.JsonResponse返回中文编码问题
前言 django查询到的结果,用JsonResponse返回在页面上显示类似于\u4e2d\u6587 ,注意这个不叫乱码,这个是unicode编码,python3默认返回的编码 遇到问题 接着前面 ...
- Python测试开发必知必会-PEP
互联网发展了许多年,不仅颠覆了很多行业,还让很多职位有了更多的用武之地.产品发布迭代速度不断加快,让测试开发这个岗位简直火得不要不要的. Python语言,作为一种更接近人来自然语言的开发语言,以简洁 ...
- 《Python测试开发技术栈—巴哥职场进化记》—软件测试工程师“兵器库”
上文<Python测试开发技术栈-巴哥职场进化记>-初来乍到,请多关照 我们介绍了巴哥入职后见到了自己的导师华哥,第一次参加团队站会,认识了团队中的开发小哥哥和产品小姐姐以及吃到了公司的加 ...
- python测试开发django-197.django-celery-beat 定时任务
前言 django-celery-beat 可以支持定时任务,把定时任务写到数据库. 接着前面这篇写python测试开发django-196.python3.8+django2+celery5.2.7 ...
随机推荐
- conda管理python包
参考:http://blog.sina.com.cn/s/blog_c3c116470102wlv5.html 查看python,numpy,scipy,matplotlib的版本及安装位置: htt ...
- sql语句添加查询字段
SELECT * FROM( SELECT ROW_NUMBER() OVER (ORDER BY r.UpdateTime desc) tempRowNum,h.BizID,h.OrgID FROM ...
- hdu 5427(排序水题)
排序 年轻的排前面 名字中可能有空格 Sample Input21FancyCoder 19962FancyCoder 1996xyz111 1997 Sample OutputFancyCoderx ...
- GMM实战
一道作业题: https://www.kaggle.com/c/speechlab-aug03 就是给你训练集,验证集,要求用GMM(混合高斯模型)预测 测试集的分类,这是个2分类的问题. $ hea ...
- 【LOJ】 #2308. 「APIO2017」商旅
题解 分数题可以想到分数规划,我们预处理出从i到j卖什么货物赚的最多,然后把每条边的边权改成"利润 - 效率 × 时间" 用spfa找正环即可 代码 #include <bi ...
- OpenCV中的SVM参数优化
OpenCV中的SVM参数优化 svm参数优化opencv SVMSVR参数优化CvSVMopencv CvSVM SVM(支持向量机)是机器学习算法里用得最多的一种算法.SVM最常用的 ...
- PMP 考试 形式
200 道单选题- 考试时间为4个小时(上午9点到下午1点) 1年4次考试时间 2017年 3月18 6月24 9月9 10月9 考试费用3300 PMBOK
- 不同浏览器的userAgent
一.IE浏览器 //IE6 "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)" //IE7 "Mozill ...
- 我的php.ini上传文件配置
可以通过phpinfo查看.当前的配置信息 # php -i | grep php.ini //查看php.ini位置 file_uploads = on ...
- KVM基于X86硬件辅助的虚拟化技术实现机制【转】
内存虚拟化 Shadow Paging 作者 Shawn 在其中文博客中很详尽地介绍了 KVM 在只支持一级分页的 x86 平台上用 “Shadow Paging”进行 MMU 虚拟化的实现,由于目前 ...