序文
ツールヒントの効果は、ウェブ制作効果を使用するのが一般的です。ユーザが特定のコントロール、ツールヒントの表示の上にマウスを移動し、ユーザに適切なメッセージを提示するときに、マウスの葉は、ツールヒントが隠された場合。一般的に、私たちは実際には、我々は多くの情報を表示することができ、または複数の単語を表示するツールチップを使用します。今日の焦点は、を介して行われ Hightopo の Web用HT スタイルヒント様々な製品を作成します。
ホーム住所：https://www.hightopo.com/index.html
実装
ht.graph.GraphView、ht.graph3d.Graph3dView、ht.widget.ListView、ht.widget.PropertyView、ht.widget.TableView、ht.widgetそれぞれ、ビューHT構成ツールヒント機能を有する8つの成分が存在します。ツリービュー、ht.widget.TreeTableView、ht.widget.Toolbar。
ht.Data HTユーザサービス情報は、現在のノード、エッジを提供する、データオブジェクトのプロパティに格納することができる、最も基本的なデータ・タイプであり、列他のサブクラスのコンポーネントは、データをまとめて本明細書で使用される、異なるビューに適用されます。
表示テキストベースの情報
まず、あなたはノードテストを作成した後、ツールヒント機能を有効にし、それを呼び出すためにコンポーネントenableToolTip（）メソッドを呼び出すことによって、（基本的に同じ残りの成分と、例えばここでht.graph.GraphView）ビューコンポーネントを作成しますツールヒントを表示するために、その内容を設定するsetToolTip（）メソッド。この効果は、アイコンの上に私のマウスは、ツールヒントが表示されるとき、上図で達成することができます。次のように具体的なコードは次のとおりです。
VARデータモデル=新しいht.DataModel（）;
//ビューコンポーネントを作成します。
VARの新しいgraphView = htgraphGraphView（データモデル）。
dataModel.setBackground（ '黒' ）。
//オープンツールヒント
graphView.enableToolTip（）;
VARノードが新しい= ht.Nodeを（）;
node.setPosition(600, 150); node.setImage('symbols/ht.json'); // 设置 ToolTip 内容 node.setToolTip('HT for Web'); dataModel.add(node); graphView.addToDOM();
この部分は、私はいくつかの余分なポイントについてお話したいと思います
- （関係なく、コンテンツが行として表示されますどのくらいの良質なコンテンツを、setToolTipにより提供HTツールヒント形式のデフォルト設定）を使用する場合は、「\ n」は改行「\ rを」キャリッジリターンが役割を果たしています。
- デフォルト設定ツールヒントHTフォーマットを使用する場合は、ツールヒントが開いて、しかし場合は、それがツールヒントに表示されません、適切な設定を対象としませんでした。
- enableToolTip（）がオンになっている、diableToolTip（）私はこれらの2つのメソッドを呼び出して、上記画像は、デフォルトのツールヒントが閉じた状態にあることに注意することは、右上のボタンでオンとオフツールヒントをした、オフになっています。
- ノードはgetToolTip（）メソッドによって、現在のツールヒントセットの内容を表示することができます。
- Ht.Defaultオブジェクト設定を変更したい場合、あなたはHTシステムが初期化のみで構成情報htconfigを読み込み、そのためhtconfigを導入しなければならないので、グローバル変数名でhtconfigを指定する必要があり、6つのツールヒントの設定パラメータに含まht.jsはhtconfig運転状態変数を変更し、パケットの前に初期化されているしません作業、次のサンプルコード：
<スクリプト>
htconfig = {
デフォルト： {
//遅延間隔ツールチップ表示アセンブリ
toolTipDelay：100 、
//ディスプレイケースのToolTipコンポーネント、マウスがツールヒントをリアルタイムでフォローアップを続けるかどうか、新しい場所に移動された場合
toolTipContinual：真、 //ツールチップの背景色 toolTipBackground： '黄色' 、 //ツールヒントテキストの色 toolTipLabelColor： '＃000' 、toolTipLabelFontフォントヒント//テキスト： '12ピクセルのArial、サンセリフ' 、//ヒントシャドウ色toolTipShadowColor： 'RGBA（0,0,0,0.35）' ;}} </ SCRIPT > <スクリプトSRC = "JS / ht.js"> </ SCRIPT>
ディスプレイのカスタムコンテンツ
デフォルトテキスト情報に加えて、HTは、カスタムツールヒント機能を提供し、ほとんどのコンポーネントはツールチップリロードカスタムテキストを返す図getToolTip（）メソッドを持っています。下図の例では、左側の部分は、右上部分はht.widget.FormPane下に採用ht.widget.PropertyViewの使用、である、ht.graph.GraphViewを使用し続けます。
まず、我々は代表的な例として、まだGraphViewたので、ツールチップにコンポーネントのほとんどの同様の使用による左部分にあるのを見て、みましょう。私たちは、図から見ることができ、ツールチップの内容は、2行になりますが、一部にHTフォーマットの使用は、コンテンツのラップのデフォルトの設定ではありません述べました。getToolTip（）相互作用イベントgetDataAt（）メソッドによって生成されたデータを取得するために対話型イベントイベントパラメータに渡され、これが）ので、過負荷graphView getToolTip（であり、我々はデータに応じて適切な設定を行うことができます。次のようにサンプルコードは次のとおりです。
GETCOLOR =関数（値）{
IF（値<40 ）
リターン'＃00A406' ;
IF（値<70 ） リターン'＃FFCC00' ; リターン'＃A60000' ; }。graphView.getToolTip =関数（E）{VARデータ= graphView.getDataAt（E）; 場合（データ）{VAR CPU = data.a（ 'CPU' ）、MEM = data.a（ 'MEM' ）、HTML =「<divのスタイル= "背景：#FDFDFD;パディング：計6Px;フォントサイズ：13px ;ボックスシャドウ：0 10pxのグレー; ">」+ '<スパンスタイル= "色：黒"> CPU：＆NBSP;＆NBSP; </ span>の' + '<スパンスタイル="色：' + GETCOLOR（CPU ）+ '">' + CPU + '％</ span>の' + '<BR>' + '<スパンスタイル= "色：黒"> MEM：＆NBSP;＆NBSP; </ span>の' + '<スパンスタイル= "色：」+ GETCOLOR（MEM）+ '">' + MEM + '％</ span>の' + '</ div>' ; 戻り値{HTML：HTML}。} }。
この例から分かる上記コードからのinnerHTML DIVツールチップ従ってgraphViewのビューのみ1つのデータセットに、結合データの現在のデータ内容を示すなどオーバーロード方法に加え効果定義HTMLでありますデータが提示された限り、あなたが正式なプロジェクトの開発をカスタマイズする必要が異なる複数のデータフォーマットがあるかもしれないと厳しい判定のデータは、存在しません。この場合、我々はgetDataAt（）異なる設定のためのさまざまなデータへの1つ取得したデータを分析して行くことができ、使用setToolTip（）を続けることができ、その後、getDataAt（）取得したデータを呼び出すgetToolTip（ ）、取得した値を処理します。
propertyView.addProperties（[
{
名前：「名前」、
displayName： '名前'
}、
{
displayName： 'CPU' 、 drawPropertyValue：関数（G、プロパティ、値、rowIndexに、X、Y、W、H、データ、ビュー）{ drawFunc（G、data.a（ 'CPU' ）、X、Y、W、H）。}、getToolTip：関数（データ、ISVALUE、propertyView）{ISVALUEを返しますか？data.a（ 'CPU'）+ '％'： 'CPU使用率' 。}}、{のdisplayName： 'MEM' 、drawPropertyValue：関数（G、プロパティ、値、rowIndexに、X、Y、W、H、データ、ビュー）{drawFunc（G、data.a（ 'MEM' ）、X、Y、W、H）。}、getToolTip：関数（データ、ISVALUE、propertyView）{ISVALUEを返しますか？data.a（ 'MEM'）+ '％'： 'メモリの使用率' ; }}]）。
右上部分propertyView構成コード、ht.widget.PropertyViewのコードおよびコンポーネントの残りの7種類が多少異なっていて、各サブエレメントht.Property、異なるカスタムコンテンツgetToolTip方法によって提供することができます。その特異性に起因して、getToolTipは、3つのパラメータを渡します：データは、現在選択されているデータのデータモデルの代表的なオブジェクトもpropertyViewデータは、現在表示されているオブジェクトながら、ISVALUEは、現在のマウス位置は、属性値の権利範囲内である代表値の場合左は、name属性の範囲を表し、それはfalseです。propertyViewプロパティは、属性要素が現在位置して表します。
プラグ-HT UIのポップオーバーの使用
UIライブラリはように使用することの難しさ、高いパフォーマンス、拡張性の高い、部品が豊富な、クロスプラットフォームと優れたフレームワークHTパケットコアと高度なHTML5のCanvasメカニズムに基づいて、強力なコンポーネントライブラリのインタフェースです。ポップアップボックスと容器ht.ui.Popoverヒント同様に、メッセージの一部は、ホストコンポーネントの周囲に表示されてもよいです。HT-ui.jsファイルを導入する必要性を使用している場合。
ポップオーバープラグインHT UIを使用してください。
この例では、UIは、3つのButtonコンポーネントを追加し、3つの異なるポップオーバーが設けられています。
- 最初のそのようなHTMLテキスト、DOMオブジェクトとして、任意のHTMLコンテンツにパッケージングすることができるA ht.ui.HtmlViewネストされたIFRAME、HtmlViewによるものです。
- 第二の例では、充填アセンブリht.graph3d.Graph3dView HT ht.ui.HTViewコアパッケージを介して右側です。
- 最後の例が示すEchartsグラフ。最初の2つの使用UI自身のコンポーネントとは異なり、ここでは、UIライブラリーは、カスタムコンポーネントの機能を提供ht.ui.EchartViewコンポーネントの実装Echartsの表示をカスタマイズ、上記の画像のようなボタンは、独自に行くことができます定義が、私たちはここに非常に詳細に入ることはありません。
// htmlView
VARボタン=新しいht.ui.Button（）;
button.setText（ 'ホバー私' ）;
VAR htmlView =新しいht.ui.HtmlView（）;
htmlView.setContent（ '<IFRAME国境= "0"スタイル= "幅：400ピクセル、高さ300ピクセル;マージン：0;パディング：0;ボーダー：0;" SRC = "http://www.hightopo.com"> </ IFRAME>」）;
VaRのポップオーバー=新しいht.ui.Popover（）; popover.setContentView（htmlView）。 button.setPopover（popover1、 'ホバー' ）; button.addToDOM（ウィンドウ、{X：70、Y：20、幅80、高さ：24 }）;
ここで私は一例として、最初の完全なコードを掲載しました。まず、ホストコンポーネントとしてボタンオブジェクトを定義し、htmlViewを定義し、表示され、最終的にはボタンに設定され、ポップオーバーに追加されるパッケージコンテンツへのsetContent道と呼んでいます。あなたがショーをクリックする必要がある場合は、クリックの代わりに置くことも可能です。
ポップオーバーのプラグインでHTを使用
ポップオーバーのプラグインも、HTで使用することができ、次のIはgraphViewに説明する例でした。
図は、2つのgraphViewノード内のコンテンツに加えて、これらの2ポップオーバーと同じ内容に設定されています。そして、UIの違いは、ポップオーバーは、ホストによって設定されsetPopover呼び出すが、ポップオーバーの非表示（）とshow（）を制御することにより、プライベート_popoverノード変数、および非表示と表示上のキャッシュませんでした。
関数getScreenRect（graphView、ノード）{
VAR TX = graphView.tx（）、
あなた= graphView.ty（）
ズーム= graphView.getZoom（）、 POS = node.getPosition（）、 幅= node.getWidth（）* ズーム、高さ= node.getHeight（）* ズーム。リターン{X：TX + pos.x *ズーム-幅/ 2 、Y：TY + pos.y *ズーム-高さ/ 2 、幅：幅、高さ：高}}関数のinit（）{graphView =新しいht.graph .GraphView（）。データモデル= graphView.dm（）。ノード1 =新しいht.Node（）; node1.setPosition（200、100 ）。node1.setName（ 'デバイス1' ）; node1._popover = createPopover（ 'トップ' ）。dataModel.add（ノード1）。。graphView.getView（）のaddEventListener（ 'のMouseMove'、関数（E）{VAR oldHoverNode = graphView._hoverNode; VAR newNode = graphView.getDataAt（e）は、IF（oldHoverNode ==！newNode）{もし（oldHoverNode）{oldHoverNode._popover.hide（）。}（newNode &&場合newNode._popover）{VAR newPopover = newNode._popover。VAR RECT = getScreenRect（graphView、newNode）。newPopover.setMaster（RECT）。newNode._popover.show（）; } graphView._hoverNode = newNode。}}）。graphView.addToDOM（）; }
getViewメソッド（）により、マウスが新しいノードに移動したときにそのモニタ、マウス移動イベントのルートDIV層トポロジコンポーネントを取得することができポップオーバー非表示にするには、元のノードは、その後、graphViewにプライベート追加しながら、そのポップオーバーを表示します。変数を記録しました。イベントリスナーにポップオーバーsetMaster（）メソッドで呼び出され、ポップオーバーの必要性は、表示矩形ホストに従って配置されるので、現在のノードの矩形を渡します。
概要
ツールヒントの使用ではほとんどの場合には、名前、ロゴ、またはロールの写真を示しています。基本的な機能を提供するだけでなく、拡張の余地を与えるが、ツールヒントHT、あなたがチャートを表示することができ、あなたはまた、3Dインターフェイスを表示することができます。また、表示したいかもしれない他のものがあるでしょう。興味のある方は、資料の冒頭にリンクをクリックしてください、HTのご連絡後どうする他に何を見てみましょう。