zoukankan      html  css  js  c++  java
  • EasyUI基础searchbox&progressbar(搜索框,进度条)

          easyui学习的基本组成部分(八个部分)硕果仅存searchbox和pargressbar、tooltip该,有一点兴奋。本文将偏向searchbox和pargressbar做一个探讨。鉴于双方的内容不会太多,在这里,直接此事合并!

    searchbox

         不用过多解释,仅仅要用于用户对数据的搜索。使用$.fn.searchbox.defaults重载默认值。

         依赖组件:菜单button。

         searchbox提示用户输入搜索值。它能够设定一个类别菜单,同意用户选择不同的搜索类别。当用户点击确认button时将运行搜索动作。

    属性

    名称 类型 描写叙述信息                                                默认值
    width number 控件的宽度 auto
    height number 控件的高度,1.3.2 22
    prompt string 搜索框内容提示信息 ''
    value string 用户输入的值 ''
    menu selector

    搜索类型菜单。每一个菜单项能够有下面属性:

       name:搜索类型的名称。

       selected:当前选择的搜索类型的名称

    以下样例显示了怎样定义一个选定的搜索类型名称。



    <input class="easyui-searchbox" style="300px" data-options="menu:'#mm'" />

    <div id="mm" style="150px">

    <div data-options="name:'item1'">Search Item1</div>

    <div data-options="name:'item2',selected:true">Search Item2</div>

    <div data-options="name:'item3'">Search Item3</div>

    </div>


    显示第一个selected定义为true的搜索类别。


    null
    searcher function(name,value) 当用户点击搜索button或者按下ENTER见得时候搜索函数将被调用。 null
    disable boolean 定义搜索框是否可以被使用。1.3.6,默认是能使用的。 false


    方法

    名称 參数 描写叙述信息                                  
    options none 返回參数对象
    menu none

    返回搜索类型菜单对象。以下的样例显示了怎样改动菜单项图标

    var m = $('#ss').searchbox('menu');  // get the menu object

    var item = m.menu('findItem', 'Sports News');  // find the menu item

    // change the menu item icon

    m.menu('setIcon', {

    target: item.target,

    iconCls: 'icon-save'

    });

    // select the searching type name

    $('#ss').searchbox('selectName', 'sports');




    textbox

    none 返回文本框对象。
    getValue none 返回当前搜索keyword。
    setValue value 设置新的搜索keyword。

    getName none 返回当前搜索类型。

    selectName name

    选择当前的搜索类型名称

    演示样例:

    $('#ss').searchbox('selectName', 'sports');




    destroy none 清楚搜索框组件
    resize width 又一次设置搜索框宽度。
    disable none 禁用搜索框。

    1.3.6

    enable none 启用搜索框。1.3.6
    clear none 清空搜索框中的value。1.3.6
    reset none 重置搜索框的值。

    1.3.6    

        

    使用方式

    1、使用标签创建。对input标签引用'easyui-searchbox'类。

    <script type="text/javascript">  
        //当用户点击搜索时运行的函数
        function doSearch(value,name){   
            alert(value+":"+name)   
        }   
    </script>  
      
    <input id="ss" class="easyui-searchbox" style="300px"  
            data-options="searcher:doSearch,prompt:'Please Input Value',menu:'#mm'"></input>  
               
    <div id="mm" style="120px">  
        <div data-options="name:'all',iconCls:'icon-ok'">All News</div>  
        <div data-options="name:'sports'">Sports News</div>  
    </div> 


    2、使用js脚本创建:

    <input id="ss"></input>  
    <div id="mm" style="120px">  
        <div data-options="name:'all',iconCls:'icon-ok'">All News</div>  
        <div data-options="name:'sports'">Sports News</div>  
    </div>  

    $('#ss').searchbox({   
        searcher:functionvalue,name){   
            alert(value + "," + name)   
        },   
        menu:'#mm',   
        prompt:'Please Input Value'  
    });  

        对于searchbox的学习就到这儿了,searchbox使用起来还是较为简单的。官网的样例也就是上述的创建方式,这里就不再赘述了。

    progressbar

             进度条能够提供反馈一个长时间执行的操作的显示进展。

    这个进程能够更新,能够让用户知道当前操作执行的进度,提高用户体验。

             使用$.fn.progressbar.defaults重载默认值。

    属性

    名称 类型 描写叙述信息                             默认值
    width string 设置进度条的宽度 auto
    height number 设置进度条的高度.1.3.2 22
    value number 设置进度条的值 0
    text string 今天条上显示的文本 {value}%

    事件

    名称 參数 描写叙述信息                      
    onChange newValue,oldValue

    当进度条的值改变的时候触

    样例:


    $('#p').progressbar({

    onChange: function(value){

    alert(value)

    }

    });


    方法

    名称 參数  描写叙述信息                                                           
    options none  返回參数对象           
    resize width

    改变组件的大小:

    $('#p').progressbar('resize');  // 不改变大小

    $('#p').progressbar('resize', 350);  // 改变大小


    getValue none 得到进度条的值
    setValue value 设置进度条的值

    使用方式

    1、使用标记创建

    <div id="p" class="easyui-progressbar" data-options="value:60" style="400px;"></div>  

    2、使用js脚本创建:

    <div id="p" style="400px;"></div>  
    $('#p').progressbar({   
        value: 60   
    });  

    Demo

           对于进度条的使用demo,这里參照官网的样例,模拟下文件上传的效果。

    代码例如以下:

    <!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="UTF-8">
    	<title>进度条演示</title>
    	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
    	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
    	<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
    	<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
    </head>
    
    <body>
    	<script type="text/javascript">
    		function start() {
    			var value = $('#p').progressbar('getValue');
    			if (value < 100) {
    				value += Math.floor(Math.random() * 10);
    				$('#p').progressbar('setValue', value);
    			    setTimeout(arguments.callee, 200);
    				if (value >= 100) {
    					$('#button').linkbutton('disable');//文件上传成功之后禁用按钮
    					$('#p').progressbar('disable');//文件上传成功之后禁用进度条
    				}
    			}
    		}
    	</script>
    	<div id="p" class="easyui-progressbar" data-options="value:0" style="400px;"></div>
    	</br>
    	<a onclick="start()" id="button" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-mini-refresh'">文件上传</a>
    	<script>
    		$('#p').progressbar({
    			text: '文件上传{value}%',
    		});
    	</script>
    </body>
    
    </html>

            执行情况见例如以下截图:

                                                       QQ截图20140604165945

                                                     

                                                      QQ截图20140604170001


                                                     QQ截图20140604170014

             OK!演示就到这里了.over



    版权声明:本文博客原创文章,博客,未经同意,不得转载。

  • 相关阅读:
    centos7.6 使用yum安装mysql5.7
    解决hadoop本地库问题
    docker-compose 启动警告
    docker 安装zabbix5.0 界面乱码问题解决
    docker 部署zabbix问题
    zookeeper 超时问题
    hbase regionserver异常宕机
    (转载)hadoop 滚动升级
    hadoop Requested data length 86483783 is longer than maximum configured RPC length
    zkfc 异常退出问题,报错Received stat error from Zookeeper. code:CONNECTIONLOSS
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/4689714.html
Copyright © 2011-2022 走看看