jquery.picsign 그림 레이 블 구성 요소 인 스 턴 스 상세 설명

며칠 동안 의 시도 와 학습 을 통 해 자신의 첫 번 째 js 구성 요 소 를 봉 인 했 습 니 다.부족 한 점 이 많 으 니 가르쳐 주 십시오.
일부 업무 수요 로 인해 이미지 에 표 시 를 추가 해 야 합 니 다.인터넷 에서 찾 았 지만 수 요 를 만족 시 키 지 못 하고 bug 가 존재 합 니 다.구덩이 가 너무 많 습 니 다.
그래서 하 나 를 패키지 하고 다른 유사 한 구성 요소 의 실현 방향 과 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>

bootstrap

<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>

3.사용
페이지 에 DIV 추가

<div id="picsign"></div>

구성 요소 초기 화

$("#picsign").picsign(option);
//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:'         ，      ，       ，         '
}]

사용자 가 추가 한 데이터 에는 left,top,msg 속성 이 포함 되 어야 합 니 다.

사용 자 는 스스로 기타 속성 을 확장 할 수 있 습 니 다.

특수 설명:signid 키 워드 를 추가 하거나 사용 하지 마 십시오.

방법 호출

$("#picsign").picsign('functionName',parameter);
//functionName     ，parameter     ，          

방법 설명
레이 블 데이터 가 져 오기
방법 이름:getData
인자:없 음

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

레이 블 데이터 추가
방법 이름:addSign
인자:기본 데이터 JSon,이벤트 실행 여부(기본 값 true)

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

레이 블 표시 상태 전환
방법 이름:toggle
인자:없 음

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

모듈 폐기
방법 이름:destroy
인자:없 음

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

총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 jquery.picsign 그림 레이 블 구성 요소 의 실례 를 상세 하 게 설명 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!