Bootstrap でオートコンプリート検索付きプルダウンリストを実装するには typeahead.js が便利 - hrendoh's tech memo
Bootstrapで、オートコンプリートで絞り込む検索ボックスを実装しようと思ってプラグインを探したところ typeahead.js がよく使われていそうな感じだったので試してみました。 先に説明用のコード全体を貼りました。 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/typeahead.css"> </head> <body> <div class="container"> <div class="form-group"> <label>Station</label> <input type="text" class="form-control"> </div> </di
Bootstrapを使用するための準備 | 基本 | Bootstrap3の使い方
Home 基本 準備 Bootstrapを使用するための準備 Bootstrapを使用する方法はCDNを利用する方法とサイトからダウンロードして利用する2種類の方法があります。 どちらも共通で最低限cssとjavascriptの2種類の指定が必要になります。 ご自分の用途に合わせて選択してください。 CDNを利用する方法 ダウンロードして利用する方法 CDNを利用する方法 CDNを利用し、アドレスを指定するだけで利用することが可能です。 ※CDN（Content Delivery Network）は、サーバに置かれているデータを読み込むことで利用するのでネットの繋がっていないローカル作業では利用できないので注意してください。 下記リンクのBootstrap CDNサイトに掲載のアドレスを利用することでBootstrapを利用できます。 Bootstrap CDN サイトに訪れると下記画像の
jQueryプラグイン - ページ内にタブメニューを実装 - tabs.js
このプラグインは、指定した要素内に ulタグを使ってタブメニューを作成、メニューに付随するコンテンツはdivで実装します。たったこれだけで、ページ内にタブメニューを実装できます。簡単なのでおすすめです。また、シンプルなデザイン構成になっているので、サイトに合わせたカスタマイズも簡単にできます。 デモのタブメニューをクリックして、その挙動を確認してみてください。 「tabs.js」のデモ ソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>tabs.js - jQueryプラグインまとめのカルマ</title> <script src='https://code.jquery.com/jquery.min.js'></script> <script src='jquery.tabs.j
誰でも出来る！プラグインを使わずにjQueryで実装するタブ切り替え機能！
こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし
jQueryとCSSでシンプルなタブ切り替え - Qiita
条件 ・カレント表示もできるタブ切り替え ・なるべくシンプルな記述 ・html構造や装飾が変わっても使いまわせる HTML <div class="ChangeElem_Btn_Content"> <button class="ChangeElem_Btn">1番目のタブ</button> <button class="ChangeElem_Btn">2番目のタブ</button> <button class="ChangeElem_Btn">3番目のタブ</button> </div> <ul> <li class="ChangeElem_Panel">1番目のコンテンツ</li> <li class="ChangeElem_Panel">2番目のコンテンツ</li> <li class="ChangeElem_Panel">3番目のコンテンツ3</li> </ul> [補足] ・タブに
【jQuery】タブ機能付きスライダーの実装方法 | カタチップ
公開日：2016年02月02日最終更新日：2018年06月30日 【jQuery】タブ機能付きスライダーの実装方法 情報量が多いサイトだとよく使用される「タブ切り替え」のスクリプト。 実務ではシステムが組み入れてある「旅行予約サイト」や「不動産サイト」などでよく使います。 過去には特殊なケースで「タブの機能とスライダーを組み合わせた機能がほしい」という要望を受けたことがありました。 今回はその「タブスライダー」を実装する方法について解説していきたいと思います。 タブ機能付きスライダーの実装方法 「Qiita」でタブ機能付きスライダーのjQueyプラグインを作成し、公開されていた方がいらっしゃたので参考にさせていただきました。 http://qiita.com/kamem/items/bb11e8b8027b7b5c44be http://qiita.com/kamem/items/94e9
jQueryのajax()を中断する方法
jQueryのajax()を中断する方法を紹介します。 １．問題点 次のように、ajax()メソッドでHTMLを取得するコードがあります。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('#execute').click(function(){ $.ajax({ url: "http://user-domain/foo.cgi", type: "GET", dataType: 'html', }) .done(function( data ) { $('#foo').html(data); }) .fail(function( data ) { // ... }); }); }); </script> <input type="button" id="exec
【Labs】maxlength属性とjQueryでtextareaの入力文字数を制限する
こんにちは（・∀・） 今回はHTML5のmaxlength属性とjQueryを使ってtextareaの入力文字数を制限をしてみたいと思います。 入力制限はmaxlengthだけで済むのですが、それプラスjQueryで入力文字数をカウントして今何文字入力しているのかわかるように表示します。 入力制限文字数の近くで数字の色も変更してみます。 残り数のカウント部分はSafari未対応です。 jQueryで入力文字数をカウントして、maxlengthで入力文字数を制限する。 HTML <p>10文字まで入力できます。<span id="txtlmt">0</span></p> <textarea class="demo" maxlength="10" ></textarea> JavaScript $(function () { $("textarea").keyup(function(){ va
[jQuery] 要素の属性を一度に設定する – コピペで使える JavaScript逆引きリファレンス
属性を一度に設定するサンプルです。 サンプルソース 例）ボタンを押すと、id="txt1"要素をボタンに変える <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function(){ $('#btn1').click(function(e){ $('#txt1').attr({ type : 'button', name : 'btn2', value : '変化！' }); }) }); </script> </head> <body> <input type="button" id="btn1" value="ボタン
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でテーブル（table）を操作する小回り系コード5種
Posted: 2011.08.31 / Category: javascript / Tag: jQuery テーブルを操作するのに大掛かりなことはプラグインがいろいろありますのでそちらを使うとして。 ここでは、わりと細かいことをjQueryでやってみます。 html 始めに操作するべきテーブルを用意します。 ごくごく普通のテーブルですね。 html <table class="table01"> <tr> <th>商品名</th> <th>入荷日</th> <th>価格</th> </tr> <tr> <td>椅子</td> <td>2011-08-01</td> <td>¥ 2,800</td> </tr> <tr> <td>机</td> <td>2011-08-08</td> <td>¥ 6,800</td> </tr> <tr> <td>本棚</td> <td>2
【javascript,jQuery】イテレーションまとめ - Qiita
※あまり整理できてないのでこんなのあるよってあれば教えてほしい。 jQueryのループ $(”セレクタ”).each(callback) 各オブジェクトに対して処理を行う。 jQueryオブジェクトに対してはこれがおすすめ。 コールバック関数が false を戻すと、ループ処理を停止する。 コールバック関数が true を戻すと、以降の処理をスキップし、次のループを実行する。 パラメータ callback(index,dom) 各オブジェクトに対する処理を記述する。 index：0始まりのインデックス dom：対象のdom。コンテキスト内のthisと同じ。jQueryオブジェクトではないので、$()することでjQueryオブジェクトとして扱える。 例 $("li").each(function(index, dom){ $(dom).toggleClass("example").text(
jQuery でセレクトボックスのプルダウン項目（option 要素）を追加／削除する方法
フォームオブジェクトの中でも、セレクトボックスの操作は少し特殊です。記述方法を覚えてしまえば問題ないのですが、同じようなミスをして調べる機会が多いのもセレクトボックスの特徴ではないでしょうか。 jQuery を使えば、様々な需要に合った操作ができるようになります。ここではプルダウン項目の追加・削除について触れますが、基本となるセレクトボックス操作の知識は必要不可欠なので、ぜひ次の記事も一緒に確認していただければと思います。
jQueryでクリックされたid値をとる - わらうぃのええおこた
わりとしょうもないけど忘れちゃうのでメモ <button class="btn" id="btn1">ボタン1</button> <button class="btn" id="btn2">ボタン2</button> $('.btn').on('click', function(){ var id = $(this).attr("id"); alert(id); }); これでクリックされた方のidを取得できる .attr()の中を変えるとid以外も取得できる
IE11がHTML5カレンダー入力に未対応なので、jQueryのdatepickerを使ってみた。 | メサイア・ワークス
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" /> <s
vim-ref-jquery（オフラインで読めるよ） - soh335 memo
jquery のドキュメントをオフラインでみてるときに、いいかんじにみれるツールってなにがあるかな。端末からみれて、オフラインでみれるのがいい。 2011-01-18 16:10:32 via Echofon GitHub Pages · File Not Found · GitHub だとオンラインでしか読めないのでオフラインでひけるのを作りました。 https://github.com/soh335/vim-ref-jquery です。ちょっとまだ僕以外の環境でNO検証なのとNO doc（書いた）なのと、no syntaxです（誰か書いて）。（ref-phpmanualを勢いで書き換えたのでおかしいところあるかも） 使い方は http://jqapi.com/ からHTML版のドキュメントを持ってきてg:ref_jquery_path に $HOME . '/Downloads/jqa
vimのおすすめプラグイン(12)「ref-sources.vim」 – KYO's Tech
英和辞典、CPAN、jqueryリファレンス、wikipediaなどがvim上から見れるプラグイン。 元々は個別のプラグインだったものをどうやらマージされた様子。 【インストール】 pathogen.vimを利用中なので、以下のコマンドでインストールします $ cd ~/.vim $ git submodule add git://github.com/mojako/ref-sources.vim.git bundle/ref-sources.vim.git 【jQAPIをダウンロード】 以下の手順でjQAPIをダウンロードします $ mkdir -p ~/public_html/repos/manual/jquery $ cd ~/public_html/repos/manual/jquery $ wget http://jqapi.com/jqapi-latest.zip $ unzi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[javascript] ユーザーが入力を停止するまで.keyup（）ハンドラーを遅延させる方法 [jquery] | CODE Q&A 問題解決 [日本語]
".on()"での"hover"の記述でつまずいたので - SEEDS Creator's Blog
Object.values() in jQuery