JSDoc: Class: Element

Constructor

src/util/util-Element.js, line 3

new Element(element)

Parameters:

element DOM
ドラッグ機能を付与するDOM要素

Members

(static) Element.SetStyles

DOM要素にスタイル設定

Methods

src/util/util-Element.js, line 67

(static) Element.createDialog(iHtmlopt, elementopt, idopt, wopt, hopt, styleopt)

ダイアログを生成し表示する

Parameters:

iHtml String <optional> "no message"
ダイアログのinnerHTMLに設定する文字列

element DOM <optional> document.body
ダイアログの位置とサイズを指定する際の基準となる要素

id String <optional> "HJN.dialog"
ダイアログ要素のid名、同一名称のダイアログを閉じて作成する

w Number <optional> 40
elementに対するダイアログの幅の比率％

h Number <optional> 40
elementに対するダイアログの高さの比率％

style Object <optional> { width: w+"%", height: h+"%", left: 50-w/2+"%", top: 50-h/2+"%", position: "absolute", background: "rgba(255, 255, 255, 0.8)", border: "medium solid #aaa"}
ダイアログ背景のCSSスタイル

src/util/util-Element.js, line 38

(static) Element.enableDraggableClass()

CSSクラス名"hjnDraggableBox"が付いた要素をドラッグ＆ドロップで移動できるようにする

Examples

.hjnDraggableBox {} .hjnDraggableItem:hover {cursor: move;
         background: rgba(128, 128, 128, 0.5); transition: all 0.2s; }

<div class="hjnDraggableBox"></div>

src/util/util-Element.js, line 200

(static) Element#addHandleElement(func, styleopt, styleDopt, transformopt, classNameopt)

マウスクリック用要素を追加

Parameters:

func function
マウス押下時に発火する処理

style object <optional>
elementに設定するスタイル

styleD object <optional> {top:"0", left:"0" width:"5px", height:"5px"}
elementに設定するデフォルトスタイル（styleに同じ属性がある場合styleが優先される）

transform String <optional> "over"
paddingに対する要素の位置 "onFrame":線上、"inside":内側、その他：指定文字列をtransformスタイルに設定

className String <optional> "hjnDraggableItem"
マウスイベントを取得するdivに設定するCSSクラス名

src/util/util-Element.js, line 147

(static) Element#makeMoveable(styleopt)

ドラッグによる移動機能を付与する

Parameters:

style Object <optional> {cursor: "move", top:"0", left:"50%", width:"100%", height:"20px"};
ドラッグ移動機能要素のCSSスタイル

Returns:

this

src/util/util-Element.js, line 113

(static) Element#makeRemovable(idopt, styleopt)

×ボタンによる要素削除機能を付与する

Parameters:

id String <optional> ""
×ボタン要素のid名（重複すると先に作成された×ボタンのダイアログが閉じられる）

style Object <optional> {cursor: "move", top:"0", left:"50%", width:"100%",height:"20px"};
×ボタン要素のCSSスタイル

Returns:

this

src/util/util-Element.js, line 163

(static) Element#makeResizable(styleopt)

ドラッグによるリサイズ機能を付与する

Parameters:

style object <optional>
リサイズ機能要素のCSSスタイルを、デフォルトから変更する際に指定

Returns:

this