`
yarafa
  • 浏览: 88678 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DHTMLX系列组件的使用(4)——dhtmlx颜色选择器应用

阅读更多

1. 初始化

首先将 dhtmlxSuit 中的 dhtmlxColorPicker 文件夹下的 codebase 文件夹整个复制到你的项目目录下,然后创建HTML文件。

1.1 引入 JS 和 CSS 文件

<link rel="stylesheet" type="text/css" href="codebase/dhtmlxcolorpicker.css" />
<script type="text/javascript" src="codebase/dhtmlxcolorpicker.js"></script>
<script type="text/javascript" src="codebase/dhtmlxcommon.js"></script>

 

1.2 定义用于显示颜色选择器的容器

<div id="colorPicker" style="position:absolute;top:150;left:200;"></div>

 

1.3 定义用于显示颜色选择器的 JS 函数

<script type="text/javascript">
function init() {
    var myCP1 = new dhtmlXColorPicker("colorPicker");
    myCP1.setImagePath("codebase/imgs/");
    myCP1.init();
}
</script>

 

1.4 效果预览

2. 基本设置

// cp is an object of dhtmlXColorPicker
cp.setPosition(x,y);

cp.setColor(“#RRGGBB”);
cp.setColor([R,G,B]);

cp.hide();
cp.show();

var obj = cp.getSelectedColor(); // obj is an object of array

说明:设置颜色时,如果用数组形式进行设置,则 [R, G, B] 中的值应是 0 ~ 255 之间的数值。另外,getSelectedColor 函数返回值是一个数组,各个元素值如下:

 

3. setOnSelectHandler 事件

<script type="text/javascript">
function init() {
    var myCP1 = new dhtmlXColorPicker("colorPicker");
myCP1.setImagePath("codebase/imgs/");
myCP1. setOnSelectHandler(setColor);
    myCP1.init();
}

function setColor(color) {
	// do something with the parameter ‘color’
}
</script>

 

 

-----------------------------------------------------

Stay Hungry, Stay Foolish!

Afa

May 24th, 2010

----------------------------------------------------- 

分享到:
评论

相关推荐

    dhtmlx的免费grid组件

    5. **dhtmlxCalendar**:可能是DHTMLX的日历组件,可以与Grid配合使用,提供日期选择功能。 6. **docsExplorer**:可能是一个文档浏览器或示例浏览器,用于查看和学习组件的API和示例。 7. **dhtmlxToolbar**:这...

    dhtmlx中文手册+dhtmlx.js+dhtmlx.css

    这个压缩包包含了dhtmlx的核心组件:`dhtmlx.css`,`dhtmlx.js`,以及一份中文操作手册——`dhtmlx中文使用手册API指南.doc`。这些资源对于理解和使用dhtmlx库至关重要。 1. **dhtmlx.css**: 这是dhtmlx库的样式表...

    《DHTMLX中文使用手册》PDF

    - DHTMLX提供了一系列内置组件,如表格(grid)、树形结构(tree)、图表(chart)、日历(calendar)等,满足不同应用场景的需求。 - 这些组件具有高度可定制性,可以轻松地通过CSS进行样式调整,从而适应不同的设计风格...

    dhtmlx官方框架——dhtmlxGrid和dhtmlxTabbar示例、简单例子

    “dhtmlx官方框架——dhtmlxGrid和dhtmlxTabbar示例、简单例子” 这个标题提到了两个关键组件,dhtmlxGrid和dhtmlxTabbar,它们是dhtmlx框架中的核心部分。dhtmlx是一个广泛使用的JavaScript库,用于构建富客户端Web...

    dhtmlxGantt.doc

    dhtmlxGantt 甘特图组件使用指南 dhtmlxGantt 是一个 JavaScript 组件,能够创建动态的甘特图和以便利的图形化方式查看项目计划。它能够展示各个活动之间的依赖关系,显示当前计划的状态,以完成百分比阴影的方式...

    dhtmlx及帮助文档

    1. **组件集成**:dhtmlx的组件可以无缝集成,例如,可以将dhtmlxTree嵌入到dhtmlxGrid中作为列的自定义渲染,或者使用dhtmlxCalendar组件来实现日期选择功能。 2. **数据绑定**:dhtmlx支持动态数据绑定,可以从...

    DHTMLX 使用手册

    DHTMLX 使用手册旨在帮助开发者快速掌握 DHTMLX 的使用方法,了解 DHTMLX 的功能和特点,并能正确地应用于实际项目中。本手册面向所有使用 DHTMLX 的开发者,无论您是初学者还是经验丰富的开发者,都可以从中获益。 ...

    dhtmlxGrid2.1.zip

    8. **dhtmlxCalendar**:dhtmlxCalendar是dhtmlx组件系列中的日期选择器,可以集成到dhtmlxGrid中,为表格提供日期选择功能。 **五、应用场景** dhtmlxGrid2.1常用于需要展示大量数据并进行复杂操作的Web应用,如...

    免费版的全套DHTMLX

    这个免费版的全套DHTMLX包含了一系列的UI组件,可以帮助开发者快速创建交互式的、功能丰富的网页应用。DHTMLX的核心在于其轻量级、高性能和灵活性,它支持多种前端框架如jQuery、AngularJS和Vue.js,使得开发人员...

    Dhtmlx日程-图表-甘特图实例

    在实际应用中,Dhtmlx的这些组件通常会结合使用,例如,日程可以用来跟踪个人或团队的日常工作,而甘特图则用于展示整个项目的时间线。同时,通过图表模块,可以将项目数据以图形化方式呈现,使得数据分析更为直观和...

    dhtmlx中文使用手册

    dhtmlx包含多个核心组件,如Grid、Calendar、Tree、Accordion、Toolbar等,它们可以单独使用,也可以组合在一起创建复杂的Web应用。 1. **dhtmlxGrid**:这是一个可伸缩的表格控件,支持大量的数据处理,包括排序、...

    dhtmlxGantt 介绍以及使用说明

    下面是一个简单的 Vue.js 组件示例,展示了如何在 Vue 项目中使用 dhtmlxGantt: ```javascript &lt;div ref="gantt"&gt;&lt;/div&gt; import 'dhtmlx-gantt'; export default { name: 'gantt', props: { tasks: { ...

    用Dhtmlx做的例子

    DHTMLX是一个强大的JavaScript库,它提供了一系列组件,用于构建高度交互式的Web应用程序。这个库以其丰富的用户界面元素和功能而闻名,包括树形控件、数据网格、日历以及可编辑、可拖拽和可排序的表格。下面将详细...

    DHTMLX中文API开发手册

    DHTMLX中文API开发手册详细介绍了DHTMLX组件库中的各个组件,包括日历、组合框、编辑器、布局管理器、菜单等的使用方法和特性。每个组件都有详细的初始化指导、事件处理方式、功能设定等,为Web应用开发人员提供了...

    dhtmlx4.5.1pro

    这个版本是dhtmlx库的4.5.1更新,提供了一系列强大的JavaScript组件,帮助开发者创建高效且具有高度定制性的网页应用。 dhtmlx是一个开源的JavaScript库,其核心功能包括数据网格、表格、日历、图表、树形视图、...

    dhtmlx UI组件

    **dhtmlx UI组件**是一套全面的JavaScript库,它为开发者提供了丰富的用户界面元素,可用于构建功能强大的Web应用程序。这个组件集包含了多种模块,如树形控件、编辑器、选项卡栏、表格等,使得开发人员可以轻松地...

    dhtmlx使用手册

    在使用 dhtmlx 库时,用户需要了解每个组件的特点和优势,选择合适的组件来满足应用的需求。同时,用户需要了解 JavaScript 语言和 dhtmlx 库的 API,编写高效的脚本来实现业务逻辑。 dhtmlx 库是一个强大而高效的...

    dhtmlx 开发类库和官方文档

    这个库包含多个模块,提供了一系列功能丰富的控件,如表格、日程表、甘特图、连接器以及电子表格等,帮助开发者创建交互性强、用户体验优秀的Web应用程序。 1. **dhtmlxSuite**: 这是dhtmlx的核心组件集合,包含了...

Global site tag (gtag.js) - Google Analytics