收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

Jquery Easyui自定义下拉框组件使用详解(21)

本文实例为大家分享了Jquery Easyui自定义下拉框组件的实现代码,供大家参考,具体内容如下

加载方式

JS调用加载

自定义下拉框不能通过标签的方式进行创建。

  <input id="box" />

  <script>
    $(function () {
      //JS 加载调用
      $('#box').combo({
        required : true,
        multiple : true,
      });
    });
  </script>

属性列表

查看图片

<script>
    $('#box').combo({
      width : 300,
      height : 50,
      panelWidth : 300,
      panelHeight : 200,
      disabled : false,
      hasDownArrow : false,
      delay : 50,
      editable : true,
      readonly : false,
      required : true,
      multiple : true,
    });
  </script>

事件列表

查看图片

 <script>
    $('#box').combo({
      required : true,
      multiple : true,
      onShowPanel : function () {
        alert('下拉的时候触发!');
      },
      onHidePanel : function () {
        alert('下拉面板隐藏的时候触发!');
      },
      onChange : function () {
        alert('字段值改变的时候触发!');
      },
    });
  </script>

方法列表

查看图片

//返回属性对象
    console.log($('#box').combo('options'));
    //返回下拉面板对象
    console.log($('#box').combo('panel'));
    //返回文本框对象
    console.log($('#box').combo('textbox'));
    //销毁组件
    $('#box').combo('destroy');
    //禁用和启用
    $('#box').combo('disable');
    $('#box').combo('enable');
    //调整到默认宽度
    $(document).click(function () {
      $('#box').combo('resize', 'width');
    });
    //显示下拉面板
    $(document).click(function () {
      $('#box').combo('showPanel');
    });
    //隐藏下拉面板
    $('#box').combo('hidePanel');
    //启用禁用,true 可不填,false 则为不启用
    $('#box').combo('readonly',true);
    //验证文本框内的值是否合法
    $(document).click(function () {
      console.log($('#box').combo('isValid'));
    });
    //清空文本框内容
    $(document).dblclick(function () {
      $('#box').combo('clear');
    });
    //重置文本框到初始状态
    $(document).dblclick(function () {
      $('#box').combo('reset');
    });
    //得到文本框字符串
    $(document).click(function () {
      console.log($('#box').combo('getText'));
    });
    //设置文本框字符串
    $(document).click(function () {
      console.log($('#box').combo('getText'));
    });
    //获取组件的 Value 值
    $(document).click(function () {
      console.log($('#box').combo('getValue'));
      console.log($('#box').combo('getValues'));
    });
    //可以使用$.fn.combo.defaults 重写默认值对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持积木网。

Jquery Easyui验证组件ValidateBox使用详解(20)
本文实例为大家分享了JqueryEasyui验证组件的实现代码,供大家参考,具体内容如下加载方式Class加载inputid="email"class="easyui-validatebox"data-options="required:true,

Jquery Easyui分割按钮组件SplitButton使用详解(17)
SpliButton组件依赖于Menu(菜单)组件和LinkButton(按钮)组件加载方式Class加载ahref="javascript:void(0)"id="edit"class="easyui-splitbutton"data-options="menu:'#box',iconCls:'icon-edit'"

Jquery Easyui菜单组件Menu使用详解(15)
本文实例为大家分享了JqueryEasyui菜单组件的实现代码,供大家参考,具体内容如下加载方式菜单组件通常用于快捷菜单,在加载方式上,通过class或JS进

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号