DHtmlX中combo的基础使用
来源:互联网 发布:super kamagra 淘宝 编辑:程序博客网 时间:2024/05/20 06:54
DHtmlX中combo的使用
combo:比select高级的下拉框
需要的资源:
官方下载地址
参考文档
官方文档,流程
3步创建简单combo
1.连接样式和脚本
<link rel="STYLESHEET" type="text/css" href="dhtmlxCombo/dhtmlxcombo.css" ><script type="text/javascript" src="dhtmlxCombo/dhtmlxcombo.js"></script>
把css和js放在dhtmlxCombo文件夹下
(也可以直接连CDN,也就是连接官网上,只需要改 href=”http://cdn.dhtmlx.com/edge/dhtmlx.css”
src=”http://cdn.dhtmlx.com/edge/dhtmlx.js”
)
2.body定义容器(通常用div,select也可以)
<select id="combo_1" name="combo_1"> <option value="1">a00</option> <option value="2">a01</option></select>
或
<div id="combo_1" name="combo_1"></div>
3.根据id创建combo
<script type="text/javascript"> //当容器为select时 //var myCombo = dhtmlXComboFromSelect("combo_1","combo_1"); //当容器为div时 var myCombo = new dhtmlXCombo("combo_1","combo_1");</script>
注:一定要在容器加载完后再new combo
Combo构造器
new dhtmlXCombo(parent,name,width,type,index,filter,xml,readonly);
- parent HTML元素的id,它将用作用途·父类(或对象本身)
- name HTML元素的name
- width combo的宽度,像素(px)为单位(String)
- type combo选项使用的类型(可选)
- index
- filter
- xml
- readonly
加载数据
用combo.addOption(value,label,css,img_src);
- value (String) 选项的id
- label (String)选项的值
- css (String)附加的样式(可选)
- img_src (String)选项图标图像的路径
demo
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Insert title here</title><!-- <link rel="STYLESHEET" type="text/css" href="dhtmlxCombo/dhtmlxcombo.css" > <script type="text/javascript" src="dhtmlxCombo/dhtmlxcombo.js"></script> --> <link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" type="text/css"> <script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" type="text/javascript"></script> <style type="text/css"> body { background-color:#112233 } </style> <script type="text/javascript"> function init(){ //普通combo+带样式 var myCombo = new dhtmlXCombo("combo_1",null,"100px"); myCombo.addOption("1","text1",null,null,true); myCombo.addOption("2","text2"); myCombo.addOption("3","text3","color:red"); //加图片combo var myCombo1 = new dhtmlXCombo("combo_2",null,"100px","image"); myCombo1.addOption("1","text1",null,"imgs/1.png",true); myCombo1.addOption("2","text2",null,"imgs/2.png"); myCombo1.addOption("3","text3",null,"imgs/3.png"); //加checkbox的combo var myCombo2 = new dhtmlXCombo("combo_3",null,"100px","checkbox"); myCombo2.addOption("1","text1",null,null,true); myCombo2.addOption("2","text2"); myCombo2.addOption("3","text3"); //combo添加数据另一种格式 var myCombo = new dhtmlXCombo("combo_4",null,"100px"); myCombo.addOption([ ["1","text1",null,null,true], ["2","text2"], ["3","text3"] ]); } </script></head><body onload="init();"> <h3>普通combo+带样式</h3> <div id="combo_1"></div> <h3>加图片combo</h3> <div id="combo_2"></div> <h3>加checkbox的combo</h3> <div id="combo_3"></div> <h3>combo添加数据另一种格式</h3> <div id="combo_4"></div></body></html>
图片位置:
阅读全文
0 0
- DHtmlX中combo的基础使用
- DHTMLX combo的学习
- dhtmlx tree的使用方式
- VC中Combo Box的使用小结
- ext js 中combo对象的使用
- VC 中Combo Box的使用
- MFC中combo box的使用
- VC中Combo Box的使用小结
- VC 中Combo Box的使用小结
- VC 中Combo Box的使用
- dhtmlx使用
- Combo Box 的使用
- Combo box的使用
- combo box控件的使用
- COMBO BOX的使用格式!~
- SWT之Combo的使用
- VC++ Combo Box/Combo Box Ex控件的使用【转】
- DHTMLX TREE userdata 使用
- 树的同构
- 布隆过滤器和Hyperloglog基数统计的介绍
- mark
- C 错误处理
- UGUI_使用DoTween
- DHtmlX中combo的基础使用
- 二维数组 C语言优先级记忆Tips
- Comparable与Comparator的区别
- NameError: name 'FileNotFoundError' is not defined的解决方案
- 牛客网编程题
- 二叉树已知(中序+一序)求另一序
- android 水准仪的实现(方向传感器的使用)
- Android-TextView设置多种颜色及部分点击事件
- 理解js设计模式之代理模式