Googleのサジェストをコピペで実装する - 気になるガジェット
jQuery UIのAutocompleteを使う HTML 説明 実行結果 初期状態 入力結果 動作確認 参考サイト jQuery Pocket Reference: Read Less, Learn Moreposted with amazlet at 17.01.16O'Reilly Media (2010-12-09) Amazon.co.jpで詳細を見る jQuery UIのAutocompleteを使う Googleのサジェスト入力って、どういう仕組なんだろうって調べてたら、jQuery UIのAutocompleteを使えば結構簡単に実装できることがわかりました。 ついでなので、Google検索のサジェスト自体を使うことができないか調べたら、基本的に「jQueryでAmazon_Googleのsuggest機能を実装する - タツノオトシゴの日記」で書かれている通り実装したら
jQuery Bootgrid - jQueryでBootstrapのテーブルをパワーアップ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました テーブル（グリッド）は多くのシステムの中で使われます。そのため、利用者からは多くの要望が寄せられるポイントでもあります。場合によってはExcelのような表計算並の機能を求められることもあるでしょう。 そんな機能を一つ一つ作り込んでいたら幾ら時間があっても足りません。そこで使ってみたいのがjQuery Bootgridです。 jQuery Bootgridの使い方 jQueryを実行するだけで普通のテーブルがここまで変化します。 検索を使ってリアルタイムにフィルタリングしたり、ページネーション（件数は変更可能）があります。 カラムは表示、非表示が切り替えられます。 アイコンを表示して別な機能と連携させたり、リンク表示も行えます。 jQuery BootgridはHTMLで書かれたテー
jQuery + Flux という選択肢 - peroli Developer's Blog
2016 - 05 - 27 jQuery + Flux という選択肢 JavaScript Front-End こんにちは、 SKAhack です。普段はMERYのWebフロントエンドを主に書いています。 今回はMERYのフロントエンドで採用している jQuery + Flux という構成を紹介してみたいと思います。 なぜReactではなく jQuery か 普通はReact + Fluxで語られることが多いですが、MERYでは JavaScript の ソースコード の大半が jQuery に依存しており、簡単には jQuery を捨てられない状態です。 また、Viewの変更をする２つのライブラリを 共存 させるのも良くないですし、MERYのサービス特性上、現時点で1画面を頻繁に書き換えるような処理は少ないこと、ReactがサポートしていないIE8など古いブラウザもサポートしているとい
jQuery Snippets #5 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第5弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 YouTubeをクリック後に読み込み・再生させる #1 YouTubeの動画をページ内に埋め込む際、当然ですが沢山の動画を埋め込むとページの読み込みが非常に遅くなります。 下記はそのような場合に使えるもので、まずページ読み込み時にはYouTube動画（iframe）をそれぞれイメージに置き換える処理を行い、再生したい動画を表すイメージをクリックすると動画を読み込んで更に再生させるといったものなります。 <div class="youtube"> <iframe width="6
最近５〜６年分の人気のある jQueryプラグインを，年別に全て把握するまとめ。定番プラグインの日本語解説付きページへのリンク集 - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ さいきん５〜６年で人気のある jQueryプラグインを， 年ごとに全て把握するためのまとめ。 毎年，「今年のお勧めプラグイン」が ランキング記事として幾つか発表される。 それらの記事へのリンク集。 目を通しておくだけで，最新のjQuery事情が把握できるし， Webデザインの引き出しを増やせる。 ２０１５年 ２０１４年 ２０１３年 ２０１２年 ２０１１年 ２０１０年 ※↑ もくじジェネレータ で自動生成 ２０１５年 [jQuery]WEB制作でよく使うjQueryプラグイン [2015年版] | EMiAC-Works http://emiac-works.com/coding/jquery/... 2015/04/16 WEB制作でよく使うjQueryプラグインをご紹介。色々使ってきた中で今のものに落ちついてきた。定番と呼ばれるものが多い ス
jQueryの.offset() を使うとiPhoneやiPadでずれるバグを解消したい - ハリーかつき・旧技術ブログ
jQueryの.offset() を使うと正確なロケーションが取得できないケースがあるようです。 その場合はネイティブなJavaScriptの.offsetを使うと解消され、正しい挙動となります 改善前 $('.anc').click(function(e){ e.preventDefault(); var offset = $('#targetId01').offset(); var y = offset.top; scrollTo(0,y); }); }); 改善後 $('.anc').click(function(e){ e.preventDefault(); var y = document.getElementById('targetId01').offsetTop; scrollTo(0,y); }); });
jQuery逆引きリファレンス - ＠IT
children([exp])、next([exp])、nextAll([exp])、parent([exp])、parents([exp])、prev([exp])、prevAll([exp])、siblings([exp])
Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」:phpspot開発日誌
PrettyEmbed.js Demo - CodePen Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」。 通常埋め込むと動画コントローラーやラベルが表示されて便利なんですが、どうしてもYoutube埋め込んだ感が凄くなりますね。 そこで、PrettyEmbedを使えば次のように。せっかくデザインしたサイトもYoutube埋め込みでかっこわるくならないようにできますね 関連エントリ Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 流行りのYoutube風ローディングバー実装jQueryプラグイン YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
doyleairence.com - Articoli, Linee Guida Per L'Acquisto Di Gadget, Elenchi Tecnici.
Utilizzare una VPN per accedere al telefono di chiamata Gmail al di fuori degli Stati Uniti [Suggerimento rapido] Scopri come accedere a Gmail Call Phone al di fuori degli Stati Uniti utilizzando un client VPN. Come scaricare foto e file da Google Drive su iPhone È abbastanza facile salvare i file di Google Drive su iPhone. Continua a leggere per imparare a scaricare foto e file da Google Drive su
スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」:phpspot開発日誌
ScrollIt.js by @ChrisPolis スライドショーのようなページが作れるjQueryプラグイン「ScrollIt.js」 ↑↓キーでページがスクロールし、かつナビゲーションメニューも備えたようなページが作れます 何らかの製品等の紹介サイトを１ページでサクっと作りたい場合に使いやすく、分かりやすいページが作れて便利かも ページごとダイナミックに切り替わるあたりもクールでモダン。 関連エントリ 縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」 アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」 スクロール
画像を綺麗に整列させるjQueryプラグイン「CollagePlus」 – bl6.jp
画像を綺麗に整列させる便利なjQueryプラグイン「CollagePlus」がよかったのでメモがてらご紹介します。イメージギャラリーとかに使ってみたいですね。実際のデモはレスポンシブにもなっていてブラウザ幅に合わせて可変していきます。オプションで自分の好きなエフェクトも選べるのもいいですね。 [ads_center] 使い方 こんな感じで綺麗に整列させることができます。マウスオーバーするとキャプションも表示されます。 使い方もとてもシンプルですね。 // マークアップ <div class="Collage"> <img src="example1.jpg" /> <img src="example2.jpg" /> <img src="example3.jpg" /> </div> // プラグインをセット $('.Collage').collagePlus(); 最初に表示される時のエ
郵便番号から住所を補完するjQueryプラグインを作ってみた · けんごのお屋敷
郵便番号から住所を自動的に補完してくれる JavaScript のライブラリに AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版) がありますが、それを jQuery のプラグインとして実装したものを作ってみました。 jquery.ajaxzip2 通常版と、スペースや改行などが圧縮された minify 版があります。使い方はリンク先の github に書いてあるので参考にしてください。 また jquery.ajaxzip2 を実装するにあたって、さらに使いやすくするために従来の AjaxZip2 を少し拡張しました。 拡張機能 次のような機能を新たに追加しています。 住所補完後の動作をコールバック関数で指定可能 郵便番号から住所を補完する際に JSON 形式の住所データを非同期に取得しにいきますが、それが完了した後に呼び出されるコールバック関数を指定できる
How to Make a Digital Clock with jQuery and CSS3
It all started last week when I saw this pretty dribbble shot. I immediately felt the urge to convert it into a working clock and share it with Tutorialzine's readers. If you'd like to learn how I made it, read on! Update: The second part of this tutorial is now live! There we are adding support for setting alarms with HTML5 audio. Read it here. The Markup The clock doesn't need a lot of HTML. Thi
[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js
画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。 他のスクリプト（Masonry, Isotopeなど）グリッドのレイアウトを使う時に生まれる隙間や端にも穴がない状態でレイアウトすることが可能です。 類似スクリプトで生じる隙間も埋めます。 比率 全てのエレメントのベースとなる比率を設定 サイズ グリッドに応じたサイズを設定 カラム 複数のブレイクポイントごとにカラムを設定 フィルター 空白スペースを埋めるための要素を設定 ガター エレメント間の溝を設定 Mason.jsのデモ ページには
[JS]機能も充実、設置も簡単、デザインも素敵！モーダルウインドウを実装する超軽量のスクリプト -Pop Easy
Google Maps Pop Easyの使い方 使い方は非常にシンプルです。 Step 1: 外部ファイル スクリプトを</body>の上あたりに、外部ファイルとして記述します。 <script type='text/javascript' src='js/jquery.modal.js'></script> <script type='text/javascript' src='js/site.js'></script> Step 2: HTML 最低限必要なHTMLの構造は、こんな感じです。 L.1がトリガー、L.2がオーバーレイ用の空div、L3-6がモーダル内のコンテンツです。 <a class="modalLink" href="#">Click Me</a> <div class="overlay"></div> <div class="modal"> <a href="#"
Brilliant Free jQuery Image Gallery/Slider Plugins
40+ Brilliant Free jQuery Image Gallery/Slider Plugins + 14 Tutorials jQuery image galleries (also known as homepage sliders, slideshows or image carousels) have become more and more common on websites since the inception of jQuery in 2006. Designers and Photographers are especially attracted to them because they allow you to present many beautiful images in an interesting way. You can easily load
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作で分からないことはすぐに確認！HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
ノンプログラマーによる冗長だけどわかりやすいjQueryリキッドレイアウト③ - スタジオ・アルカナ技術ブログ