jquery.picsign图片标注组件实例详解

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

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

            下一篇：使用webpack打包koa2 框架app

        
    
    
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？
    
    

        
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap
    
    

        

            

                
首页
                
破解
                
音乐
                
影视