自作の関数ってどうやって作るんだろう？ どうやれば動くんだろう？ 実はさっぱりわかっていなかったりします。 なので、今回は 「魔法の鎖のつなぎ方(1) - ［JavaScript］All About」 これを見てお勉強することにしてみました。 サンプル 今回のは勉強するサイトにのっていたようにサンプルを作ってみます。 このブログのように、HTMLの途中でスクリプトを書いた場合、 サンプルを単に<script>の中に書いただけでは動作しなかった。 なので、$(function)を追加し、HTMLが読み込まれてから実行するようにし、 さらにbuttonをクリックしてから実行されるように組み直してみた。 ■HTML <div class="testClass">DIVでtestClassです</div> <div class="noTestClass">DIVでnoTestClassです</di
解説 マッチした要素に、イベントハンドラをバインドします。 カスタムイベントもバインドすることができます。 イベントの振る舞いの制御 イベントハンドラがfalseを返すと、イベントバブリング、及び、イベントに定義されている標準アクションが停止されます。 イベントバブリングのみを停止するには、イベントハンドラに渡されるイベントオブジェクトのstopPropagation()を呼び出してください。 また、標準アクションのみを停止するには、preventDefault()を呼び出してください。 バインド時にデータを渡す バインド時にイベントハンドラにデータを渡すには、第2引数にデータを指定します。その場合、イベントハンドラは第3引数に指定します。 データは、イベントハンドラに渡されるイベントオブジェクトのdataプロパティで参照することができます。 イベント実行時にデータを渡す イベント実行時に
クリックして内容が表示されるボタンと、マウスを乗せて内容が表示されるボタンがあるとします。私はクリックよりマウスを乗せる方が気軽におこなえると思います。クリックはひと手間多いですし、クリックして別のページに移動したら面倒だと思うと躊躇してしまいます。 ですので、自分でサイトを作る場合、できるだけマウスを乗せて開くようにしています。しかし、タッチデバイスの場合、マウスを乗せるという動作がないのでクリックで開くようにしないと仕方ありません。
<ul class="menu"> <li id="menu01"><a href="/page01/">page01</a></li> <li id="menu02"><a href="/page02/">page02</a></li> <li id="menu03"><a href="/page03/">page03</a></li> </ul> <ul class="menu"> <li id="menu01" class="current"><a href="/page01/">page01</a></li> <li id="menu02"><a href="/page02/">page02</a></li> <li id="menu03"><a href="/page03/">page03</a></li> </ul>
jquery-tubular〔背景いっぱいにYouTube動画を再生〕 jQuery Youtube Player〔YouTubeビデオ埋め込みカスタマイズ〕 jquery.mb.mediaEmbedder.1.0〔Vimeo、Ustream、livestream、YouTube、mp3などのメディアファイルを簡単に埋め込み〕 prettyPhoto〔リンククリックで、Vimeo、YouTube動画をポップアップ表示〕 jYouTube〔YouTubeビデオのサムネイルやスクリーンショットを取得するjQueryプラグイン〕 YouTubeのRSSから取得したビデオのサムネイルとリンクを出力〔jQuery使用〕 YouTube Chromeless Video Player〔クロムレスプレーヤー埋め込みプラグイン〕 jQuery Youtube playlist plugin〔カスタマイズ性
よく芸能人の写真等を保存させないためにいわるゆるコピーガード対応をしますが、スマホ対応も含め今回色々調べたのでまとめておきます。サイトの作りに詳しい人には無力ですが、安易には保存できなくする方法です。サイト全体で右クリック禁止+ドラックアン...
サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、 Youtubeの埋め込みを使って表示する事があるかと思います。 この際にJavaScriptを使って制御ができるYouTube JavaScript Player APIというものがあり、設置をしたので そちらの実装方法のメモです。 これを使うと自分が作ったボタンで再生や停止が出来るようになります。（他にもいろいろ出来ると思います） SWFObjectを使って動画を読み込む 動画を埋め込む際は、動画の共有にある「埋め込みコード」でiframeかobjectのタグをサイト内に入れますが、 APIを使うときはFlashなどを表示する時によく使う「SWFObject」を使用します。このJSを使わなくてもできるそうですが、 このAPIがFlash Player8からしか対応してないので、この「SWFObject
JavaScript でのブラウザ判定について まとまった情報がサクッとヒットしないので、まとめ UserAgent によるブラウザ判定 よくある単純な例 var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('opera') != -1) { return 'opera'; } else if (userAgent.indexOf('msie') != -1) { return 'ie'; } else if (userAgent.indexOf('chrome') != -1) { return 'chrome'; } else if (userAgent.indexOf('safari') != -1) { return 'safari'; } else if (userAgen
文字列の先頭と末尾から、空白を除去します。 渡された文字列から、正規表現で空白と見做されるものを除去します。 そのため、改行コードや全角のブランクであっても、空白として処理されます。 サンプル サンプル1 $("button").click(function () { var str = " \n lots of spaces before and after "; alert("'" + str + "'"); str = jQuery.trim(str); alert("'" + str + "' - no longer"); });
(最終更新: 2016-10-14) デモ: https://sutara79.github.io/demo-simple-foldable-list/ ソースコード: https://github.com/sutara79/demo-simple-foldable-list/ 解説下記のリスト要素を開閉式メニューにしたい場合。 <ul id="main_menu"> <li><a href="#">見出し1</a> <ul> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー1</a></li> </ul> </li> <li><a href="#">見出し2</a> <ul> <li><a href="#">サブメニュー2</a></li> <li><a hre
jQueryによる要素の存在チェックまとめです。 jQueryを実行する際、「$(selector)」が成功してjQueryオブジェクトが生成されたことを判断したいケースがあるかと思います。なかったらすいません。 ということで、jQueryで要素（jQueryオブジェクト）が1つでも存在することをチェックする方法を調べてみました。実際に動かした結果でまとめてます。 サンプルはscript要素で括ってますが、必要に応じて「$(function(){ ... });」などで括ってください。間違った情報・表現等がありましたら適宜修正しますのでご指摘ください。 １．$(selector)[0] 「$(selector)」で生成されるjQueryオブジェクトは配列のように扱える（配列の基本メソッドが使える訳ではない）ので、0番目の要素をチェックすることで存在チェックを行えます。 <script> i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
