JavaScriptのサンプル | ワクガンス
JavaScriptのサンプル | ワクガンス JavaScriptサンプル一覧 空判定について | null,空文字,undefined,0 submit時、form内に存在する全入力要素のバリデーションを検知する Laravelマイグレーション生成ツール 数値チェックの検証 | 数字チェック vue.jsのデモ /aframe_demo 可変格子SVG datalist型テキストボックスをSELECTボックスに近い感覚で扱えるようにするライブラリ showModalBigImg モーダル大画像表示モジュール JavaScriptの覚書：クラスの継承 | スーパークラス, 基本クラス, サブクラス, extends 1つのdatalistを複数のテキストボックスで使いまわす datalistによるSELECTのような使い方 | サジェスト（入力候補）と実際の入力値が異なる場合 Vue.j
jQueryでイベントが発火しないときの簡単な対処法 | PisukeCode - Web開発まとめ
「ボタンにイベントを設定したはずなのに発火しない」 「チェックボックスにチェックが入ってもイベントが起きない」 こういう風になぜかイベントが発火しないことはjQueryを使っているとちょくちょく遭遇します。 しかもエラーも出ないし、DOMの読み込み後にイベントを設定してるのに関わらずです。 という訳でイベントが発火しないときの簡単にできる対処法について紹介 イベントが発火しないのはなぜ？ まずなんでイベントが発生しないのか？ ということですが、それは単純にイベントハンドラが登録されていないからです。 そもそもイベントハンドラが登録されてなければイベントは発火しようがありません。 ではどういうときにイベントが未登録になってしまうのか・・・ それは動的にボタンやチェックボックスなどの部品を追加したときです。 これだけだと分かりにくいので少し例を使って説明します。 例えば次のようなHTMLを作成
画面中央に表示するモーダルウィンドウを実装したい ｜ Tips Note by TAM
画面中央に表示するモーダルウィンドウをjQueryで実装してみました。 ■HTML <div id="modal-main">モーダルウィンドウ</div> <!-- #contents START --> <div id="contents"> <p><a id="modal-open">【クリックでモーダルウィンドウを開きます。】</a></p> <p class="page-txt">ここからページ本文<br> <br> ↓↓↓ スクロールしてください ↓↓↓</p> </div> <!--/#contents--> ■CSS #contents { z-index: 0; font-size: 16px; } .page-txt { margin: 30px 0 0; height: 2000px; } #modal-open { color: #cc0000; } /* モーダル
jQueryで動的に追加した要素はクリックイベントが発火しない？いやそんなことはないぞ - Qiita
知ってるよって？ 知ってる人には当たり前、でも知らない人はかなり躓くんだよ！ 事象 こんなボタンを作るじゃろ <div class="btn-area"> <button type="button" class="add-btn">ボタン1</button> </div> $(".add-btn").on("click", function () { var num = Number($(this).text().replace("ボタン", "")); var html = '<button type="button" class="add-btn">ボタン' + (num + 1) + '</button>'; $(".btn-area").append(html); }); 「ボタン1」をクリックするたび「ボタン2」が増えるね だがしかし！ 「ボタン2」をクリックしても何も起きない！
【jQuery】サムネイルをクリックするとメイン画像が切り替わるシンプルな写真ギャラリー ｜ KLUTCHE
余計な機能を省いたシンプルな写真ギャラリーをサイトに設置したい時には試してみてください。 HTMLもjavascriptも短く、理解しやすいのでカスタマイズも容易だと思います。 まずはデモ デモページはこちら javascript jQuery依存のスクリプトなので、まずjQueryを読み込んでください。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> その後、下のスクリプトを記載します。 $(function(){ $("img.ChangePhoto").click(function(){ var ImgSrc = $(this).attr("src"); var ImgAlt = $(this).attr("al
jQueryで、ボタンをクリックすると、同じtrタグにあるtｄ要素のtextをアラート表示したい。
1<head> 2<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 3<script> 4$(function(){ 5 $('button.delete').on("click",function(){ 6 alert($(this).closest('tr').html()); /*①*/ 7 alert($(this).closest('td.name').text()); /*②*/ 8 alert($(this).closest('tr td.name').text()); /*③*/ 9 }) 10}) 11</script> 12</head> 13<body> 14<table> 15 <tr> 16 <td class="id" >1</td> 17 <td class="name">A</td
clickイベント(jQuery)の罠 – Webサプリ
clickイベントが動かない jQueryのclickイベントを使っているとうまく動かないときがある。 元々存在するDOMにclickイベントを設定するときは、期待した通りに動くが、jQueryのappendメソッドなどで後から追加した要素にclickイベントを設定するとクリックをしているのに動かないことがあります。 そういうときは、onメソッドを使うと解決できるので、その方法をご紹介致します。 clickイベントが効かない NGパターン 生成したDOM要素にイベント設定する方法 clickイベントが効かない appendメソッドなどで、動的に要素を追加してその要素にclickイベントを設定しても、全く動かない。 調べてみると、jQueryには、イベントの記述方法が二つあったので、うまくいかない例とうまくいった例を紹介します。 NGパターン clickイベントを設定する簡単な方法は、cli
非同期処理中の Now Loading を jQuery で表示させる方法
画面遷移することなく、同じ画面内でサーバーとやりとりする処理を「非同期処理」と言います。 通常の同期処理では、処理が終われば次の画面が表示されます。一方、非同期処理の場合、どのタイミングで処理が始まっていつ処理が終わったのか分からないことがあります。 そんな時に用いられるのが、ぐるぐる回るローディング画像です。この画像を表示することで、処理の開始・終了を明示的に表現することができます。 しかし全ての非同期処理に対して、画像の表示・非表示処理を実装するのは大変です。そこで非同期の開始時・終了時に関数を呼び出せば実装できるよう、汎用的に使える処理をサンプルプログラムとして紹介していきます。 一般的にはぐるぐる回転する GIF 画像を利用します。と言っても、自前で画像を作るのは大変です。そこで、この回転する画像を作成できるサイトを紹介します。 Loader Generator – Ajax lo
クリアボタンみたいなの - Qiita
「IE10はテキストボックスにクリアボタン出るじゃん、あれつけてよ」 って言われたのでそれっぽいの作った まぁ 横に☓ボタン追加しただけですけどね。 $(".clearField").each(function(){ var targrt = $(this); $(this).after( $('<span>', {id : 'clearButton_' + $(this).attr('id') }) .button({ icons : { primary: 'ui-icon-close' }, text : false }) .width(11) .click(function(){ targrt.val(""); }) ); }); clearFieldクラスが入ったフィールドの横にバツボタンを追加し、クリックでクリアします。 ボタン画像にはjQuery UI も使用してます。 適用す
jQueryを使ったhtmlソースからの値取得の指定の仕方 - ITの隊長のブログ
photo by Johannes_wl 超久々の技術記事投稿 最近はダイエットやら、英語勉強やら、読んだ本のレビューとか色々やってしまい、果たしてこのブログはなんのジャンルだったっけ？と疑問にさせてしまう記事ばっかし。技術ブログですよ！ITの技術ブログ！ 技術はまじで久しぶりですね。しかも久々の投稿がjQueryだとは・・・！（特に意味はありませんが） 一応やることはやっているんですけども、、、中々アウトプットできなかっただけですー。OSSのソースリーディングとかしているけど難しくて中々記事がまとまらないんですー。 それはさておき、今後の予定としてはそろそろDockerとか試してみようと思います。あとC++も触りたい触りたい！！ しかし、現実の欲求と実際やってみてからのモチベーションの維持は結構キツイ。わかりやすく言えば、数学が辛いときに勉強のやる気が起こらないのと一緒（わかりやすいかな
jQueryでクリックされたテーブルの行・セルの情報を取得する | Try Lifelog
HTMLテーブルのセルがクリックされた際、クリックされた行の情報をjQueryで得る方法。 例として以下のテーブルを想定し、td要素をクリックすると起動されるイベントハンドラを定義する。 <!-- HTML --> <table id=tblPlanSpot1> <tr> <td>A</td> <td id="a">AA</td> <td>AAA</td> </tr> <tr> <td>B</td> <td>BB</td> <td>BBB</td> </tr> </table> // JavaScript // イベントハンドラ $('#tblPlanSpot1 td').live('click',function(){ var $cur_td = $(this)[0]; // (1):セルのHTML表現 [0]をつける点に留意のこと。 var $cur_tr = $(this).pare
jQueryMobileのデフォルトのスタイルを解除する方法 | 株式会社トライアド TRIAD Ltd.
こんにちわ、毎日暑いですね、MacBookAirが加熱しすぎてキーボードを触っていると火傷しそうでビビってる @nihimoto です。 – 本日はjQueryMobileネタで一つ。 jQueryMobileはお手軽にスマートフォンサイトっぽくしてくれる便利なものですが、デザインのカスタマイズを高度に組み込んでると、強制的に適用してくるスタイルが邪魔になったりしませんか？ しかもスタイルが適用されるクラス名とかがわからないので、解除するのもなかなか厄介なんですよね。 実はあのスタイルは、jQueryMobieのJavascriptをロードした際に、自動的に専用のクラス名を各要素に割り振り、そのクラス名に対してjQueryMobileがスタイルを適用しているので、普通にスタイルシートに書いただけだと、後からスタイル上書きされちゃうんですよね。 今回はこの問題に対処する方法を説明してみたいと
iPhone SafariでCarousel風のUIを実現するjQuery Plugin「jCarousel」作りました - くらげだらけ
iPhone･iPadのWebアプリケーション開発を相変わらず研究しています。 最近のiPhone･iPad Webアプリケーション開発と言えば「Sencha Touch」ですね。リリースされてから何だかんだ言い訳して、ガッツリ勉強することから逃げていますが、まぁそろそろ（本当に）ガッツリ研究していこうと思います。 と、冒頭でSencha Touchの話になりましたが、今回はjQueryのプラグインです。 jQueryのiPhone Webアプリケーション開発と言えば「jQTouch」ですが、Sencha Touchに比べると用意されているUIもイベントなんかも少ないんですよね。HTMLを書き書きするだけでサクサク作れちゃうところはいいのですが、もうちょっとSencha TouchみたいにいろんなUIを使いたいところです。 そこで、jQueryでもCarousel風のUIをサクサクッと作れ
あらゆる面で洗練されているjQueryライブラリ「jQuery TOOLS」｜BLACKFLAG
今まであらゆるjQueryライブラリを見てきましたが、 jQueryを使ってWebページ上で表現できる基本的な動き（タブやアコーディオンや…）の他、 数々のjQuery動作を演出部分の細部までこだわって構成されている「jQuery TOOLS」がすごい。 ≫jQuery TOOLS – The missing UI library for the Web 各機能のデモやプロパティも分かりやすく整理されているので 使用する際には不自由なく組み込めそうです。 サイト自体も洗練されていてデザインが綺麗。 特に最近リリースされたというライブラリではないですが（一年以上前からあるもよう…） そのうち活用出来そうだったのでメモ書き。 ご参考までに。。。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
displayとvisibilityの違い - Qiita
javascript - 切り替え - jQueryのUIタブ-現在選択されているタブのインデックスを取得する方法
jQuery MobileでマークアップHTMLを動的に作成するときに使うメソッドまとめ | infoScoop開発者ブログ
jCarousel.js
Amazon.co.jp: プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート: 矢次悟郎: 本