Railsでtypeahead.jsを使ったオートコンプリート機能（入力補完機能）の実装手順
はじめに Railsアプリ内の入力フォームでユーザの入力に合わせた候補を表示するオートコンプリート機能をTwitter社が提供しているtypeahead.jsを使って実装したのでその手順をメモしておきます。 やりたいこと 以下のgifのように、ユーザがフォームで入力を行った時に、その入力内容に合わせた候補を自動で表示するというオートコンプリート機能を実装します。以下のようにNameのテキストフィールドではNameの候補を表示し、EmailのテキストフィールドではEmailの候補を表示できるようにします。なお、以下の例では新規ユーザ作成フォームでの名前とE-mailの入力に対してオートコンプリート機能を実装した例になりますが、これ自体は実用上はなんの意味もないです。 このような機能をお手軽に実装するのにtypeahead.jsというライブラリをTwitter社が提供しているので、これを使いま
jQueryでの連番要素を制御する方法｜BLACKFLAG
jQueryでID名など連番になっている要素を制御するSCRIPTが なんとなく出来たのでメモ書き程度に紹介してみます。 ページ内にリンク要素が複数あり、 そのリンクと連携する形での要素（BOX要素や画像など）を 表示／非表示制御する方法。 始めにHTMLソースから。 <div id="connect"> <a href="javascript:void(0);">≫PHOTO【1】 SHOW</a> <a href="javascript:void(0);">≫PHOTO【2】 SHOW</a> <a href="javascript:void(0);">≫PHOTO【3】 SHOW</a> <a href="javascript:void(0);">≫PHOTO【4】 SHOW</a> <a href="javascript:void(0);">≫PHOTO【5】 SHOW</a> <
ときどきWEB | 『jQueryで簡単アコーディオン作ってやんよ!!』
スマホサイトなどでよくある開閉式のアコーディオンをjQueryと少しのJavaScript記述で作りたいと思います。 ベーシックな開閉アコーデイオン jQueryの設定 jQueryライブラリを使用するのでCDNの記述を忘れずに！ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> HTMLの記述 <dl> <dt class="accordion">ときどきＷＥＢ</dt> <dd> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Android</li> </ul> </dd> </dl> dl要素をアコーディオンの入れ子としアコーディオン全体のボックスを作成。 引き
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
表示コンテンツの切り替えも出来るシンプルなモーダルウィンドウを実現するjQueryのスクリプト | Web Mugen
シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img内のtitleからキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。 軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。 シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。（※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。） 表示コンテンツの切り替えができること。コレが本命。とっても
jQueryを使ったスライダーの作り方とその仕組み
Webサイトでは必ずと言っていいほどよく見かけるスライダーUIですが、どういった仕組みで動いているか知っていますか？ いまや便利で高機能なjQueryプラグインがたくさんあるため、わざわざイチから作る機会は少ないと思います。しかし、仕組みを知っておけばプラグインで対応できない場合に作ることができますし、プラグインをカスタマイズして実装することもできるようになります。 自分で作ることができるようになると仕様をプラグインに縛られることがなくなるため、わがままな要求にも応えられるようになります。なにより自分で作って動いてるものを見ると楽しいこと間違いなしです。 そういったものでバグが見つかったときの焦り具合も尋常じゃありませんが。 ということで、スライダーの作り方と仕組みを初心者向けに解説していきたいと思います。 （ここでいう初心者とはHTML・CSS・jQueryの基本がわかる程度です） ※I
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいですよね～。そこで実装してみました。 スクリプト <script type="text/javascript" src="jquery.min.js"></script> <div id="div802">3.25</div> <input id="div802-edit" name="div802" style="display:none;"></input> <script type="text/javascript"> $('#div802').click(function() { $('#div802').css( 'display', 'none'); $('#div802-edit')
uu59のメモ | RailsとJS(vue.js)の連携
前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基本原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
jQuery リファレンス：toggle
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
こんなことありませんか？ フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか？ そんな時、押した項目によってその後の内容を変化させれば 項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。 JavaScriptはかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ！ サンプルソース(ラジオボタン) HTML <form> <table border="0" cellspacing="0" cellpad
Rails 4で作るドラッグアンドドロップで表示順を変更できるサンプルアプリ(スクリーンキャスト付き) - Qiita
はじめに データの並び順を自由自在に入れ替えたい、という要求があったとき、ドラッグアンドドロップで順番が変えられるとなかなか便利です。 そこで本記事ではドラッグアンドドロップによる表示順変更機能をRails 4で実装する手順を説明します。 補足資料 理解しやすくするための補足資料をいろいろ用意してみました。 デモサイト Herokuにデモサイトを作ってみました。 元々のサンプルアプリケーションはCRUDができるようになっていますが、このデモサイトではデータの更新はできません。(変更できるのは順番のみ) ドラッグアンドドロップするとどうなるか、実際に動かしてみてください。 スクリーンキャスト サンプルアプリケーションを作る過程を録画してみました。 フルスクラッチでrails newするところから始めています。 http://www.youtube.com/watch?v=YQ-6HkBhVy
グリッドレイアウトを簡単に行うJavaScript！Masonry.js
グリッドレイアウトをMasonry.jsを使って実施してみました。 高さの違うアイテムを自動的に再配置して、グリッドレイアウトしてくるJavaScriptライブラリです。 また、スマートフォンデバイス、タブレットデバイスなどにも自動でレイアウトが行われるので非常に配置がしやすいです。 BootsStrapで組み合わせると非常に早く、高機能なレイアウトが作成できます。 Masonryのどのあたりが便利なのかに重点をおいて説明してみました。 Webページでのスライドは以下になります。 http://ticklecode.com/present/140309_jscafe_Masonry/
【jQuery】チェックボックスを「全て選択」ボタンの設置方法 ｜ KLUTCHE
複数のチェックボックスを一度に全選択・全解除できるボタンを設置する方法です。 チェックボックスのグループが複数ある場合にも対応しています。 デモ デモ Javascript jQuery 依存のスクリプトなので、まず jQuery を読み込んでおきます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その下に以下のスクリプトを記載します。 <script type="text/javascript"> $(function(){ $('.checkAll').on('change', function() { $('.' + this.id).prop('checked', this.checked); }); })
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
https://qiita.com/tokomakoma123/items/1d67e22a1620f7f046ab