EasyUIシリーズ学習(6) - ツールチップ(プロンプトボックス)_html/css_WEB-ITnose

1. コンポーネントを作成します

0.ツールチップは他のコンポーネントに依存しません

1. クラスローディングを使用します

<a href="#" class="easyui-tooltip" title="这是一个提示信息">Hover me</a>

2. js を使用してロードします

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip();    })</script>

2. プロパティ

1.position: メッセージ ボックスの位置 (左、右、上、デフォルトの下)

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip();    })</script>

2.content: メッセージ ボックスのコンテンツ (html にすることができます)

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            content: "<strong>我是html</strong>"        });    })</script>

3.trackMouse: true の場合、プロンプト ボックスマウスで移動できます

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            trackMouse: true        });    })</script>

4.deltaX、deltaY: プロンプト ボックスの左上隅の特定の位置

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            deltaX: 50,            deltaY:50        });    })</script>

5.showDelay、プロンプトを表示/非表示にするまでの遅延時間のミリ秒数 HideDelayボックス、デフォルトは 200 です

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            showDelay: 1000,            hideDelay: 2000        });    })</script>

6.showEvent、hideEvent: イベントを表示/非表示にするときにプロンプ​​ト ボックスをアクティブにします。デフォルトは、mouseenter、mouseleave

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            //鼠标单击是显示提示框            showEvent: "click",            //鼠标双击是隐藏提示框            hideEvent: "dblclick"        });    })</script>

Three、events

1.onShow、 onHide: プロンプト ボックスの表示/非表示時にトリガーされます

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            onShow: function (e) {                alert("显示提示框的触发");            },            onHide: function (e) {                alert("隐藏提示框的触发");            }        });    })</script>

2 .onUpdate: プロンプト ボックスの内容が更新されたときにトリガーされます。デフォルトの内容は null です

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            content: "这是新内容",            onUpdate: function (content) {                alert("内容被更新:" + content);            }        });    })</script>

3.onPosition: プロンプト ボックスの位置が変更されたときにトリガーされます。

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            onPosition: function (left, top) {                console.log("left:" + left + ",top:" + top);            }        });    })</script>

4.onDestroy: プロンプト ボックスがキャンセルされたときにトリガーされます

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            onDestroy: function (none) {                alert("提示框被销毁");            }        });        $("#tBox").click(function () {            $(this).tooltip("destroy");        });    })</script>

4. メソッド

1.options: 属性オブジェクトを返します

2.show, hide: プロンプト ボックスの表示/非表示

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({        });        $("#tBox").tooltip("show");        $("#tBox").tooltip("hide");    })</script>

3.update: コンテンツのコンテンツを更新します

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({        });        //鼠标移动到”Hover me“时触发        $("#tBox").tooltip("update", "更新的内容");    })</script>

4.tip: ヒント要素オブジェクトを返します。 矢印要素オブジェクト (実際にはプロンプト ボックスによって生成された 2 つの div) を返します。

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            onShow: function () {                //div.tooltip.tooltip-bottom                console.log($("#tBox").tooltip("tip"));                //div.tooltip.tooltip-outer,div.tooltip-arrow                console.log($("#tBox").tooltip("arrow"));            }        });    })</script>

5.reposition: プロンプトボックスの位置をリセットします

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a><script>    $(function () {        $("#tBox").tooltip({            onShow: function () {                $(".tooltip-bottom").css("left", 500);            },            onHide: function () {                $("#tBox").tooltip("reposition");            }        });    })</script>

5. コンポーネントのデフォルト値

$.fn.tooltip.defaults.position = "right";