简介
z ui 是一套轻便、简易的UI。以下是对z ui 的一个大致的介绍:
共有blue(primary)green(success)yellow(warning)red(danger)dark五种颜色体系,并运用于导航(z-nav)、按钮(z-btn)等很多组件中。
所有class名都有z-作为前缀,目的是防止全局污染。
所有js所需的属性都是以zdata-作为前缀。z也提供了$.fn.zdata()作为获取方法。
需要注意的是 在z里的所有元素盒子属性都被定义成border-box了,如果您需要使用常规的盒子属性,只需要在需要使用的地方加上classz-box-content
z需要jQuery作为基础,所以在使用z时请确保在z.js || z.min.js之前先加载jquery,默认路径:libs/jquery.js || libs/jquery.min.js
功能与样式分离:
相信您一定有过这样的需求 -- 使用组件时只是想要它js功能并不想要它给定的样式,不然还需要重新一个个的覆盖它给定的样式。 在z里默认功能模块都是以classz-action-作为前缀的,比如说您想使用内置的幻灯组件,您只需要在您的幻灯元素上加上classz-action-slider即可,这时候z并不会给您的幻灯任何样式,您可以随意定义。当然slider组件还有别的配置办法,下边会说到。
所有的组件配置方式都有三种:
1、通过添加classz-action-来快速使用默认值配置。
2、通过$.fn.调用,不写参数时使用默认参数,填写对应参数后会替换默认参数。
3、通过在元素上设置zdata-属性来指定最高优先级的配置项。
css共有样式
字体图标
给元素添加classz-icon,挑选相应图标并获取字体编码,应用于页面
  • 转发
    
  • 图片
    
  • 表情
    
  • 位置
    
  • 用户
    
  • 音乐
    
  • 设置
    
  • 刷新
    
  • 聊天
    
  • 对号
    
  • 单选按钮
    
  • 
  • 喇叭
    
  • 聊天
    
  • 
  • 点赞
    
  • 链接
    
  • 加载
    
  • 点赞
    
  • 视频
    
  • 聊天
    
  • 
  • 导航
    
  • 
  • 好友
    
  • 首页-首页
    
  • 单选 按钮
    
  • 导航
    
  • 邮箱
    
  • cart
    
  • arrow-down
    
  • arrow-left
    
  • arrow-right
    
  • arrow-up
    
  • down
    
  • up
    
  • error
    
  • prompt
    
  • success
    
  • help
    
  • atm
    
  • 语音
    
  • 语音
    
  • 语音
    
  • 搜索-搜索
    
  • 设为私密
    
  • 客服
    
  • 皇冠
    
  • 国际
    
  • 标签
    
  • 消息
    
  • 账单
    
  • 店铺
    
  • 分享
    
  • 列表
    
  • 购物车
    
  • 钱包
    
  • 点赞
    
  • 通知
    
  • 删除
    
  • 视频
    
  • 折扣
    
  • 闹钟
    
  • 加载
    
  • 通知
    
  • 签到
    

基础
z-text-colorz-bg-color获得相应的颜色
测试文字
测试文字
测试文字
测试文字
关闭按钮:z-close
三角形:z-caret
主面板
主区域:z-content它会自动给你相对浏览器屏幕合适的宽度,并居中。
主区域
栅格
z提供了两种栅格尺寸:z-col-lg-z-col-sm-。如果您需要默认的间隔,着使用z-row来包裹即可,若不需要,就是用z-clearfix包裹。分界岭是屏幕尺寸介于768px宽的时候。
测试
测试
还有 z-sm-show || z-sm-hide z-lg-show || z-lg-hide对应尺寸的显示和隐藏
测试
测试
按钮

				
				
				
				
				
				
				
表单
输入框
下拉菜单
单选按钮
复选按钮
原始样式
输入框
下拉菜单
单选按钮
复选按钮
原始样式
表格
表格z-table 默认是有边框,隔行变色,鼠标经过变色的。如果不想要这个功能可以添加对应的class:z-table-noborderz-table-nostripedz-table-nohover
11 ww dd
22 33 44
11 ww dd
22 33 44
css组件
按钮组
按钮组是在z-btn-group包裹着z-btn形成的组件,常用于分页,垂直按钮组只需在z-btn-group上添加z-btn-group-vertical

				
下拉导航
下拉菜单本身是没有过多样式的,可以灵活营运于按钮、导航等组件上,需要在z-dropup || z-dropdown下包裹z-dropdown-menu即可
下拉测试
下拉测试
输入框组
于按钮组类似 z-input-group 可与z-btnz-inputz-btn-group组合
提示
提示
导航菜单
导航菜单默认为水平导航菜单,z-nav在此基础上添加z-nav-tree即可转变成垂直导航。树形导航默认是可全部伸缩,若想单个伸缩需在z-nav-tree上添加z-nav-toggle。 可以在导航上添加classz-action-mobilenav使导航在移动端设备中也有良好的展现

				
路径导航
Tab选项卡
tab有默认、卡片(z-tab-card)、简约(z-tab-brief)三种风格
  • 类别1
  • 类别2
  • 类别3
