（原）

官网

0.9.12 API

2.X API

在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 取消选框的更多相关文章

  1. jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例

    2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...

  2. JQuery的复选框选中、取消、全选，全不选问题

    一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...

  3. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  4. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  5. Jquery中复选框选中取消实现文本框的显示隐藏

    标签内容 <div class="box"> 请编写javascript代码,完成如下功能要求:<br /> 1.取消复选款后,要求促销价格.促销开始结束日 ...

  6. jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换

    1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...

  7. js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...

  8. js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...

  9. element-ui 复选框,实现点击表格当前行选中或取消

    背景: 1.表格结构绑定事件 <el-table v-loading="StepsListLoading" :data="StepsListData" b ...

随机推荐

  1. Exchange Server 内部版本号和发行日期汇总

    本章节对Exchange 各个主要发行版进行简单汇总,分别列出每个服务包 (SP) 的内部版本号.累积更新 (CU) 或特定 Exchange 版本的更新汇总 (RU).汇总内容适用于Exchange ...

  2. SLA服务可用性怎么达到？

    SLA:服务等级协议(简称:SLA,全称:service level agreement).是在一定开销下为保障服务的性能和可用性,服务提供商与用户间定义的一种双方认可的协定.通常这个开销是驱动提供服 ...

  3. 空间数据可视化之ArcLayer详解

    deck-overlay中 首先使用d3中的scaleQuantile将数据进行分类,scaleQuantile方法是d3中的一种数据分类方法(https://www.cnblogs.com/kids ...

  4. 自己动手用原生实现 bind/call/apply

    大家好!!!注册一年多的第一篇博客. 自我介绍: 本人非计算机专业出身,转行进入前端半年时间,写的东西可能观赏性不强,一起进步吧道友们... 接下来的一段时间, 我都会不定期整理自己理解的js知识点, ...

  5. #Java学习之路——基础阶段二（第六篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  6. 搭建微服务器：express+https+api代理

    概述 最近打算玩一下service worker,但是service worker只能在https下跑,所以查资料自己用纯express搭建了一个微服务器,把过程记录下来,供以后开发时参考,相信对其他 ...

  7. 从壹开始微服务 [ DDD ] 之四 ║让你明白DDD的小故事 & EFCore初探

    缘起 哈喽大家好哟,今天又到了老张的周二四放送时间了,当然中间还有不定期的更新(因为个人看papi酱看多了),这个主要是针对小伙伴提出的问题和优秀解决方案而写的,经过上周两篇DDD领域驱动设计的试水, ...

  8. 使用.Net Core+IView+Vue集成上传图片功能

    最近的项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离,在选择文件上传的组件中还是选择了全面支持Vue的IView,任何上传图片都是通过HTTP请求,服 ...

  9. PhotoPickerDemo【PhotoPicker0.9.8的个性化修改以及使用（内部glide版本号是3.7.0）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo使用的是PhotoPicker 0.9.8版本,属于比较旧的版本,里面集成的glide版本号是3.7.0.本篇文章主要是留 ...

  10. Flink的分布式缓存

    分布式缓存 Flink提供了一个分布式缓存,类似于hadoop,可以使用户在并行函数中很方便的读取本地文件,并把它放在taskmanager节点中,防止task重复拉取.此缓存的工作机制如下:程序注册 ...