집 > 기사 > 웹 프론트엔드 > jquery.picsign 컴포넌트 사용에 대한 자세한 설명

jquery.picsign 컴포넌트 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-19 13:56:181556검색

이번에는 jquery.picsign 컴포넌트 사용에 대한 자세한 설명을 가져왔습니다. jquery.picsign 컴포넌트 사용 시 주의사항은 무엇인지 살펴보겠습니다.

며칠 동안 노력하고 배운 후에 첫 번째 JS 구성 요소를 캡슐화했습니다. 부족한 점이 많으면 알려주세요.

일부 비즈니스 요구로 인해 사진에 주석을 추가해야 합니다. 인터넷에서 일부를 찾았지만 요구 사항을 충족할 수 없으며 버그도 있고 함정도 너무 많습니다

그래서 직접 캡슐화하자는 생각이 들었고, 다른 유사한 컴포넌트의 구현 아이디어와 js 컴포넌트의 개발 아이디어를 배우고, jquery.picsign 컴포넌트를 개발했습니다

jQuery 그림 주석 구성 요소(jquery.picsign)

온라인 데모: http://artlessbruin.gitee.io/picsign/

gitee: https://gitee.com/ArtlessBruin/PicSign

1. 구성 요소 종속성

jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

부트스트랩

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

layer

<link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>

webui-popover

<link href="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>

2. 인용컴포넌트 파일

<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" />
<script src="js/jquery.picsign.js"></script>

을 사용하세요. 페이지에 p

<p id="picsign"></p>

를 추가하세요. 초기화 구성요소

$("#picsign").picsign(option);
//option为组件参数，详细说明见option参数说明

옵션 매개변수 설명

var option={
 picurl: null,//图片地址
 signdata: [],//初始数据,详细说明参见基本数据格式
 editable: {//是否可编辑(默认可编辑 设置为false则禁用所有编辑)
 add: true,//是否可添加
 update: true,//是否可修改
 del: true,//是否可删除
 move: true//是否可移动
 },
 signclass: 'signdot',//标注点样式
 popwidth: 400,//标注内容显示窗口宽
 popheight: 247,//标注内容显示窗口高
 inputwidth: 400,//标注内容编辑窗口宽
 inputheight: 247,//标注内容编辑窗口高
 beforeadd: function (data) {//在添加保存前执行的方法，返回false阻断添加
 },
 onadd: function (data) {//添加完成执行的方法
 },
 beforeupdate: function (data) {//在修改保存前执行的方法，返回false阻断修改
 },
 onupdate: function (data) {//修改完成执行的方法
 },
 beforedel: function (data) {//在删除保存前执行的方法，返回false阻断删除
 },
 ondel: function (data) {//删除完成执行的方法
 }
};

기본 데이터 형식

[{
 left:'50%',
 top:'50%',
 msg:'这是标注信息',
 signid:'这是标注唯一标识符，用户无需赋值，与组件逻辑相关，请不要使用此关键字'
}]

사용자가 추가한 데이터에는 왼쪽, 위쪽, msg 속성
이 포함되어야 합니다. 사용자는 스스로 다른 속성을 확장할 수 있습니다
특별 지침: signid 키워드를 추가하거나 사용하지 마세요

메소드 호출

$("#picsign").picsign('functionName',parameter);
//functionName为方法名称，parameter为方法参数，详细说明参见方法说明

방법 설명

주석 데이터 받기

메소드 이름: getData

매개변수: 없음

$("#picsign").picsign('getData');

주석 데이터 추가

메소드 이름: addSign

매개변수: 기본 데이터 Json, 이벤트 트리거 여부(기본값은 true)

$("#p_picsign").picsign("addSign",
 [{ left: '50%', top: '10%', msg: "123"},
 { left: '80%', top: '10%', msg: "456"}],
 true
)

주석 표시 상태 전환

메소드 이름:toggle

매개변수: 없음

$("#p_picsign").picsign("toggle")

구성 요소 파괴

메소드 이름: destroy

매개변수: 없음

$("#p_picsign").picsign("destroy")

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!