454 lines
17 KiB
HTML
454 lines
17 KiB
HTML
<#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>
|