基于jQuery UI的调色板插件推荐colorpicker
1.下载地址
点击网页最下端Download,即可下载
2.使用方法
本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少
- 引入和初始化
引入js文件<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>注意:jquery ui 和 jquery 插件应该放在此调色板之前 ,被墙的用户请使用其他cdn
引入css文件
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css">
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">初始化插件
<script type="text/javascript">
$(document).ready(function() {
$("#mycolor").colorpicker();
});
</script> <input style="width:100px;" id="mycolor" /> - 主要方法
1.设置颜色
$("#mycolor").colorpicker({
color: "#ffffff"
});
2.定义调色板主题样式
$("#mycolor").colorpicker({
defaultPalette: 'web'
});
3.本地化调色板插件语言
$("#mycolor").colorpicker({
strings: "主题颜色,标准颜色,web颜色,主题颜色,返回调色板,历史记录, 没有历史记录."
});
4.隐藏调色板
$("#mycolor").colorpicker("hidePalette");
5.调色板选中颜色后触发的事件
$("#mycolor").on("change.color", function(event, color){
$('#title').css('background-color', color);
});
6.鼠标移动到颜色后触发的事件
$("#mycolor").on("mouseover.color", function(event, color){
$('#title').css('background-color', color);
});
7.获取选中颜色和改变选中颜色
var colorValue = $("#mycolor").colorpicker("val"); $("#mycolor").colorpicker("val", "#d0d0d0");
基于jQuery UI的调色板插件推荐colorpicker的更多相关文章
- 10 个基于 jQuery 的 Web 交互插件推荐
英文原文:10 jQuery for Web Interaction Plugins “用户交互”在现代的 Web 设计中占据了很大比例,这是互联网产品不可或缺的关键,对 Web 设计师也提出了更高的 ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- 基于jQuery全屏相册插件zoomVisualizer
基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览 ...
- 基于Jquery的进度条插件(实用)
Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQuery 进 ...
- jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...
- 基于jQuery UI的tabs选项卡美化
很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...
- 出位的template.js 基于jquery的模板渲染插件
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
- 基于jquery的城市选择插件
城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...
随机推荐
- block inline 和 inline-block
概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素). block元素通常 ...
- 1208: [HNOI2004]宠物收养所
1208: [HNOI2004]宠物收养所 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 12030 Solved: 4916 Description ...
- [转载]Tensorflow中reduction_indices 的用法
Tensorflow中reduction_indices 的用法 默认时None 压缩成一维
- aishell数据处理为thchs30格式
目录 aishell数据转换格式 aishell数据转化方法 aishell数据格式对于用神经网络处理数据的同学来说比较不友善,因为他只有文字转录和音素级别的转录,并没有拼音的转录. 而thchs30 ...
- ServiceStack.Ormlit 使用Insert的时候自增列不会被赋值
Insert签名是这样的,将第2个参数设置为true就会返回刚插入的自增列ID了,然后可以手工赋值到对象上面去 public static long Insert<T>(this IDbC ...
- Java内存管理特点
Java内存管理特点 Java一个最大的优点就是取消了指针,由垃圾收集器来自动管理内存的回收.程序员不需要通过调用函数来释放内存. 1.Java的内存管理就是对象的分配和释放问题. 在 ...
- 每周psp-第五周
PSP表格: 类别 任务 开始时间 结束时间 中断时间 delta时间 开会 scrum立会 10.13下午6:04 10.13下午6:34 0 30 开会 scrum立会 10.14下午6:02 1 ...
- Alpha 冲刺报告(4/10)
Alpha 冲刺报告(4/10) 队名:洛基小队 峻雄(组长) 已完成:继续行动脚本的编写 明日计划:尽量完成角色的移动 剩余任务:物品背包交互代码 困难:具体编码进展比较缓慢 ----------- ...
- iOS开发开辟线程总结--NSThread
1.简介: 1.1 iOS有三种多线程编程的技术,分别是: 1..NSThread 2.Cocoa NSOperation (iOS多线程编程之NSOperation和NSOperationQueue ...
- TCP系列27—窗口管理&流控—1、概述
在前面的内容中我们依次介绍了TCP的连接建立和终止过程和TCP的各种重传方式.接着我们在这部分首先关注交互式应用TCP连接相关内容如延迟ACK.Nagle算法.Cork算法等,接着我们引入流控机制(f ...