内容1
内容2
内容3
  • 类别1
  • 类别2
  • 类别3
内容1
内容2
内容3
  • 类别1
  • 类别2
  • 类别3
内容1
内容2
内容3
  • 类别1
  • 类别2
  • 类别3
内容1
内容2
内容3
进度条
进度条z-progress 可用颜色体系,可条纹色(添加z-progress-striped)添加z-active时,条纹色会有动态效果。包裹的部件有:进度条(z-progress-bar)、提示项(z-progress-tag)
1、购买
2、下单
3、完成
50 %
1、购买
2、下单
3、完成
50 %
警告框
aaa
aaa
aaa
aaa
弹出区域
示例里用的z-action-modalz-action-close既是提现功能跟样式分开的方便之处,不用写一行js也不用覆盖任何css就可以得到想要的功能。另一种调用的方式在js篇会说到:$('#modal').modal()。需要注意的是在关闭按钮上需要加上 zdata-remove="false"不然这个modal组件关闭的时候会被移除。当然也需要用zdata-target指定要操作的dom选择器

				
面板
面板z-panel支持颜色体系
标题
内容
标题
内容
幻灯
你可以使用z-slider来使用默认的样式,也可以通过z-action-slider只保留js功能
  • 哈哈
  • 呵呵
  • 嘿嘿
  • 哈哈
  • 呵呵
  • 嘿嘿
