<script src="/UploadFiles/2021-04-02/jquery.min.js">

bootstrap


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

layer


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

webui-popover


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

2. 引用组件文件


<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" />
<script src="/UploadFiles/2021-04-02/jquery.picsign.js">

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图片标注组件实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

                                
                                

                                    jquery.picsign,jquery,组件 
                                
华山资源网 Design By www.eoogi.com
                            
                        
                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            
                        
                        

                            

                                
                                    上一篇
                                    
Vue多种方法实现表头和首列固定的示例代码
                                
                            
                            

                                
                                    下一篇
                                    
使用webpack打包koa2 框架app
                                
                            
                        
                        
                        
华山资源网 Design By www.eoogi.com
                        

                            

                                
                                
                                    评论“jquery.picsign图片标注组件实例详解”
                                
                            
                            

                                

                                    

                                        

                                            

                                                

                                                    
                                                
                                                

                                                    
                                                
                                                

                                                    

                                                    

                                                    

                                                
                                                

                                                     再想想
                                                    
                                                    
                                                    
                                                    
                                                    
                                                
                                            
                                            

                                        
                                    
                                    

                                    

                                        
暂无评论...