first commit

2025-02-20 14:59:35 +08:00
parent d7be84fac6
commit d4a3bb8ffc
2541 changed files with 336536 additions and 0 deletions
@@ -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, /&lt;span\sclass="z-cover((?!&gt;).)+&gt;/g, '');
+    html = Z.S.replaceAll(html, /&lt;div\sclass="z-absolute((?!&gt;).)+&gt;.+span&gt;/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>