undefined

新米WEBエンジニアの備忘録

MutationObserverを使用してDOMの変更を監視する

指定要素内のDOM変更を監視し、変更があった場合に処理を実行したい場面があり、MutationObserverを利用して実装を行いました。

インスタンスを作成する時にコールバック関数を引数に渡して、インスタンスのobserveメソッド使用します。

observeメソッドの引数は、第一引数が監視対象のノード, 第二引数が監視オプションになります。

MutationObserver

Atomにインストールしたパッケージ・テーマをメモしていく

導入したら随時更新

[パッケージ]

japanese-menu : 日本語化
file-icons : ファイル種別のアイコンを表示
autoclose-html : htmlタグの閉じタグ挿入
jQuery-snippetsjQueryスニペット
atom-ternjs : jsコード補完
Linter構文解析
linter-jshint : js構文チェック
linter-htmlhint: html構文チェック
color-picker : カラーピッカー

[テーマ]
mahou-shoujo-syntax

まどかマギカの色になっているらしい。

f:id:vitmind:20170323010219p:plainf

monokai

王道

f:id:vitmind:20170323010510p:plain

 現在はコアテーマのbase16-tomorrow-dark-themeを使用中。

$.trimを使用して入力値から前後の空白を削除し、フィールドに再セットする

blurイベントを使用するのでフォーカスを失った時にイベント発火。

入力値から前後の空白を削除してフィールドに再セット

CSSで字下げ表示

非常に地味な内容ですが、text-indentプロパティを初めて使ったので一応メモ。

padding-leftで1文字分ずらし、更にtext-indentで開始位置を1文字分だけ左にずらす。

なるほど。

cssで字下げ表示

結果

※この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

jQueryを使用してツールチップを実装する

jQueryを使ったツールチップ表示です。

ツールチップは去年の2月頃に携わったプロジェクトで実装した記憶があるのですが、

その時はわけも分からずネットにあったコードを真似て実装していたような気がします。

約一年前のことですが、その時のことをふと思い出したので、改めて簡単なツールチップを作ってみました。

ライブラリは使わずに実装し、かつツールチップがマウスカーソルに追従して動くようにしています。

jQueryを使用してツールチップを表示する

ダイアログ表示処理の共通化

ダイアログ表示機能を実装した際、処理の共通化も合わせて開発したのでメモ。

jQueryUIのDilalogウィジェットを用いて実装しています。

 

・common_dialog.js -

ダイアログ表示の共通処理を行うオブジェクト"CommonDialog"を作成。

ダイアログの表示制御を行う共通オブジェクト

hoge_fuga_dialog.html - view

hoge_fuga_dialog.js - 

クリックイベント発火後に呼び出し元のidを見てダイアログ別の追加設定の取得と初期化を行います。

その後は以下のようにCommonDialog内の処理を呼んで終了です。

CommonDialog.init(this.dialogOpt[id]);
CommonDialog.open();

"common_dialog.js"を使用したダイアログ表示

 

Deferredを用いたajax共通オブジェクト

ajax処理を実装した際に作成したオブジェクト。

Deferredを用いたajax共通関数