代码修饰器
只需要在元素上添加classz-action-code即可。其他的配置有:标题(zdata-title="string")、皮肤(zdata-skin="string")、是否转义html标签(zdata-encode="bool")、关于的链接(zdata-about-link="string")、关于的文字(zdata-about-text="string"
引用
z-quote。 支持颜色体系
字段集合
字段集合
字段集合
js组件
动态加载js、css
在js组件调用的时候,你不必特意先去加载libs里的js,因为在调用的时候z会自动判断加载所需要的库。paths默认的使用路径是和z.js所在的目录,如果您不想写全路径,可以通过配置z.root_path="string"来全局配置默认路径
/**
* @param  {[str | arr]}   paths 文件路径
* @param  {fn} cb    成功后的回调
*/
					$.loadJs(paths, cb)
					$.loadCss(paths, cb)
				
重置radio和checkbox
动态生成的radio和checkbox需要重置一下才行
/**
* 替换radio、checkbox样式
* @param  {str} box 要操作的元素集合
*/
					$.resetForm(ele)
				
弹框
弹框是modal和move的整合的拓展
/**
* @param  {str} content 内容
* @param  {str} title 标题
* @param  {str} btn 按钮文字
*/
					$.alert(content, title, btn)
/**
* @param  {str} content 内容
* @param  {str} title 标题
* @param  {arr} btns 按钮
* @param  {fn} btns 点击确认的回调
*/
					$.confirm(content, title, btns, cb)
/**
* @param  {str} title 标题
* @param  {str} holder placeholder文字
* @param  {arr} btns 按钮
* @param  {fn} btns 点击确认的回调
*/
					$.prompt(title, holder, btns, cb)
/**
* @param  {str} content 内容
* @param  {str} title 标题
* @param  {arr} btns 按钮
* @param  {str} width 宽度
* @param  {arr} offset 位置(top,left)
* @param  {fn} btns 点击按钮的回调
*/
					$.open(content, title, btns, width, offset, cb)
				
					$.toast(content, color)
					$.success(content, cb)
					$.msg(content)
				
加载进度条
					$.progressBar()
				
标签名称
					$(ele).tagName()
				
获取属性
					$(ele).zdata(name, value)
					// value 可选
				
按钮loading
loading的提示文字默认是'loading',可以通过配置zdata-loading-text="string"来设置提示文字。
					$(ele).button(type)
					// type string 可选 'loading' | 'reset'
				
日期选择
两种调用方式:1、在input上添加classz-action-datepicker。2、通过js配置$(ele).datepicker(opts)
					
					$(ele).datepicker({
						minView: "day",
				        format : "yyyy-mm-dd",
				        autoclose: true
					})
				
瀑布流
					$(ele).waterfall({
						itemSelector: '.z-waterfall-item',
		                gutter: 0,
		                isAnimated: true
					})
				
js打开的模态框
哈哈哈
					$(ele).modal(type)
					// type string 可选 'show' | 'hide'
				
ajax提交表单
					$.submit(ele, cb)
					// ele 可以是要提交的form
					// cb 完成的回调
				
提示
两种调用方式:1、元素上添加z-action-tips2、手动指定要触发的元素。要显示的内容就是元素的title属性。所以title必须有。鼠标移到下边的按钮看看效果吧。ps:移动端没有效果
					$(ele).tips()
				
移动组件
在弹框组件中已经使用了移动组件。也可以手动调用它
					$(ele).move({
						box: '.z-move',
						top: 0,
						right: 0,
						bottom: 0,
						left: 0
					})
				
幻灯
					$(ele).slider({
						speed: 500,              
						delay: 3000,             
						complete: function() {}, 
						keys: true,              
						dots: true,              
						fluid: false ,
						prev: '.z-slider-prev',
						next: '.z-slider-next',
						items: '>ul',
						item: '>li'
					})
				
返回顶部
z-action-gotop或手动指定
					$(ele).goTop()
				
代码修饰器
					$(ele).code()
				
动态进入
细心的你应该能发现在前面的浏览中有几个区域是动态从下向上进入的,那就是因为它们被添加了classz-action-anibox。动态进入也可以通过$.fn.aniBox()来调用。
					$(ele).aniBox({
						aniName: 'z-anim-upbit',
						aniTime: 500
					})
				
移动端导航
如果您自定义的导航想要在移动端拥有z提供的展现形式。可以在导航上添加z-action-mobilenav,也可以用过下边的调用方式来配置。
					$(ele).mobileNav({
						item: '.z-nav-item',
						logo: 'z-logo',
						navCls: 'z-nav-blue',
						menuCls: '',
						child: '.z-dropdown-menu',
						toggle: true
					})
				
数字输入框
					
					$(ele).numberBox({
						prev: '.z-btn.z-sub',
						next: '.z-btn.z-add',
						input: 'input',
						min: 1,
						max: null,
						step: 1
					})
				
滚动加载
此组件的功能是在滚动到底部时自动触发加载内容。
					var flow = $.flow('#content', function(page, box){
						setTimeout(function(){
							var over = page >= 3
							box.append('

加载第'+page+'页

') flow.done(over) if(over){ $.msg('模拟加载完成,2秒后模拟刷新(重置加载)') setTimeout(function(){ flow.refresh() }, 2000) } }, 1000) })
图片懒加载
快速调用方法:在img标签上添加classz-action-lazyimgsrc指定占位图片或不写。通过zdata-src="string"来指定需要动态加载的图片地址。当然也可以只用js配置。
					$(img).lazyimg(scrollElem, cb)
/**
* 图片懒加载
* @param  {str}   scrollEle 滚动元素
* @param  {fn} cb        加载完成回调
*/
				
图片加载判断
					$.loadImg(imgurl, complete, error)
				
日期格式化
快速获取指定格式的指定时间的日期。如:$.date()什么参数都不传时会获取到以timeago为格式的当前时间的日期。即为:。 通过z.date中扩展的参数可指定超过多少时间使用格式化而不是timeago,具体参数如下
					$.date(format, time)
					/** format的格式:
						"y" => 年份
						"M" => 月份
						"d" => 月份中的天数 
						"H" => 小时24H制            
						"h" => 小时12H制
						"m" => 分钟
						"s" => 秒
						"ms" => 毫秒
						"a" => AM/PM 标记 
						"w" => 星期 数字格式
						"W" => 星期 中文格式
						"q" => 一月中的第几周
						"z" => 时区
					time的格式: ["string", "number", "date"]
					timeago参数:
					z.date = {
		                format: 'M月dd日 H:mm',
		                coverTime: 24 * 60 * 60 * 1000,
			            prefixAgo: '',
			            suffixAgo: '后',
			            inPast: '快到了',
			            seconds: "小于一分钟",
			            minute: "一分钟",
			            minutes: "%d分钟",
			            hour: "一小时",
			            hours: "%d小时",
			            day: "一天",
			            days: "%d天",
			            month: "一个月",
			            months: "%d月",
			            year: "一年",
			            years: "%d年",
			            wordSeparator: "",
			            numbers: ['', "\u4E00", "\u4e24", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u4e03", "\u516b", "\u4e5d", "\u5341"]
		            }
					**/
				
通过z-action-dropdown快速添加导航伸缩功能,默认是通过点击触发,也可以通过$.fn.dropdown('hover')来手动指定鼠标悬停触发。适用于下拉菜单导航和垂直导航。前边的导航都是通过默认方式调用的。
				$(ele).dropdown(type)
				type: 'click' || 'hover'
			
相册
通过z-action-album快速调用,通过指定zdata-bigsrc="string"来指定显示的大图地址,不设定会使用图片的src。通过指定zdata-group="number"来指定分组。通过zdata-index="number"来指定显示顺序。通过设置titlezdata-title属性指定图片说明。
				
				$(ele).album()
			
悬浮卡片
通过z-action-hovercard快速调用。通过zdata-html="string"zdata-url="string"来指定获取内容的方式。zdata-html 直接填充指定的html,zdata-url 指定获取的地址,通过ajax获取填充内容
图片居中定位
相对父元素定位,效果和css的background-size:cover一样
简易数据驱动(mvvm)
听说最近mvvm很火,用数据做驱动,省去dom的选择操作。
我这里的简易版通过z-作为绑定前缀,可以绑定动作,也可以绑定属性。通过$.viewModel(opts)获取vm实例。通过vm._set(key, val, doPut)魔术方法来改变数据,从而改变对应的属性。
var vm = $.viewModel({ $ele: '#vmTest', vis: false, listFn: function(){ vm._set('list', this.value) }, toggle: function(){ vm._set('vis', !vm.vis) } })
CheckBox全选
				$.checkAll($('input[name="all"]'), $('input[name="check"]'))
				/**
     * 全选
     * @param  {ele} allEle    全选按钮元素
     * @param  {ele} childEles 被全选按钮元素
     */