DHtmlX中combo的基础使用
程序员文章站
2022-07-13 22:37:57
...
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>
图片位置:
上一篇: 转 MVVM模式下关闭窗口的实现
推荐阅读
-
倒计时cocos定时器schude使用的过程中 帧率浮动较大导致执行时机不准确的问题解决
-
使用JavaScript实现node.js中的path.join方法
-
PHP5中使用PDO连接数据库的方法
-
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
-
Excel表格中在一级菜单的基础上如何制作二级下拉菜单
-
Word2000和Word2002中的宏在Office Word 2003中的使用
-
使用=号引用的方法来将Excel中多列内容合并成一列
-
MyBatis中XML和注解的对比及使用
-
工作中遇到的Word软件基础的小技巧
-
Word2003“汉字重选”功能在文档中的使用