jcrop2.X 取消选框
(原)
官网
在2.X以下在版本中,api提供了release()方法用于取消选框。但在2.X以上的版本中已经没有这个方法了。于是各种查找,终于解决了如何取消选框(官网的demo中是没有这部分的)
先上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/Jcrop.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Jcrop.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var jcropApi;
$(document).ready(function() {
$('#materialTargetPic').Jcrop({
onChange: showCoords,
onSelect: showCoords
},function() {
jcropApi = this;
});
var container = $('#materialTargetPic').Jcrop('api').container; container.on('cropstart',function(e,s,c){
$('.jcrop-shades').show();
});
}) function showCoords (c) {
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
} function sureSelected() {
jcropApi.removeSelection(jcropApi.ui.multi[0])
$('.jcrop-shades').hide();
} </script>
</head>
<body>
<div>
<img src="img/sago.jpg" alt="" id="materialTargetPic"/>
</div>
<input type="text" id="x1" />
<input type="text" id="y1" />
<input type="text" id="x2" />
<input type="text" id="y2" />
<input type="text" id="w" />
<input type="text" id="h" />
<input type="button" value="click" onclick="sureSelected()"/>
</body>
</html>
先看看 removeSelection方法:
在2.X的API中提供了removeSelection方法,只是因为此版本可以有多个选择框,所以这里的removeSelection方法需要接收一个选则框,如果没有传入是不会删除的,并且会返回一个选择框对象。由于我只需要用到一个选择框,也只会有一个,所以这里传入了一个[0],
jcropApi.removeSelection(jcropApi.ui.multi[0])
如果只是调用这个方法,选择框是去掉了,但是阴影部分还在
然后就会看到后面的调用,将阴影部分隐藏起来
$('.jcrop-shades').hide();
但是如果再次选框,刚才被隐藏的地方是不会显示出来,那么需要在选时中就要把阴影部分在加进来。
var container = $('#materialTargetPic').Jcrop('api').container; container.on('cropstart',function(e,s,c){
$('.jcrop-shades').show();
});
以上代码参考官方文档部分:
jcrop2.X 取消选框的更多相关文章
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...
- JQuery的复选框选中、取消、全选,全不选问题
一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- Jquery中复选框选中取消实现文本框的显示隐藏
标签内容 <div class="box"> 请编写javascript代码,完成如下功能要求:<br /> 1.取消复选款后,要求促销价格.促销开始结束日 ...
- jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换
1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...
- js 全选选框与取消全选代码
设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...
- js进阶 9-16 如何实现多选框全选和取消
js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...
- element-ui 复选框,实现点击表格当前行选中或取消
背景: 1.表格结构绑定事件 <el-table v-loading="StepsListLoading" :data="StepsListData" b ...
随机推荐
- dubbo源码研究(一)
1. dubbo源码研究(一) 1.1. dubbo启动加载过程 我们知道,现在流行注解方式,用spring管理服务,dubbo最常用的就是@Reference和@Service了,那么我首先找到这两 ...
- 常用Latex公式
注意: 1 在博客中书写Latex公式时,需在公式两侧用$包括 2 大括号{ }在Latex有本身的含义,如果要输出为普通字符需要使用\{...\} 符号 公式 说明 $ \in $ \in 包含 $ ...
- vimium使用
vimium使用 chrome下面的vimium插件已经慕名已久,迟迟没有做尝试,今天在家有空就熟悉了一下vimium,感觉还是棒棒的.记录一下一些使用心得. 常用按钮 j 向上滚动 k 向下滚动 d ...
- Linux+.Net Core+Nginx(在Linux上使用Nginx反向代理.Net Core 项目)
Linux+.Net Core+Nginx 之前的文章中有提到关于使用Nginx在linux来实现反向代理,今天我们继续加点料.在Centos7中部署.NetCore,然后使用Nginx进行反向代理! ...
- ABP框架连接Mysql数据库
开始想用Abp框架来搭建公司的新项目,虽然一切还没有定数,但是兵马未动,粮草先行,我先尝试一下整个过程,才能够更好的去争取机会. 此次技术选型:Abp(Asp.Net core mvc)+mysql( ...
- SLAM+语音机器人DIY系列:(三)感知与大脑——5.机器人大脑嵌入式主板性能对比
摘要 在我的想象中机器人首先应该能自由的走来走去,然后应该能流利的与主人对话.朝着这个理想,我准备设计一个能自由行走,并且可以与人语音对话的机器人.实现的关键是让机器人能通过传感器感知周围环境,并通过 ...
- 使用 FFT 分析周期性数据
可以使用傅里叶变换来分析数据中的变化,例如一个时间段内的自然事件. 天文学家使用苏黎世太阳黑子相对数将几乎 300 年的太阳黑子的数量和大小制成表格.对大约 1700 至 2000 年间的苏黎世数绘图 ...
- 基于Windows服务的WCF
(1)创建WCF 代码示例: [ServiceContract] public interface ILimsDBService { [OperationContract] int ExecuteSq ...
- idea git提交时候提示 --author 'java_suisui' is not 'Name ' and matches no existing author
今天使用idea修改git项目的作者信息,提交时遇到错误: 0 files committed, 1 file failed to commit: test --author 'java_suisui ...
- 对HTML5标签的认识(四)
这篇随笔讲讲HTML5中的表单和表单的一些元素 一.表单的作用是什么? 概念:表单在网页中主要是负责对数据信息的采取,表单一共分成三个部分: 1.表单的标签:这里面包含了处理表单的数据所用CGI程序以 ...