jQuery 颜色选择控件实例教程

插件效果

特点

平面模式 － 元素在页面中
功能强大的颜色选择控件
容易改变一些图片来定制外观
视图适中
使用方法
平面模式：

$('#colorpickerHolder').ColorPicker({flat: true});自定义皮肤，在自定义窗口中使用平面模式显示颜色选择器小部件。

附加到一个文本字段，并使用回调函数来更新字段的值为所选颜色和也可以设置颜色的值后确定即可。

 代码如下 复制代码
$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
 onSubmit: function(hsb, hex, rgb, el) {
  $(el).val(hex);
  $(el).ColorPickerHide();
 },
 onBeforeShow: function () {
  $(this).ColorPickerSetColor(this.value);
 }
})
.bind('keyup', function(){
 $(this).ColorPickerSetColor(this.value);
});

附加到某个元素并使用回调函数在线预览颜色值，添加选择器的动画效果。

 代码如下 复制代码

$('#colorSelector').ColorPicker({
 color: '#0000ff',
 onShow: function (colpkr) {
  $(colpkr).fadeIn(500);
  return false;
 },
 onHide: function (colpkr) {
  $(colpkr).fadeOut(500);
  return false;
 },
 onChange: function (hsb, hex, rgb) {
  $('#colorSelector div').css('backgroundColor', '#' + hex);
 }
});

 

时间： 2024-10-01 10:20:36

jQuery 颜色选择控件实例教程的相关文章

C#操作GridView控件实例教程

什么是GridView控件?这段是来自百度百笠的:GridView 是 DataGrid的后继控件,在.net framework 2 中,虽然还存在DataGrid,但是GridView已经走上了历史的前台,取代DataGrid的趋势已是势不可挡.GridView和DataGrid功能相似,都是在web页面中显示数据源中的数据,将数据源中的一行数据,也就是一条记录,显示为在web页面上输出表格中的一行. 数据来源自一个XML文件,如果我们不知道如何操作XML数据,文章后面我们会补充. 1.XM

Android实现滑动选择控件实例代码

前言 最近做了个滑动选择的小控件,拿出来给大家分享一下,先上图 运行效果 实现步骤 这里分解为3个动作:Down.Move.Up来进行分析,博主文采不好,大家直接看流程图吧!! 代码分析 前置知识 1.这个地方使用的是RecyclerView的代码,使用RecyclerView只能使用LinearLayoutManager,ListView的运行效果稍微要比RecyclerView差一些 //这里使用dispatchTouchEvent,因为onTouchEvent容易被OnTouchListe

asp.net AdRotator广告控件实例教程

<script  runat="server">    Sub change_url(sender As Object, e As AdCreatedEventArgs)      e.NavigateUrl="http://www.111cn.net "    End Sub </script> <html> <body> <form runat="server"> <asp:A

jQuery操作基本控件方法实例分析_jquery

本文实例讲述了jQuery操作基本控件方法.分享给大家供大家参考,具体如下: 1. 根据控件的样式class获取控件 复制代码 代码如下: $(".className")...... //className代表的就是控件的样式 2. 根据控件的ID获取控件 复制代码 代码如下: $("#id")...... 3. 根据控件的name获取控件 $("input[name='objName']")...... /*$("check[name

下载-jquery fullcandar 日程表控件不支持ie8问题，官方demo实例

问题描述 jquery fullcandar 日程表控件不支持ie8问题,官方demo实例 jquery fullcalendar日表控件不支持ie8,具体什么原因,我在官网下载的demo实例,谁接触过,指点下 解决方案 要看你使用是否正确.http://stackoverflow.com/questions/11363966/fullcalendar-in-ie8-events-not-renderinghttp://stackoverflow.com/questions/6863160/jq

基于jQuery的日期选择控件_jquery

但是也有些问题,第一画日历有点慢,第二兼容性不太好IE Only,第三它不是基于jQuery的哈哈. 那还是老规矩,做之前先看下效果   这下是更酷的Ext风格了. 从上图我们可以看出这个控件其实有两个视图一个日期月视图,还有一个是年月选择视图. 1:还是先从HTML入手 日期控件确定HTML其实还是比较简单,因为明摆着是列表的数据格式,当然主要是采用table了. 两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了.完整的HTMl结构大家可以用IEDeveloper看一下Dem

Android 实现IOS 滚轮选择控件的实例（源码下载）

Android 实现IOS 滚轮选择控件的实例 最近根据项目需要,整理了一个相对比较全面的 WheelView 使用控件,借用之前看到的一句话来说,就是站在巨人肩膀上,进行了一些小调整. 这里先贴上效果图 一般常用的时间选择格式,,单项选择,以及城市联动,这里基本都可以满足了. 这里把 单项选择,和 日期时间选择 给提出到 Util 类中,代码如下: public class Util { /** * 时间选择回调 */ public interface TimerPickerCallBack

网页图片下拉选择控件使用实例

控件|网页|下拉 上周五在大富翁上看到如何在网页的下拉列表中显示图片一文,便做了一个mark,准备用周末思考一下.谁知道昨天出去玩一天,今天来收到邮件,问题解决了. 不想看内容的,请下载rar文件.下面是转贴: 相信大家都见过一些软件里的图片下拉选择控件吧?喏,OICQ中就有.但网页上的你见过没有?小阳今天就为你推出你心怡已久的这个控件,下面演示中就是了!效果还可以吧?心动不如行动,我们来看下是怎么弄出来的. 我们先来看下做出这个控件需要解决哪些问题. 第一,图片下拉列表框是一个层,它在选择提示

实例详解jQuery结合GridView控件的使用方法_jquery

jQuery是一种非常强大的客户端JS编程技术,这里不想过多阐述它的相关背景知识,只想简单演示一下如何与asp.net的控件结合开发. 比如,我们要做一个下面如图所示的功能,效果是状态.编号.数字1.数字2.平均值所有的项都是通过后台绑定,如何点击checkbox按钮,来实现自动计算当前行两个数字的平均值呢?前提是用jQuery来实现? 我们直接在页面的Page_Load事件中输入如下代码: protected void Page_Load(object sender, EventArgs e)