11.EASYUI Combo组件
2016-08-15 00:00
267 查看
一,基本下拉组件
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta charset="UTF-8"> <title>Basic Combo - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script> </head> <body> <h2>基本下拉组件</h2> <div class="demo-info" style="margin-bottom:10px"> <div class="demo-tip icon-tip"></div> <div>点击右边箭头按钮显示下拉面板,选一个值填充到文本框内.</div> </div> <select id="cc" style="width:150px"></select> <div id="sp"> <div style="color:#99BBE8;background:#fafafa;padding:5px;">选择一种语言</div> <input type="radio" name="lang" value="01"><span>Java</span><br/> <input type="radio" name="lang" value="02"><span>C#</span><br/> <input type="radio" name="lang" value="03"><span>Ruby</span><br/> <input type="radio" name="lang" value="04"><span>Basic</span><br/> <input type="radio" name="lang" value="05"><span>Fortran</span> </div> <script type="text/javascript"> $(function(){ $('#cc').combo({ required:true, editable:false }); $('#sp').appendTo($('#cc').combo('panel')); $('#sp input').click(function(){ var v = $(this).val(); var s = $(this).next('span').text(); $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel'); }); }); </script> </body> </html>
相关文章推荐
- EasyUI - Combo组件
- 【开源项目11】组件间通信利器EventBus
- 错误 11 系统必备组件的安装位置未设置为“组件供应商的网站”,并且无法在磁盘上
- 推荐 11 款 React Native 开源移动 UI 组件
- 为easyui组件datagrid在加载完之后追加新的数据行
- Web jquery表格组件 JQGrid 的使用 - 11.问题研究
- jquery-easyui分页组件的用法
- ExtJS4.2学习(11)——高级组件之Grid
- EasyUI常用组件(基础)
- easyui datagrid组件应用
- 【连载】研究EasyUI系统—Tree组件(事件)
- 关于ie中easyui form组件load事件无法多次加载数据
- 9.EASYUI ValidateBox 组件
- 11_四大组件之一_BroadcastReceiver
- Bootstrap基本组件学习笔记之列表组(11)
- 【Visual C++】游戏开发笔记二十六 DirectX 11各组件的介绍&第一个DirectX 11 Demo的创建
- 【连载】研究EasyUI系统— LinkButton组件
- 在 2018 年来临之际,你应该知道的 Vue.js 的 11 个组件库
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
- easyUI组件datagrid的二次封装