zoukankan      html  css  js  c++  java
  • EasyUI 搜索框

    1、用法

    (1)、从标记创建。把 'easyui-searchbox' class 加入到 <input> 标记。

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <script type="text/javascript">  
    2.     function qq(value,name){  
    3.     alert(value+":"+name)  
    4.     }  
    5. </script>  
    6. <input id="ss" class="easyui-searchbox" style="300px"  
    7.     data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>  
    8. <div id="mm" style="120px">  
    9.     <div data-options="name:'all',iconCls:'icon-ok'">All News</div>  
    10.     <div data-options="name:'sports'">Sports News</div>  
    11. </div>  

    (2)、编程创建。

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <input id="ss"></input>  
    2. <div id="mm" style="120px">  
    3.     <div data-options="name:'all',iconCls:'icon-ok'">All News</div>  
    4.     <div data-options="name:'sports'">Sports News</div>  
    5. </div>  
    6. $('#ss').searchbox({  
    7.     searcher:function(value,name){  
    8.     alert(value + "," + name)  
    9.     },  
    10.     menu:'#mm',  
    11.     prompt:'Please Input Value'  
    12. });  

    2、属性

    名称

    类型

    描述

    默认值

    width

    number

    组件的宽度。

    auto    

    height

    number

    组件的高度。该属性自版本 1.3.2 起可用。

    22

    prompt

    string

    显示在输入框里的提示信息。

    ''

    value

    string

    输入的值。

    ''

    menu

    selector

    搜索类型的菜单。每个菜单项可以有下列的属性:
    name:搜索类型名称。
    selected:当前选择的搜索类型名称。

    null

    searcher  

    function(value,name)  

    当用户按下搜索按钮或者按下 ENTER 键时,searcher 函数将被调用。

    null

    3、方法

    名称

    参数

    描述

    options       

    none     

    返回选项(options)对象。                                   

    menu

    none

    返回搜索类型的菜单对象。

    textbox

    none

    返回文本框对象。

    getValue

    none

    返回当前的搜索值。

    setValue

    value

    设置新的搜索值。

    getName

    none

    返回当前的搜索类型名称。

    selectName

    name

    选择当前的搜索类型名称。

    destroy

    none

    销毁该组件。

    resize

    width

    重设组件的宽度。

    4、实例

    (1)、基本搜索框

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4. <meta charset="UTF-8">  
    5. <title>Basic SearchBox - jQuery EasyUI Demo</title>  
    6. <link rel="stylesheet" type="text/css" href="../css/easyui.css">  
    7. <link rel="stylesheet" type="text/css" href="../css/icon.css">  
    8. <link rel="stylesheet" type="text/css" href="../css/demo.css">  
    9. <script type="text/javascript" src="../js/jquery.min.js"></script>  
    10. <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>  
    11. </head>  
    12. <body>  
    13. <h2>Basic SearchBox</h2>  
    14. <p>Click search button or press enter key in input box to do searching.</p>  
    15. <div style="margin:20px 0;"></div>  
    16. <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="300px"></input>  
    17. <script>  
    18. function doSearch(value){  
    19. alert('You input: ' + value);  
    20. }  
    21. </script>  
    22. </body>  
    23. </html>  


    (2)、搜索框类别

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
      1. <!DOCTYPE html>  
      2. <html>  
      3. <head>  
      4. <meta charset="UTF-8">  
      5. <title>Search Category - jQuery EasyUI Demo</title>  
      6. <link rel="stylesheet" type="text/css" href="../css/easyui.css">  
      7. <link rel="stylesheet" type="text/css" href="../css/icon.css">  
      8. <link rel="stylesheet" type="text/css" href="../css/demo.css">  
      9. <script type="text/javascript" src="../js/jquery.min.js"></script>  
      10. <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>  
      11. </head>  
      12. <body>  
      13. <h2>Search Category</h2>  
      14. <p>Select a category and click search button or press enter key in input box to do searching.</p>  
      15. <div style="margin:20px 0;"></div>  
      16. <input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" style="300px"></input>  
      17. <div id="mm">  
      18. <div data-options="name:'all',iconCls:'icon-ok'">All News</div>  
      19. <div data-options="name:'sports'">Sports News</div>  
      20. </div>  
      21. <script>  
      22. function doSearch(value,name){  
      23. alert('You input: ' + value+'('+name+')');  
      24. }  
      25. </script>  
      26. </body>  
      27. </html>  
  • 相关阅读:
    RabbitMQ + PHP (二)AMQP拓展安装
    RabbitMQ + PHP (一)入门与安装
    使用 Selenium 实现基于 Web 的自动化测试
    Selenium私房菜系列4 -- Selenium IDE的使用
    解决火狐浏览器安装不上Selenium IDE插件“此附加组件无法安装”
    (技术分享) 解决 Firefox 显示“已阻止载入混合活动内容”的问题
    MyEclipse打开 HTML 报错Failed to create the part's controls
    python2x与python3x的区别
    Python基础总结
    Mycat 读写分离+分库分表
  • 原文地址:https://www.cnblogs.com/huangf714/p/5864388.html
Copyright © 2011-2022 走看看