CN106020799A - 一种卡片式企业通讯录设计方法 - Google Patents
一种卡片式企业通讯录设计方法 Download PDFInfo
- Publication number
- CN106020799A CN106020799A CN201610307691.9A CN201610307691A CN106020799A CN 106020799 A CN106020799 A CN 106020799A CN 201610307691 A CN201610307691 A CN 201610307691A CN 106020799 A CN106020799 A CN 106020799A
- Authority
- CN
- China
- Prior art keywords
- card
- department
- information
- address list
- employee
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/22—Procedural
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
本发明提供一种卡片式企业通讯录设计方法,包括如下步骤:创建企业通讯录信息表,包括部门信息和每一部门下的员工信息;通过Javascript或jquery对html dom操作,动态创建卡片html模板;根据所述卡片html模板逐一创建部门空白卡片,在每所述部门空白卡片中添加一部门信息,得到部门信息卡片;根据所述卡片html模板逐一创建员工空白卡片,在每所述员工空白卡片中添加一员工信息,得到员工信息卡片;编辑用于存放卡片的容器,通过所述容器将同一部门的部门信息卡片和该部门对应的员工信息卡片显示在一部门通讯录页面上,且所述页面上的所有卡片依次排列,所述卡片根据所述页面的大小自动调整位置。本发明提供灵活的企业通讯录,友好的用户界面,提高用户体验。
Description
技术领域
本发明涉及企业通讯录设计方法,尤其涉及一种卡片式企业通讯录设计方法。
背景技术
现有的企业通讯录基本上以树形加表格的形式进行布局,布局比较老式,格式固定,只能在设计好的界面中填入对应信息,无法添加新的信息栏,不利于信息扩展,且传统的通讯录的排列无规律,不利于信息查找。表格式的通讯录容易出现信息过长需要拖拉,不利于信息展示,且表格式通讯录通常设计为翻页式浏览方式,操作不够便利。
发明内容
本发明要解决的技术问题,在于提供一种卡片式企业通讯录设计方法,提供灵活的企业通讯录,友好的用户界面,提高用户体验。
本发明是这样实现的:一种卡片式企业通讯录设计方法,包括如下步骤:
步骤10、创建企业通讯录信息表,所述企业通讯录信息表包括部门信息和每一部门下的员工信息;
步骤20、通过Javascript或jquery(一种Javascript库)对html dom(文档对象模型)操作,动态创建卡片html模板;
步骤30、根据所述卡片html模板逐一创建部门空白卡片,在每所述部门空白卡片中添加一所述企业通讯录信息表中的部门信息,得到部门信息卡片;
步骤40、根据所述卡片html模板逐一创建员工空白卡片,在每所述员工空白卡片中添加一所述企业通讯录信息表中的员工信息,得到员工信息卡片;
步骤50、编辑用于存放所述部门信息卡片和员工信息卡片的容器,通过所述容器将同一部门的部门信息卡片以及该部门对应的员工信息卡片显示在一部门通讯录页面上,且所述页面上的所有部门信息卡片与员工信息卡片依次排列,所述卡片根据所述页面的大小自动调整位置。
进一步的,所述员工信息包括姓名、手机号、邮箱和头像。
进一步的,所述部门空白卡片与员工空白卡片均包括固定的头像区域与可扩展的文字区域,所述文字区域根据文字长度进行列扩展。
进一步的,所述步骤50中“所述页面上的所有部门信息卡片与员工信息卡片依次排列”具体为:所述页面上的部门信息卡片与员工信息卡片按照先部门后员工的顺序进行排列。
本发明具有如下优点:
1、通过动态创建卡片式企业通讯录,不受格式限制,便于信息扩展,提高企业通讯录的灵活性;
2、本发明提供的卡片式企业通信录更为直观,提供友好的用户界面,提高用户体验;
3、按部门逐级展示,便于信息查找,将同一部门员工信息展示在同一页面内,便于浏览操作;
4、开发时直接使用纯Javascript或者jquery(一种Javascript库)进行html元素的创建,可以快速开始编码、研发,且不需要引入额外的JS UI框架,降低对html动态创建UI学习成本。
附图说明
下面参照附图结合实施例对本发明作进一步的说明。
图1为本发明一种卡片式企业通讯录设计方法执行流程图。
图2为本发明卡片式企业通讯录效果图。
具体实施方式
如图1和图2所示,一种卡片式企业通讯录设计方法,包括如下步骤:
步骤10、创建企业通讯录信息表,所述企业通讯录信息表包括部门信息和每一部门下的员工信息,所述员工信息包括姓名、手机号、邮箱和头像;
步骤20、通过Javascript(Javascript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型)或jquery(一种Javascript库)对html dom(文档对象模型)操作,动态创建卡片html模板;
步骤30、根据所述卡片html模板逐一创建部门空白卡片,所述部门空白卡片包括固定的头像区域与可扩展的文字区域,所述文字区域根据文字长度进行列扩展,在每所述部门空白卡片中添加一所述企业通讯录信息表中的部门信息,得到部门信息卡片;
步骤40、根据所述卡片html模板逐一创建员工空白卡片,所述员工空白卡片均包括固定的头像区域与可扩展的文字区域,所述文字区域根据文字长度进行列扩展,在每所述员工空白卡片中添加一所述企业通讯录信息表中的员工信息,得到员工信息卡片;
步骤50、编辑用于存放所述部门信息卡片和员工信息卡片的容器,通过所述容器将同一部门的部门信息卡片以及该部门对应的员工信息卡片显示在一部门通讯录页面上,且所述页面上的所有部门信息卡片与员工信息卡片依次排列,具体排列方式可以按先部门信息卡片后员工信息卡片的顺序进行排列,所述卡片根据所述页面的大小自动调整位置。
本发明通过动态创建卡片式企业通讯录,不受格式限制,便于信息扩展,提高企业通讯录的灵活性,提供友好的用户界面,提高用户体验;且按部门展示信息,便于信息查找,将同一部门员工信息展示在同一页面内,无需进行翻页操作,便于浏览。另外,本发明网页开发层次清晰,Javascript代码和html代码可以清晰的分开,html模板重复利用,修改灵活;本发明采用纯Javascript或者大众化的jquery进行html元素的创建,可以快速开始编码、研发,不需要引入额外的JS UI框架,降低了html动态创建UI学习成本,且由于没有使用第三方JS UI框架,便于嵌入第三方CSS(层叠样式表),比如bootstrap css,可进一步加快html模板编写、展示效果。
虽然以上描述了本发明的具体实施方式,但是熟悉本技术领域的技术人员应当理解,我们所描述的具体的实施例只是说明性的,而不是用于对本发明的范围的限定,熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化,都应当涵盖在本发明的权利要求所保护的范围内。
Claims (4)
1.一种卡片式企业通讯录设计方法,其特征在于:包括如下步骤:
步骤10、创建企业通讯录信息表,所述企业通讯录信息表包括部门信息和每一部门下的员工信息;
步骤20、通过Javascript或jquery对html dom操作,动态创建卡片html模板;
步骤30、根据所述卡片html模板逐一创建部门空白卡片,在每所述部门空白卡片中添加一所述企业通讯录信息表中的部门信息,得到部门信息卡片;
步骤40、根据所述卡片html模板逐一创建员工空白卡片,在每所述员工空白卡片中添加一所述企业通讯录信息表中的员工信息,得到员工信息卡片;
步骤50、编辑用于存放所述部门信息卡片和员工信息卡片的容器,通过所述容器将同一部门的部门信息卡片以及该部门对应的员工信息卡片显示在一部门通讯录页面上,且所述页面上的所有部门信息卡片与员工信息卡片依次排列,所述卡片根据所述页面的大小自动调整位置。
2.根据权利要求1所述的一种卡片式企业通讯录设计方法,其特征在于:所述员工信息包括姓名、手机号、邮箱和头像。
3.根据权利要求2所述的一种卡片式企业通讯录设计方法,其特征在于:所述部门空白卡片与员工空白卡片均包括固定的头像区域与可扩展的文字区域,所述文字区域根据文字长度进行列扩展。
4.根据权利要求1所述的一种卡片式企业通讯录设计方法,其特征在于:所述步骤50中“所述页面上的所有部门信息卡片与员工信息卡片依次排列”具体为:所述页面上的部门信息卡片与员工信息卡片按照先部门后员工的顺序进行排列。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610307691.9A CN106020799A (zh) | 2016-05-11 | 2016-05-11 | 一种卡片式企业通讯录设计方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610307691.9A CN106020799A (zh) | 2016-05-11 | 2016-05-11 | 一种卡片式企业通讯录设计方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN106020799A true CN106020799A (zh) | 2016-10-12 |
Family
ID=57100279
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201610307691.9A Pending CN106020799A (zh) | 2016-05-11 | 2016-05-11 | 一种卡片式企业通讯录设计方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106020799A (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111090424A (zh) * | 2019-11-28 | 2020-05-01 | 武汉虹信技术服务有限责任公司 | 一种基于iOS的无限层级通讯录的搭建方法 |
CN112817590A (zh) * | 2021-01-22 | 2021-05-18 | 京东方科技集团股份有限公司 | 批量生成页面卡片的方法、存储介质及电子设备 |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20010021935A1 (en) * | 1997-02-21 | 2001-09-13 | Mills Dudley John | Network based classified information systems |
CN101197018A (zh) * | 2007-12-28 | 2008-06-11 | 宇龙计算机通信科技(深圳)有限公司 | 一种通讯录的排序方法及系统 |
CN101552801A (zh) * | 2009-05-20 | 2009-10-07 | 中国电信股份有限公司 | 一种在线浏览和下载用户群组通讯录的方法和系统 |
CN101795319A (zh) * | 2010-01-25 | 2010-08-04 | 华为终端有限公司 | 通讯录编辑方法及装置 |
CN103036772A (zh) * | 2012-12-21 | 2013-04-10 | 北京小米科技有限责任公司 | 一种消息发送方法及装置 |
-
2016
- 2016-05-11 CN CN201610307691.9A patent/CN106020799A/zh active Pending
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20010021935A1 (en) * | 1997-02-21 | 2001-09-13 | Mills Dudley John | Network based classified information systems |
CN101197018A (zh) * | 2007-12-28 | 2008-06-11 | 宇龙计算机通信科技(深圳)有限公司 | 一种通讯录的排序方法及系统 |
CN101552801A (zh) * | 2009-05-20 | 2009-10-07 | 中国电信股份有限公司 | 一种在线浏览和下载用户群组通讯录的方法和系统 |
CN101795319A (zh) * | 2010-01-25 | 2010-08-04 | 华为终端有限公司 | 通讯录编辑方法及装置 |
CN103036772A (zh) * | 2012-12-21 | 2013-04-10 | 北京小米科技有限责任公司 | 一种消息发送方法及装置 |
Non-Patent Citations (1)
Title |
---|
拎壶充: "基于jQuery HTML5人物介绍卡片特效", 《HTTPS://WWW.CNBLOGS.COM/LIAOHUOLIN/P/4720289.HTML》 * |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111090424A (zh) * | 2019-11-28 | 2020-05-01 | 武汉虹信技术服务有限责任公司 | 一种基于iOS的无限层级通讯录的搭建方法 |
CN111090424B (zh) * | 2019-11-28 | 2023-12-19 | 武汉虹信技术服务有限责任公司 | 一种基于iOS的无限层级通讯录的搭建方法 |
CN112817590A (zh) * | 2021-01-22 | 2021-05-18 | 京东方科技集团股份有限公司 | 批量生成页面卡片的方法、存储介质及电子设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN105373567B (zh) | 页面生成方法及客户端 | |
CN100356372C (zh) | 计算机版式文件生成方法和打开方法 | |
CN111259644B (zh) | 富文本处理方法与编辑器、设备及存储介质 | |
CN105183475A (zh) | 一种用户自定制门户网站个性化页面的方法和系统 | |
CN101025738A (zh) | 一种免模板动态网站生成方法 | |
CN104239284A (zh) | 一种图文自动排版的方法和装置 | |
CN105760358B (zh) | 电子书版面重排和电子书展示的方法及其装置 | |
CN103020237B (zh) | 一种网页更新方法和装置 | |
CN106469047A (zh) | 一种表单实现方法及装置 | |
CN103309568A (zh) | 一种电子文档批注方法、装置及终端设备 | |
CN104461484A (zh) | 前端模板的实现方法和装置 | |
US20120192047A1 (en) | Systems and methods for building complex documents | |
CN103544306A (zh) | 一种网站支持多语言显示的方法与装置 | |
CN101271463A (zh) | 版式文件逻辑结构信息的表示方法和系统 | |
CN105069060B (zh) | 一种html文档分页排版方法 | |
CN104915186B (zh) | 一种制作页面的方法和装置 | |
CN102662595A (zh) | 用于移动终端屏幕的杂志式图文混排方法 | |
CN103631475A (zh) | 切换窗口的方法和装置 | |
WO2014194321A2 (en) | Method and apparatus for browsing information | |
US20120192092A1 (en) | Systems and methods for building complex documents employing feedforward indicators | |
CN108090123A (zh) | 净化网络小说页面的方法与装置 | |
CN105095285B (zh) | 数字出版物导览目录处理方法和装置 | |
CN106020799A (zh) | 一种卡片式企业通讯录设计方法 | |
CN105404612A (zh) | 一种数字资源的显示方法及系统 | |
CN109035367A (zh) | 可视化动态展示秀文件的编辑方法及系统 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
WD01 | Invention patent application deemed withdrawn after publication | ||
WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20161012 |