first commit
这个提交包含在：
@@ -0,0 +1,453 @@
|
||||
<#def title = "输入框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。"/>
|
||||
<#def prevUrl = "../js/query.htm"/>
|
||||
<#def nextUrl = "button.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
//去除多余的cover代码
|
||||
html = Z.S.replaceAll(html, /<span\sclass="z-cover((?!>).)+>/g, '');
|
||||
html = Z.S.replaceAll(html, /<div\sclass="z-absolute((?!>).)+>.+span>/g, '');
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
</script>
|
||||
${zhiqim_com_head_end()}
|
||||
|
||||
${zhiqim_com_mobileUI_scrollJs()}
|
||||
${zhiqim_com_body()}
|
||||
${zhiqim_com_topnav("ui")}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
|
||||
${zhiqim_com_container_ui("ZmUI", "form", "input")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "表单", "输入框")}
|
||||
|
||||
<!-- content开始 -->
|
||||
<div id="mobileUI_content" class="content">
|
||||
|
||||
<!-- 左侧详情 -->
|
||||
<div class="mobileUI-left">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
|
||||
<p class="z-text-blue">自动提示关键字：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
输入内容，匹配数据库显示可选项；支持键盘“上”、“下”键选择，鼠标、“回车”选中
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、自动提示关键字 -->
|
||||
<div class="tutorial title">一、纯文本框，不显示历史记录、显示高度为5条选框高度</div>
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="min-height:200px;"><script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var searchAutoList = new Z.SearchAutoList({
|
||||
id: "auto_input", //输入框 id
|
||||
ajaxClassName: "com.zhiqim.zhiqim.ui.SearchInputAjaxList", //ajax调用的类名
|
||||
ajaxMethodName: "getKeywordsList", //ajax调用的方法名
|
||||
history: 0, //可选项；是否显示历史记录，默认为 “1” 显示
|
||||
listMax: 5, //可选项；结果列表的显示高度，默认为 “10”
|
||||
splitType: ";", //可选项；返回值中的分隔符，默认为 “;”
|
||||
callback: null //可选项；选中后的回调函数，默认为 null，this 为定义的 Z.SearchAutoList 对象
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<input id="auto_input" class="z-input z-large z-w300" type="text">
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、前三个参数为必填项，缺一不可<br>
|
||||
2、Ajax的回调结果为字符串型，字符的分隔符号由类方法决定<br>
|
||||
3、splitType 为可选项，默认值为 “;”，字符的分隔符号不为 “;” 时需要定义<br>
|
||||
</div>
|
||||
</section>
|
||||
<div class="tutorial title">二、带按钮的搜索框，显示历史记录，显示高度为10条选项高度</div>
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="min-height:200px;"><script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var searchAutoList2 = new Z.SearchAutoList({
|
||||
id: "auto_wrap", //盒子 id
|
||||
ajaxClassName: "com.zhiqim.zhiqim.ui.SearchInputAjaxList", //ajax调用的类名
|
||||
ajaxMethodName: "getKeywordsList", //ajax调用的方法名
|
||||
callback: function(){ //可选项；选中后的回调函数，默认为 null，this 为定义的 Z.SearchAutoList 对象
|
||||
alert("输入结果： " + this.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<span id="auto_wrap" class="z-show-ib">
|
||||
<input id="auto_input2" class="z-input z-large z-w300" type="text"><button class="z-button z-mg-l-1" style="height:34px" type="submit">搜索</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、前三个参数为必填项，缺一不可<br>
|
||||
2、Ajax的回调结果为字符串型，字符的分隔符号由类方法决定<br>
|
||||
3、splitType 为可选项，默认值为 “;”，字符的分隔符号不为 “;” 时需要定义<br>
|
||||
4、callback 为可选项，表示选中后需要做的操作，默认值为 “null”，this 为定义的 Z.SearchAutoList 本身<br>
|
||||
5、callback 函数中可用到的值：this.value 为输入框内容，this.responseText 为返回的搜索结果字符串
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 右侧demo ZmUI代码 -->
|
||||
${zhiqim_turorial_ZmUI_demo_start()}
|
||||
<div class="z-bar-top">
|
||||
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
|
||||
<div class="z-title">ZhiqimUI.mobile</div>
|
||||
</div>
|
||||
<div class="z-bar-bottom">
|
||||
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
</div>
|
||||
<div class="z-container">
|
||||
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
|
||||
</div>
|
||||
${zhiqim_turorial_ZmUI_demo_end()}
|
||||
|
||||
<!-- content结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_chapter()}
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_footer()}
|
||||
|
||||
<script>
|
||||
+(function(F)
|
||||
{
|
||||
Z.SearchAutoList = Z.Class.newInstance();
|
||||
Z.SearchAutoList.prototype =
|
||||
{
|
||||
defaults:
|
||||
{
|
||||
id: null, //输入框/输入框盒子ID
|
||||
ajaxClassName: null, //Ajax调用的类名
|
||||
ajaxMethodName: null, //Ajax调用的类方法
|
||||
history: 1, //历史记录显示
|
||||
listMax: 10, //结果列表显示高度
|
||||
splitType: ";", //类方法返回的字符串结果中的分隔符
|
||||
callback: null //选中后的回调函数
|
||||
},
|
||||
|
||||
init: function()
|
||||
{//构造函数
|
||||
if (!this.id || !Z.D.has(this.id)){
|
||||
Z.alert("指定[id]出错");
|
||||
}
|
||||
this.responseText = "";
|
||||
this.$wrap = Z("#"+this.id);
|
||||
this.$input = this.$wrap;
|
||||
if (this.$wrap[0].tagName.toUpperCase() != "INPUT")
|
||||
this.$input = this.$wrap.find("input[type=text]");
|
||||
|
||||
var width = this.$wrap.offsetWidth();
|
||||
var height = this.$wrap.offsetHeight();
|
||||
var fontSize = this.$input.css("fontSize");
|
||||
this.pdLeft = this.$input.css("padding-left");
|
||||
this.pdRight = this.$input.css("padding-right");
|
||||
this.lHeight = this.$input.css("line-height");
|
||||
this.mHeight = this.listMax * parseInt(this.lHeight) + "px";
|
||||
|
||||
this.$cover = Z.$cover(this.$wrap).css({display:"inline-block",position:"relative",width:width,height:height,fontSize:fontSize});
|
||||
this.$list = Z('<div class="z-absolute z-w100p z-mg-t-1 z-bg-white z-text-left z-bd z-hide" style="left:0;top:100%;font-size:inherit;z-index:99;"></div>')
|
||||
.appendTo(this.$cover);
|
||||
|
||||
//事件绑定
|
||||
this.$input.on("focus",this.focus,this);
|
||||
this.$input.on("input",this.input,this);
|
||||
this.$input.keydown(this.doKeyDown,this);
|
||||
Z(document).click(this.docClick,this);
|
||||
},
|
||||
|
||||
execute: function()
|
||||
{//执行为空即可，统一在初始化中处理
|
||||
},
|
||||
|
||||
//获取焦点事件
|
||||
focus: function(e)
|
||||
{
|
||||
this.value = this.$input.val();
|
||||
if (this.value == "")
|
||||
return this.doHistoryList();
|
||||
if (this.$list.find('li').length == 0)
|
||||
return;
|
||||
this.$list.show();
|
||||
if (this.beforeValue != this.value)
|
||||
{//无修改时，获取焦点，不调用Ajax
|
||||
this.doAjax();
|
||||
this.beforeValue = this.value;
|
||||
}
|
||||
},
|
||||
|
||||
//input事件
|
||||
input: function(e)
|
||||
{
|
||||
this.value = this.$input.val();
|
||||
if (Z.V.isEmptyBlank(this.value))
|
||||
return this.doHistoryList();
|
||||
this.$list.show();
|
||||
this.doAjax();
|
||||
},
|
||||
|
||||
doAjax: function(e)
|
||||
{
|
||||
this.ajax = new Z.Ajax();
|
||||
this.ajax.OBJ = this;
|
||||
this.ajax.setClassName(this.ajaxClassName);
|
||||
this.ajax.setMethodName(this.ajaxMethodName);
|
||||
this.ajax.addParam(this.value);
|
||||
this.ajax.setCallback(function(){
|
||||
this.OBJ.doFilter.call(this.OBJ,this.responseText);
|
||||
});
|
||||
this.ajax.execute();
|
||||
},
|
||||
|
||||
//筛选对象，生成列表
|
||||
doFilter: function(e)
|
||||
{
|
||||
var responseText = e;
|
||||
this.$list.html("");
|
||||
var keyWordsArr = responseText.split(this.splitType);
|
||||
var htmlStr = '<ul class="z-overflow-auto" style="max-height:' + this.mHeight + '">';
|
||||
for (var i = 0;i < keyWordsArr.length;i++)
|
||||
{
|
||||
if (keyWordsArr[i].indexOf(this.value) > -1)
|
||||
htmlStr += '<li style="padding: 0 ' + this.pdRight + ' 0 ' + this.pdLeft +'; line-height:'+ this.lHeight +'; cursor: default;">'
|
||||
+ keyWordsArr[i] + "</li>";
|
||||
}
|
||||
htmlStr += "</ul>";
|
||||
Z(htmlStr).appendTo(this.$list);
|
||||
if (Z(htmlStr).html() == "")
|
||||
return this.$list.hide();
|
||||
|
||||
//绑定事件
|
||||
this.liSet = this.$list.find("li");
|
||||
this.liSet.click(this.doSelect,this);
|
||||
this.liSet.mouseenter(this.liMouseEnter,this);
|
||||
this.liSet.mouseleave(this.liMouseLeave,this);
|
||||
},
|
||||
|
||||
//鼠标选中
|
||||
doSelect: function(e)
|
||||
{
|
||||
Z.E.forbidden(e);
|
||||
var liVal = Z(Z.E.target(e)).html();
|
||||
this.beforeValue = this.value;
|
||||
this.value = liVal;
|
||||
this.$input.val(liVal);
|
||||
this.$list.hide();
|
||||
this.doAjax();
|
||||
//历史记录存储
|
||||
this.saveHistory(e);
|
||||
//选中后的回调
|
||||
this.doCallback(e);
|
||||
},
|
||||
|
||||
//空白处点击，隐藏列表
|
||||
docClick: function(e)
|
||||
{
|
||||
var target = Z.E.target(e);
|
||||
if (target == this.$input[0])
|
||||
return;
|
||||
this.$list.hide();
|
||||
if (Z.V.isEmptyBlank(this.value))
|
||||
return;
|
||||
if (this.beforeValue != this.value)
|
||||
{//解决多次调用Ajax的问题
|
||||
this.doAjax();
|
||||
this.beforeValue = this.value;
|
||||
//历史记录存储
|
||||
this.saveHistory(e);
|
||||
}
|
||||
},
|
||||
|
||||
//键盘 “上” “下” “回车”按键监听
|
||||
doKeyDown: function(e)
|
||||
{
|
||||
var keyVal = Z.E.key(e);
|
||||
if (keyVal == 38 || keyVal == 40 || keyVal == 13)
|
||||
{//上：38，下：40，回车：13
|
||||
Z.E.forbidden(e);
|
||||
if (this.liSet)
|
||||
{//有选择列表的搜索框
|
||||
var liSetLength = this.liSet.length;
|
||||
var liActive = this.$list.find(".z-bg-gray");
|
||||
var liActiveIndex = -1;
|
||||
var toIndex = null;
|
||||
if (liActive.length != 0)
|
||||
liActiveIndex = Z.EL.parentIndex(liActive[0]);
|
||||
switch (keyVal)
|
||||
{
|
||||
case 38://上
|
||||
toIndex = liActiveIndex - 1;
|
||||
if (toIndex <= -1)
|
||||
toIndex = liSetLength - 1;
|
||||
break;
|
||||
case 40://下
|
||||
toIndex = liActiveIndex + 1;
|
||||
if (toIndex == liSetLength)
|
||||
toIndex = 0;
|
||||
break;
|
||||
case 13://回车选中
|
||||
this.$input[0].blur();
|
||||
this.$list.hide();
|
||||
this.value = this.$input.val();
|
||||
this.doAjax();
|
||||
//历史记录存储
|
||||
this.saveHistory(e);
|
||||
//选中后的回调
|
||||
this.doCallback(e);
|
||||
return;
|
||||
}
|
||||
toIndex++;
|
||||
this.liSet.removeClass("z-bg-gray");
|
||||
var toLi = this.$list.find("li:nth-child(" + toIndex +")").addClass("z-bg-gray");
|
||||
this.value = toLi.html();
|
||||
this.$input.val(toLi.html());
|
||||
}
|
||||
else if (keyVal == 13)
|
||||
{//直接在输入框回车搜索
|
||||
this.value = this.$input.val();
|
||||
this.doAjax();
|
||||
//历史记录存储
|
||||
this.saveHistory(e);
|
||||
//选中后的回调
|
||||
this.doCallback(e);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//选中后的回掉函数
|
||||
doCallback: function(e)
|
||||
{
|
||||
if(!this.callback)
|
||||
return;
|
||||
this.callback(e);
|
||||
},
|
||||
|
||||
//历史记录列表展示
|
||||
doHistoryList: function(e)
|
||||
{
|
||||
if (!this.history) return;
|
||||
this.$list.html("").hide();
|
||||
if (localStorage.getItem(this.id))
|
||||
{
|
||||
var htmlStr = '<ul class="z-text-gray">';
|
||||
var hisArr = localStorage.getItem(this.id).split(";");
|
||||
for (var i = 0;i < hisArr.length;i++)
|
||||
{
|
||||
htmlStr += '<li style="padding:0 ' + this.pdRight + ' 0 ' + this.pdLeft +';line-height:'+ this.lHeight +';cursor:default;">'
|
||||
+ hisArr[i] + "</li>";
|
||||
}
|
||||
htmlStr += "</ul>";
|
||||
Z(htmlStr).appendTo(this.$list.show());
|
||||
var hisBar = '<div class="z-bg-blue z-clearfix" style="padding:0 ' + this.pdRight + ' 0 ' + this.pdLeft +';line-height:'+ this.lHeight +';cursor:default;">'
|
||||
+ '<span class="z-float-right z-pointer z-deleteBtn">清空历史</span>'
|
||||
+ '</div>';
|
||||
Z(hisBar).appendTo(this.$list.show());
|
||||
//绑定事件
|
||||
this.liSet = this.$list.find("li");
|
||||
this.liSet.click(this.doSelect,this);
|
||||
this.liSet.mouseenter(this.liMouseEnter,this);
|
||||
this.liSet.mouseleave(this.liMouseLeave,this);
|
||||
//绑定删除事件
|
||||
var $delBtn = this.$list.find(".z-deleteBtn");
|
||||
$delBtn.click(this.emptyHistory,this);
|
||||
}
|
||||
},
|
||||
|
||||
emptyHistory: function(e)
|
||||
{
|
||||
localStorage.removeItem(this.id);
|
||||
},
|
||||
|
||||
//输入完成，存储历史记录
|
||||
saveHistory: function(e)
|
||||
{
|
||||
if (!this.history) return;
|
||||
if (!localStorage.getItem(this.id))
|
||||
localStorage.setItem(this.id,"");
|
||||
var hisStr = localStorage.getItem(this.id);
|
||||
if (hisStr == "")
|
||||
return localStorage.setItem(this.id,this.value);
|
||||
//去重
|
||||
var hisArr = hisStr.split(";");
|
||||
hisArr.unshift(this.value);
|
||||
var hisObj = {};
|
||||
var resultArr = [];
|
||||
for(var i = 0; i < hisArr.length; i++)
|
||||
{
|
||||
if(!hisObj[hisArr[i]])
|
||||
{
|
||||
resultArr.push(hisArr[i]);
|
||||
hisObj[hisArr[i]] = 1;
|
||||
}
|
||||
}
|
||||
//限制个数
|
||||
if (resultArr.length > 10)
|
||||
resultArr.length = 10;
|
||||
hisStr = resultArr.join(";");
|
||||
localStorage.setItem(this.id,hisStr);
|
||||
},
|
||||
|
||||
//鼠标悬浮，背景颜色变化
|
||||
liMouseEnter: function(e)
|
||||
{
|
||||
var $thisLi = Z(Z.E.target(e));
|
||||
$thisLi.addClass("z-bg-gray");
|
||||
},
|
||||
|
||||
liMouseLeave: function(e)
|
||||
{
|
||||
var $thisLi = Z(Z.E.target(e));
|
||||
$thisLi.removeClass("z-bg-gray");
|
||||
},
|
||||
}
|
||||
}
|
||||
)(zhiqim)
|
||||
</script>
|
||||
@@ -0,0 +1,742 @@
|
||||
<#def title = "按钮样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "按钮样式是指对按钮增加样式规则，按钮分为三种，一是标准按钮、二为筛选按钮、三是多选按钮。样式规则包括按钮大小、颜色、边框颜色、选中特效等。"/>
|
||||
<#def prevUrl = "input.htm"/>
|
||||
<#def nextUrl = "calendar.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
|
||||
Z("button.z-bordered").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
|
||||
Z("button.z-bordered-box").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
});
|
||||
//-->
|
||||
</script>
|
||||
${zhiqim_com_head_end()}
|
||||
|
||||
${zhiqim_com_mobileUI_scrollJs()}
|
||||
${zhiqim_com_body()}
|
||||
${zhiqim_com_topnav("ui")}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
|
||||
${zhiqim_com_container_ui("ZmUI", "form", "button")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "表单", "按钮")}
|
||||
|
||||
<!-- content开始 -->
|
||||
<div id="mobileUI_content" class="content">
|
||||
|
||||
<!-- 左侧详情 -->
|
||||
<div class="mobileUI-left">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
|
||||
<p class="z-text-blue">按钮样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
按钮样式是指对按钮增加样式规则，按钮分为三种，一是标准按钮、二为筛选按钮、三是多选按钮。样式规则包括按钮大小、颜色、边框颜色、选中特效等。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、标准按钮 -->
|
||||
<div class="tutorial title">一、标准按钮（标准大小）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-red">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-red"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-orange">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-orange"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-yellow">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-yellow"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-green">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-green"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-cyan">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-cyan"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-blue">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-blue"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-purple">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-purple"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、标准按钮（大号） -->
|
||||
<div class="tutorial title">二、标准按钮（大号）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-large">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-large z-red">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-red"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-large z-orange">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-orange"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-large z-yellow">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-yellow"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-large z-green">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-green"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-large z-cyan">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-cyan"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-large z-blue">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-blue"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-large z-purple">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-purple"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、标准按钮（加大） -->
|
||||
<div class="tutorial title">三、标准按钮（加大）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-xlarge">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge"><i class="z-font z-add"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-red">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-red"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-orange">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-orange"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-yellow">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-yellow"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-green">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-green"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-cyan">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-cyan"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-blue">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-blue"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-purple">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-purple"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 四、标准按钮（小号） -->
|
||||
<div class="tutorial title">四、标准按钮（小号）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="42%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-small">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-small z-red">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-red"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-small z-orange">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-orange"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-small z-yellow">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-yellow"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-small z-green">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-green"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-small z-cyan">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-cyan"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-small z-blue">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-blue"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-small z-purple">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-purple"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 五、标准按钮（加小） -->
|
||||
<div class="tutorial title">五、标准按钮（加小）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="42%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-xsmall">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-red">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-red"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-orange">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-orange"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-yellow">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-yellow"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-green">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-green"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-cyan">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-cyan"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-blue">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-blue"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-purple">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-purple"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 六、筛选按钮（标准大小） -->
|
||||
<div class="tutorial title">六、筛选按钮（标准大小）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg zi-bd-rd0"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-red-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-red-bd z-red-bg zi-bd-rd0"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-orange-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-orange-bd z-orange-bg zi-bd-rd0"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-yellow-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-yellow-bd z-yellow-bg zi-bd-rd0"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-green-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-green-bg z-green-bd zi-bd-rd0"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-cyan-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-cyan-bd z-cyan-bg zi-bd-rd0"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-blue-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-blue-bd z-blue-bg zi-bd-rd0"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-purple-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-purple-bd z-purple-bg zi-bd-rd0"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 七、多选按钮（标准大小） -->
|
||||
<div class="tutorial title">七、多选按钮（标准大小）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-hover"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-red-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-red-bd z-hover"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-orange-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-orange-bd z-hover"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-yellow-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-yellow-bd z-hover"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-green-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-green-bd z-hover"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-cyan-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-cyan-bd z-hover"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-blue-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-blue-bd z-hover"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-purple-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-purple-bd z-hover"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 八、多选按钮（大号） -->
|
||||
<div class="tutorial title">八、多选按钮（大号）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-hover"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-red-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-red-bd z-hover"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-orange-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-orange-bd z-hover"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-yellow-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-yellow-bd z-hover"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-green-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-green-bd z-hover"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-cyan-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-cyan-bd z-hover"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-blue-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-blue-bd z-hover"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-purple-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-purple-bd z-hover"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 九、多选按钮（加大） -->
|
||||
<div class="tutorial title">九、多选按钮（加大）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-hover"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-red-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-red-bd z-hover"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-orange-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-orange-bd z-hover"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-yellow-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-yellow-bd z-hover"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-green-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-green-bd z-hover"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-cyan-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-cyan-bd z-hover"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-blue-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-blue-bd z-hover"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-purple-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-purple-bd z-hover"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 十、删除按钮列表 -->
|
||||
<div class="tutorial title">十、删除按钮列表</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="15%">未选中</td>
|
||||
<td width="26%">未选中代码</td>
|
||||
<td width="15%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered-del zi-bd-rd0">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-del zi-bd-rd0 z-large z-red-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered-del z-small zi-bd-rd0 z-orange-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-del zi-bd-rd0 z-xlarge z-blue-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered-del z-xsmall zi-bd-rd0 z-cyan-bd">第一个第一个第一个第一个第一个第一个</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-del zi-bd-rd0 z-xlarge z-purple-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 右侧demo ZmUI代码 -->
|
||||
${zhiqim_turorial_ZmUI_demo_start()}
|
||||
<div class="z-bar-top">
|
||||
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
|
||||
<div class="z-title">ZhiqimUI.mobile</div>
|
||||
</div>
|
||||
<div class="z-bar-bottom">
|
||||
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
</div>
|
||||
<div class="z-container">
|
||||
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
|
||||
</div>
|
||||
${zhiqim_turorial_ZmUI_demo_end()}
|
||||
|
||||
<!-- content结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_chapter()}
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,157 @@
|
||||
<#def title = "日历控件"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。"/>
|
||||
<#def prevUrl = "button.htm"/>
|
||||
<#def nextUrl = "checkInput.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
});
|
||||
|
||||
function onchangea()
|
||||
{
|
||||
}
|
||||
</script>
|
||||
${zhiqim_com_head_end()}
|
||||
|
||||
${zhiqim_com_mobileUI_scrollJs()}
|
||||
${zhiqim_com_body()}
|
||||
${zhiqim_com_topnav("ui")}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
|
||||
${zhiqim_com_container_ui("ZmUI", "form", "calendar")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "表单", "日历控件")}
|
||||
|
||||
<!-- content开始 -->
|
||||
<div id="mobileUI_content" class="content">
|
||||
|
||||
<!-- 左侧详情 -->
|
||||
<div class="mobileUI-left">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
|
||||
<p class="z-text-blue">日历控件：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、日期选择器 -->
|
||||
<div class="tutorial title">一、日期选择器</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">类型</td>
|
||||
<td width="20%">事例</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最简单的方式</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.date(this);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.date(this);" value="2015-04-11"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值和onchange方法</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.date(this);" value="2015-04-11" onchange="alert('修改值为'+this.value)"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、日期+时间选择器 -->
|
||||
<div class="tutorial title">二、日期+时间选择器</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-bd-rd8 z-lh150p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">类型</td>
|
||||
<td width="20%">未指定</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最简单的方式</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetime(this);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetime(this);" value="2015-04-11 00:00:01"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值和onchange方法<br><input id="datetime_value" class="z-input z-w150"></td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetime(this);" value="2015-04-11 00:00:01" onchange="Z('#datetime_value').val(this.value);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、日期+时分选择器 -->
|
||||
<div class="tutorial title">三、日期+时分选择器</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-bd-rd8 z-lh150p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="30%">类型</td>
|
||||
<td width="20%">未指定</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最简单的方式</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);" value="2015-04-11 00:00:00"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值和onchange方法<br><input id="datehourminute_value" class="z-input z-w150"></td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);" value="2015-04-11 00:00:00" onchange="Z('#datehourminute_value').val(this.value);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 右侧demo ZmUI代码 -->
|
||||
${zhiqim_turorial_ZmUI_demo_start()}
|
||||
<div class="z-bar-top">
|
||||
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
|
||||
<div class="z-title">ZhiqimUI.mobile</div>
|
||||
</div>
|
||||
<div class="z-bar-bottom">
|
||||
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
</div>
|
||||
<div class="z-container">
|
||||
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
|
||||
</div>
|
||||
${zhiqim_turorial_ZmUI_demo_end()}
|
||||
|
||||
<!-- content结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_chapter()}
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,184 @@
|
||||
<#def title = "日历控件"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。"/>
|
||||
<#def prevUrl = "calendar.htm"/>
|
||||
<#def nextUrl = "../dialog/dialog.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
});
|
||||
|
||||
function onchangea()
|
||||
{
|
||||
}
|
||||
</script>
|
||||
${zhiqim_com_head_end()}
|
||||
|
||||
${zhiqim_com_mobileUI_scrollJs()}
|
||||
${zhiqim_com_body()}
|
||||
${zhiqim_com_topnav("ui")}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
|
||||
${zhiqim_com_container_ui("ZmUI", "form", "checkInput")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "表单", "选择按钮")}
|
||||
|
||||
<!-- content开始 -->
|
||||
<div id="mobileUI_content" class="content">
|
||||
|
||||
<!-- 左侧详情 -->
|
||||
<div class="mobileUI-left">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
|
||||
<p class="z-text-blue">选中按钮：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
选中按钮，包括单选框、多选框、切换按钮；采用 :before 、:after 伪类元素实现，尽可能的减少代码量，而且做到手机上较好的兼容性，因为 input 伪类在桌面端 firefox、edge 不兼容。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、单选框 -->
|
||||
<div class="tutorial title">一、单选框</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">类型</td>
|
||||
<td width="20%">事例</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>超小</td>
|
||||
<td class="example"><input type="radio" class="z-radio z-xsmall"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小型</td>
|
||||
<td class="example"><input type="radio" class="z-radio z-small"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><input type="radio" class="z-radio"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大型</td>
|
||||
<td class="example"><input type="radio" class="z-radio z-large"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<td>超大</td>
|
||||
<td class="example"><input type="radio" class="z-radio z-xlarge"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、多选框 -->
|
||||
<div class="tutorial title">二、多选框</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-bd-rd8 z-lh150p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">类型</td>
|
||||
<td width="20%">未指定</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>超小</td>
|
||||
<td class="example"><input type="checkbox" class="z-checkbox z-xsmall"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小型</td>
|
||||
<td class="example"><input type="checkbox" class="z-checkbox z-small"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><input type="checkbox" class="z-checkbox"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大型</td>
|
||||
<td class="example"><input type="checkbox" class="z-checkbox z-large"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<td>超大</td>
|
||||
<td class="example"><input type="checkbox" class="z-checkbox z-xlarge"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、切换按钮 -->
|
||||
<div class="tutorial title">三、切换按钮</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-bd-rd8 z-lh150p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">类型</td>
|
||||
<td width="20%">未指定</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>超小</td>
|
||||
<td class="example"><input type="checkbox" class="z-switch z-xsmall"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小型</td>
|
||||
<td class="example"><input type="checkbox" class="z-switch z-small"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><input type="checkbox" class="z-switch"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大型</td>
|
||||
<td class="example"><input type="checkbox" class="z-switch z-large"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<td>超大</td>
|
||||
<td class="example"><input type="checkbox" class="z-switch z-xlarge"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 右侧demo ZmUI代码 -->
|
||||
${zhiqim_turorial_ZmUI_demo_start()}
|
||||
<div class="z-bar-top">
|
||||
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
|
||||
<div class="z-title">ZhiqimUI.mobile</div>
|
||||
</div>
|
||||
<div class="z-bar-bottom">
|
||||
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
</div>
|
||||
<div class="z-container">
|
||||
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
|
||||
</div>
|
||||
${zhiqim_turorial_ZmUI_demo_end()}
|
||||
|
||||
<!-- content结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_chapter()}
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,203 @@
|
||||
<#def title = "输入框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。"/>
|
||||
<#def prevUrl = "../js/query.htm"/>
|
||||
<#def nextUrl = "button.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
});
|
||||
</script>
|
||||
${zhiqim_com_head_end()}
|
||||
|
||||
${zhiqim_com_mobileUI_scrollJs()}
|
||||
${zhiqim_com_body()}
|
||||
${zhiqim_com_topnav("ui")}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
|
||||
${zhiqim_com_container_ui("ZmUI", "form", "input")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "表单", "输入框")}
|
||||
|
||||
<!-- content开始 -->
|
||||
<div id="mobileUI_content" class="content">
|
||||
|
||||
<!-- 左侧详情 -->
|
||||
<div class="mobileUI-left">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
|
||||
<p class="z-text-blue">输入框样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、输入框长度大小样式 -->
|
||||
<div class="tutorial title">一、输入框长度大小样式（默认边框灰色）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">类型</td>
|
||||
<td width="30%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认input样式</td>
|
||||
<td class="example"><input class="z-input" placeholder="默认input样式"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>加大尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-xlarge"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-large"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-small"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>加小尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-xsmall"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、输入框选中时颜色 -->
|
||||
<div class="tutorial title">二、输入框选中时颜色</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">类型</td>
|
||||
<td width="30%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为红色</td>
|
||||
<td class="example"><input type="text" class="z-input z-red"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为橙色</td>
|
||||
<td class="example"><input type="text" class="z-input z-orange"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为黄色</td>
|
||||
<td class="example"><input type="text" class="z-input z-yellow"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为绿色</td>
|
||||
<td class="example"><input type="text" class="z-input z-green"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为青色</td>
|
||||
<td class="example"><input type="text" class="z-input z-cyan"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为蓝色</td>
|
||||
<td class="example"><input type="text" class="z-input z-blue"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为紫色</td>
|
||||
<td class="example"><input type="text" class="z-input z-purple"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、输入框输入控制 -->
|
||||
<div class="tutorial title">三、输入框输入控制</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">说明</td>
|
||||
<td width="30%">验证</td>
|
||||
<td width="*">效果预览</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入数值型：</td>
|
||||
<td class="example"><input name="Numeric" class="z-input z-xlarge z-red" type="text" placeholder="请输入数值型" size="30" maxlength="60" data-options="type:Numeric;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入整型：</td>
|
||||
<td class="example"><input name="Integer" class="z-input z-xlarge z-orange" type="text" placeholder="请输入整型" size="30" maxlength="60" data-options="type:Integer;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入整数小数：</td>
|
||||
<td class="example"><input name="Decimal" class="z-input z-xlarge z-yellow" type="text" placeholder="请输入整数小数" size="30" maxlength="60" data-options="type:Decimal;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入字母：</td>
|
||||
<td class="example"><input name="Alphabetic" class="z-input z-xlarge z-green" type="text" placeholder="请输入字母" size="30" maxlength="60" data-options="type:Alphabetic;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许最多2位小数的金额：</td>
|
||||
<td class="example"><input name="Amount2R" class="z-input z-xlarge z-cyan" type="text" placeholder="请输入最多2位小数的金额" size="30" maxlength="60" data-options="type:Amount2R;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入折扣类型：</td>
|
||||
<td class="example"><input name="Discount" type="text" class="z-input z-xlarge z-blue" placeholder="请输入0.01-10折" size="30" maxlength="60" data-options="type:Discount;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许小时分钟格式(00:23)：</td>
|
||||
<td class="example"><input name="HourMinute" type="text" class="z-input z-xlarge z-purple" placeholder="请输入小时分钟格式(00:23)" size="30" maxlength="60" data-options="type:HourMinute;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 右侧demo ZmUI代码 -->
|
||||
${zhiqim_turorial_ZmUI_demo_start()}
|
||||
<div class="z-bar-top">
|
||||
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
|
||||
<div class="z-title">ZhiqimUI.mobile</div>
|
||||
</div>
|
||||
<div class="z-bar-bottom">
|
||||
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
</div>
|
||||
<div class="z-container">
|
||||
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
|
||||
</div>
|
||||
${zhiqim_turorial_ZmUI_demo_end()}
|
||||
|
||||
<!-- content结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_chapter()}
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,271 @@
|
||||
<#def title = "输入框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。"/>
|
||||
<#def prevUrl = "../js/query.htm"/>
|
||||
<#def nextUrl = "button.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
});
|
||||
</script>
|
||||
${zhiqim_com_head_end()}
|
||||
|
||||
${zhiqim_com_mobileUI_scrollJs()}
|
||||
${zhiqim_com_body()}
|
||||
${zhiqim_com_topnav("ui")}
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
|
||||
${zhiqim_com_container_ui("ZmUI", "form", "input")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "表单", "输入框")}
|
||||
|
||||
<!-- content开始 -->
|
||||
<div id="mobileUI_content" class="content">
|
||||
|
||||
<!-- 左侧详情 -->
|
||||
<div class="mobileUI-left">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
|
||||
<p class="z-text-blue">输入框样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、输入框长度大小样式 -->
|
||||
<div class="tutorial title">一、输入框长度大小样式（默认边框灰色）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">类型</td>
|
||||
<td width="30%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认input样式</td>
|
||||
<td class="example"><input type="text" class="z-input"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>加大尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-xlarge"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-large"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-small"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>加小尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-xsmall"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、输入框选中时颜色 -->
|
||||
<div class="tutorial title">二、输入框选中时颜色</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">类型</td>
|
||||
<td width="30%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为红色</td>
|
||||
<td class="example"><input type="text" class="z-input z-red"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为橙色</td>
|
||||
<td class="example"><input type="text" class="z-input z-orange"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为黄色</td>
|
||||
<td class="example"><input type="text" class="z-input z-yellow"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为绿色</td>
|
||||
<td class="example"><input type="text" class="z-input z-green"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为青色</td>
|
||||
<td class="example"><input type="text" class="z-input z-cyan"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为蓝色</td>
|
||||
<td class="example"><input type="text" class="z-input z-blue"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为紫色</td>
|
||||
<td class="example"><input type="text" class="z-input z-purple"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<style>
|
||||
/*整体*/
|
||||
.z-input-group {display:inline-block;white-space:nowrap;}
|
||||
.z-input-group>span,.z-input-group>input{vertical-align:top;border-radius:inherit;}
|
||||
.z-input-group>span{display:inline-block;width:30px;height:30px;text-align:center;border-width:1px 0;border-style:solid;border-color:#999;background-color:#eee;}
|
||||
.z-input-group>span:first-child{border-left-width:1px;}
|
||||
.z-input-group>span:last-child{border-right-width:1px;}
|
||||
.z-input-group>span>.z-font{bottom:-6px;}
|
||||
|
||||
/*边框角度*/
|
||||
.z-input-group>span:not(:first-child):not(:last-child),.z-input-group>input:not(:first-child):not(:last-child){border-radius:0;}
|
||||
.z-input-group>span:first-child,.z-input-group>input:first-child{border-top-right-radius:0;border-bottom-right-radius:0;}
|
||||
.z-input-group>span:last-child,.z-input-group>input:last-child{border-top-left-radius:0;border-bottom-left-radius:0;}
|
||||
|
||||
/*不同大小的输入框组合*/
|
||||
|
||||
|
||||
</style>
|
||||
<#-- 三、输入框联合体 -->
|
||||
<div class="tutorial title">三、输入框联合体</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">说明</td>
|
||||
<td width="30%">验证</td>
|
||||
<td width="*">效果预览</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>指示图标前置</td>
|
||||
<td class="example"><div class="z-input-group z-input-group-prepend z-bd-rd3"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>指示图标后置</td>
|
||||
<td class="example"><div class="z-input-group z-input-group-append z-bd-rd3"><input type=text class="z-input" placeholder="请输入"><span><i class="z-font z-customer"></i></span></div></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>指示图标两边</td>
|
||||
<td class="example"><div class="z-input-group z-input-group-inner z-bd-rd3"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"><span><i class="z-font z-customer"></i></span></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>指示图标置中</td>
|
||||
<td class="example"><div class="z-input-group z-input-group-inner z-bd-rd3"><input type=text class="z-input" placeholder="请输入"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>加大尺寸</td>
|
||||
<td class="example"><div class="z-input-group z-input-group-prepend z-xlarge"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大尺寸</td>
|
||||
<td class="example"><div class="z-input-group z-input-group-prepend z-large"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小尺寸</td>
|
||||
<td class="example"><div class="z-input-group z-input-group-prepend z-small"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>加小尺寸</td>
|
||||
<td class="example"><div class="z-input-group z-input-group-prepend z-xsmall"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 四、输入框输入控制 -->
|
||||
<div class="tutorial title">四、输入框输入控制</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">说明</td>
|
||||
<td width="30%">验证</td>
|
||||
<td width="*">效果预览</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入数值型：</td>
|
||||
<td class="example"><input name="Numeric" class="z-input z-xlarge z-red" type="text" placeholder="请输入数值型" size="30" maxlength="60" data-options="type:Numeric;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入整型：</td>
|
||||
<td class="example"><input name="Integer" class="z-input z-xlarge z-orange" type="text" placeholder="请输入整型" size="30" maxlength="60" data-options="type:Integer;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入整数小数：</td>
|
||||
<td class="example"><input name="Decimal" class="z-input z-xlarge z-yellow" type="text" placeholder="请输入整数小数" size="30" maxlength="60" data-options="type:Decimal;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入字母：</td>
|
||||
<td class="example"><input name="Alphabetic" class="z-input z-xlarge z-green" type="text" placeholder="请输入字母" size="30" maxlength="60" data-options="type:Alphabetic;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许最多2位小数的金额：</td>
|
||||
<td class="example"><input name="Amount2R" class="z-input z-xlarge z-cyan" type="text" placeholder="请输入最多2位小数的金额" size="30" maxlength="60" data-options="type:Amount2R;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入折扣类型：</td>
|
||||
<td class="example"><input name="Discount" type="text" class="z-input z-xlarge z-blue" placeholder="请输入0.01-10折" size="30" maxlength="60" data-options="type:Discount;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许小时分钟格式(00:23)：</td>
|
||||
<td class="example"><input name="HourMinute" type="text" class="z-input z-xlarge z-purple" placeholder="请输入小时分钟格式(00:23)" size="30" maxlength="60" data-options="type:HourMinute;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 右侧demo ZmUI代码 -->
|
||||
${zhiqim_turorial_ZmUI_demo_start()}
|
||||
<div class="z-bar-top">
|
||||
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
|
||||
<div class="z-title">ZhiqimUI.mobile</div>
|
||||
</div>
|
||||
<div class="z-bar-bottom">
|
||||
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
|
||||
</div>
|
||||
<div class="z-container">
|
||||
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
|
||||
</div>
|
||||
${zhiqim_turorial_ZmUI_demo_end()}
|
||||
|
||||
<!-- content结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_chapter()}
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_footer()}
|
||||
在新工单中引用
屏蔽一个用户