ホームページ > ウェブフロントエンド > jsチュートリアル > jquery.picsignコンポーネントの使用方法の詳細な説明

jquery.picsignコンポーネントの使用方法の詳細な説明

php中世界最好的语言
リリース: 2018-04-19 13:56:18
オリジナル
1585 人が閲覧しました

今回は、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>
ログイン後にコピー

ブーツストラップ

rreee

レイヤー

rreee

ウェブイポップオーバー

<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>
ログイン後にコピー

2. 引用コンポーネントファイル

<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>
ログイン後にコピー

3.

を使用する ページに p

<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>
ログイン後にコピー

を追加します 初期化コンポーネント

<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" />
<script src="js/jquery.picsign.js"></script>
ログイン後にコピー

オプションパラメータの説明

<p id="picsign"></p>
ログイン後にコピー

基本データ形式

$("#picsign").picsign(option);
//option为组件参数,详细说明见option参数说明
ログイン後にコピー
  • ユーザーが追加したデータには、left、top、msg 属性が含まれている必要があります

  • ユーザーは他の属性を自分で拡張できます

  • 特別な指示: Signid キーワードを追加したり使用したりしないでください

メソッド呼び出し

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) {//删除完成执行的方法
 }
};
ログイン後にコピー

方法の説明

アノテーションデータを取得します

メソッド名: getData

パラメータ: なし アノテーションデータを追加します

メソッド名: addSign

パラメータ: 基本データ Json、

イベント

をトリガーするかどうか (デフォルトは true)

アノテーションの表示状態を切り替える

メソッド名: toggle

パラメータ: なし

コンポーネントの破壊

メソッド名: destroy パラメータ: なし

$("#picsign").picsign('functionName',parameter);
//functionName为方法名称,parameter为方法参数,详细说明参见方法说明
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS配列の重複排除を画像とテキストで詳しく説明

Yuansheng jsは抽選機能を実装

JSはモバイル端末上で無制限のロードとページング機能を実現

以上がjquery.picsignコンポーネントの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート