自分用。
| セレクタ | 詳細 |
|---|---|
| [attr] | 「attr」属性を持つ要素 |
| [attr=’val’] | 「attr」属性の値が「val」である要素 |
| [attr!=’val’] | 「attr」属性の値が「val」でない要素 |
| [attr^=’val’] | 「attr」属性の値が「val」で始まる要素 |
| [attr$=’val’] | 「attr」属性の値が「val」で終わる要素 |
| [attr*=’val’] | 「attr」属性の値に「val」を含む要素 |
| [attr~=’val’] | 「attr」属性の値を空白で区切り、そのうちいずれかが「val」である要素 |
| [attr|=’val’] | 「attr」属性の値が「val」であるか、「val-」で始まる要素 |
こうみると属性セレクタだけでもめちゃくちゃ多い。最後のほうに関しては有効に使える場面がなかなか無いかも。
自分用まとめ。
いわゆる、クロスドメイン間通信。
実現方法は下記の4つ。
・JSONP
・iframeハック
・window.postMessage()
・XMLHttpRequest level 2
JSONPはクロスドメイン通信の基本という印象。iframeハックはその巧妙さに感動を覚えた。後者の二つに関してはそういうアプローチもあるのだな程度の認識でもよさそうかな？
実際の実装例は色々と実験後まとめる予定。
えくすぺりめんとなう！！
めも。
まずは下記Gitリポジトリからソースをダウンロード。
https://github.com/richadams/jquery-tripleclick
次にスクリプトファイルの読み込み。
<script type="text/javascript" src="/tripleclick.js"></script>
そして下記のようにイベントをバインドしてやればOK。
■HTML
<span class="target">Click!</span>
■Javascript
<script>
$('.target').on('tripleclick', function() {
alert('ok');
});
</script>
.bind()メソッドを用いた実装も可能。また3回クリックするまでのタイムアウト時間も設定可能なため柔軟な対応が可能。
更なる詳細は同梱されているREADME.mdを参照されたし。
またもや良さげなやーつー発見。
かなり豊富なAPIとメソッドを持っているため、出来ないことはほぼない。自分的にはAjaxを用いた遅延読み込みが出来ればおなか一杯大満足である。
ドキュメントは下記URLを参照。
http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html
案の定いきなりドキュメントを読み始めても途方に暮れたので、念のため雛形をメモ。
■HTML
<div id="tree"></div>
■Javascript
$("#tree").dynatree({
// 初回読み込み時のファイルツリー読込メソッド
initAjax: {
url: '/path/to/parentNode.json'
},
// isLazyが有効なノードが展開された際に実行
onLazyRead: function(node) {
node.appendAjax({
url: /path/to/childrenNode.json,
});
},
// ノードが選択した際に実行
onActivate: function(node) {
console.log(node.getKeyPath());
},
});
読込先のノードに指定したURLは下記のようなJSON配列を返すように記述しておけばおｋ。
[
{"title" : "fileName", "isLazy" : false, "key" : "hogehoge"},
{"title" : "FolderName", "isFolder" : true, "isLazy" : true, "key" : "piyopiyo"}
]
node.getKeyPath()は各ノードに登録されたキーパスを取得してくれるメソッド。
これだけ書けてれば基本的なファイルツリーの実装には困らないはず。
更なる詳細は公式ドキュメントを参照されたし。
いいものみつけたのでメモ。
ちょっといじくってみたけど設定やAPIも豊富でかなり便利な印象。
上記のURLから最新のソースをダウンロードして、ファイルを展開。
libの内容を全て読み込み、themeの中から好きなテーマを選択、そしてmodeの中から適用させたいプログラミング言語を選択してよみこみめば準備は完了。
あとは下記のように実行すれば良い。
■HTML
<textarea id="editor"></textarea>
■Javascript
CodeMirror.fromTextArea(document.getElementById('editor'), {
mode: 'application/x-httpd-php',
theme: 'lesser-dark',
indentUnit: 4,
indentWithTabs: false,
tabMode: 'shift',
enterMode: 'keep',
electricChars: false,
lineNumbers: true,
firstLineNumber: 1,
gutter: false,
fixedGutter:false,
matchBrackets: true
});
更なる細かいオプションなどは公式ドキュメントを参照されたし。
ちなみにGithubのリポジトリは以下。
https://github.com/marijnh/codemirror
自分用。
■width()
padding、含まない
border-width、含まない
margin、含まない
■innerWidth()
padding、含む
border-width、含まない
margin、含まない
■outerWidth()
padding、含む
border-width、含む
margin、含まない
■outerWidth(true)
padding、含む
border-width、含む
margin、含む
height()系に関しても上記と同様。
めも。
resize()関数を用いる。
$(window).resize(function() {
// 処理
});
nbsp;
今回はjQuery無しのアプローチ。
下記のようなHTMLがあったとする。
<div class="target" data-hoge="piyo">target</div>
上記の「data-hoge」の中身を取得したい場合。
var elem = document.querySelector('.target');
var data = elem.getAttribute('data-hoge');
console.log(data);
// piyo
という様に取得できる。