Web Storage と jQuery UI でサジェスト機能を実装する | バシャログ。
どうもfujiharaです。ナツイですね～？ 神奈川の宇多田世代ならこの言葉知っていると思うんですが、いかがでしょうか？ 今回はWeb Storageと jQuery UIでサジェスト機能を実装していきます。 機能概要 機能の概要を説明します。ユーザが過去に入力した文字をフォームに入力した際に同じものをサジェストとして提供するようにします。 実装方法 まずサジェスト機能はjquery UIのサジェスト機能を使用します。 Autocomplete こちらはサジェストするワードを配列で渡すだけでサジェスト機能を提供してくれる優れものです。 そして渡すワード配列を保存しておくのがWeb Storage になります。 処理内容は以下が考えられると思います。 ①ページ読込時に保存されてる検索ワード配列を読み込む。 ②読み込んだ検索ワード配列をAutocompleteに渡す。 ③ユーザが文字を入力し、
フォーム select を装飾する前準備 | バシャログ。
どうもfujiharaです。 ついにこの季節がやってまいりました。3月に社内のロッカーに置きっぱなしにしていたダウンを持って帰る日が！ ってことで無駄話はさておき本日はセレクトボックスを装飾する前準備を 紹介したいと思います。 概要 本日は select を装飾する前準備を紹介します。 なぜ前準備 ？ かと申しますと私が出来るのは <select> を <ul>として 見せるまでの js 処理までだからです。(汗) 実装 では早速実装に入っていきます。 まずはHTMLからです。 <div class="wrapper"> <select name="test"> <option value="first">first</option> <option value="second">second</option> <option value="third">third</option> <o
jQuery Migrate pluginを使ってみる。 | バシャログ。
痩せないとコートが入らないことに気づいたfukasawaです。こんにちは。 冬が来る前に痩せないと凍死してしまいます。 jQuery Migrate pluginは、jQueryのバージョン差異によって発生する問題を解決する為のjQueryプラグインです。「jQueryのバージョンを上げたら動かなくなった…！」という場合に修正箇所を教えてくれたり、廃止されたAPIを復元して動くようにしてくれたりします。 個人的に使った事が無かったので、使い方について簡単に調べてみました。 jQuery Migrate できること ① 廃止されたAPIを使おうとしたり、挙動が変わった機能を使おうとした際に、ブラウザのコンソールに警告を出力する 開発版（Development version）のjQuery Migrateを使用する jQueryのversion 1.6.4以降を使用していること ② 廃止され
[jQuery]要素の高さ・幅を取得する | バシャログ。
iPhone5sはどうせすぐには手に入らなくてもよいとおもいゴールドを予約したtanakaです。 今日はjQueryでブラウザに表示されている要素の高さや幅を取得する方法についてまとめます。 …といってもjQueryユーザーであれば$(...).height(), $(...).width() でOKってことはご存じかと思います。 それも紹介しますが、それ以外の方法についてもまとめます。 $(...).height(), $(...).width()について DOM要素の高さ、幅を取得するメソッドです。弊社ウェブサイトのホームにある以下の要素で値を取得してみます。 $('div.info:first').height() // => 120 $('div.info:first').width() // => 200 上記のような感じで取得できます。ChromeのDeveloper Tool
ノブ型のUIを実現するjQueryプラグイン「jQuery Knob」 | バシャログ。
fukasawaです。こんにちは。先週の土曜、スカイツリーに遊びに行ったのですが、浅草で乗り換える際サンバカーニバルに巻き込まれました。歩道は人で埋め尽くされ、信号一つ渡るだけで15分もかかってしまいました。まさかあんなに混雑しているとは…サンバ恐るべし。 さて、今回はjQuery Knobについてです。jQuery Knobを使用することで円形のダイアルをぐりんぐりん回して数値設定を行うUIコンポーネントを実現できます。 以前から少し気になっていたのですが、個人的に触ってみたかったのでここで書いてみようかと。 jQuery Knob 簡単な使い方 1. jQueryとjquery.knob.jsを読み込みます。 <script src="js/jquery-1.10.2.min.js"></script> <script src="js/jquery.knob.js"></script>
【jQuery】わずか2KBの軽量モーダルプラグイン leanModal.js | バシャログ。
昨日、娘と「ドキドキ プリキュア ミュージカル」を見に行ってきました ishida です。 アニメのエンディングテーマをかなりの回数踊っていたので、僕の踊れるようになったかも！？ さて、今回は jQuery モーダルプラグインのご紹介です。 これまで、モーダルウィンドウの実装は Colorbox でいいんじゃね？と思ってましたが、 モーダル内の要素が、ajax や iframe ではなくて ページ内にて非表示にしているパータンの場合には 以下のライブラリのほうがいいかも。 かなりざっくりですが、サンプルデモはこちら HTML/JS HTML/JSのコードは、以下です。 <h1>leadModal.js test</h1> <p><a href="#test" rel="leanModal">モーダル表示</a></p> <div id="test" class="modal"> <p>Lo
jQueryのセレクタを試せるChrome拡張機能 | バシャログ。
進撃の巨人の新刊が今週発売になりますね。fukasawaです。こんにちは。 今回はChromeの拡張機能「jQuery Debugger」のご紹介です。この拡張機能を使うことで何ができるかというと、jQueryのセレクタを簡単に試すことができます。 jQueryのセレクタを登録し、選択すると… そのセレクタで拾える要素がハイライトされる といった感じです。 インストール Chromeから下記のURLにアクセスし、[+CROMEに追加]をクリックしてインストールします。 jQuery Debugger 使い方 1. セレクタを試したいページにアクセスし、[F12]キーを押してDeveloper Toolsを起動します。 2. 右端の方に[jQuery Selector Inspector]が表示されているのでそれをクリック 3. テキストボックスに試したいセレクタを入力し、[ + ]ボタンク
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
Vim で javascript 書くためにやってる設定 | バシャログ。
杉の木を伐採しまくるバイトを始める夢を見ました・・・。みなさん、こんにちは nakamura です。 前回 Vim で PHP 開発するための設定 を書きましたが、今回は Vim で javascript を書くための設定をいくつかご紹介しようと思います。（基本は前回 PHP 用に行った設定の javascript 版です） 関数名などの自動補完 PHP と同様に辞書ファイルを用意して neocomplecache で補完するだけです。辞書ファイルは以下からjavascript.dict と jQuery.dict を拝借して $HOME/.vim/dict/ に置きました。 config/vim/dict at master · guileen/config · GitHub （ただちょっと古いんだよな～・・・。自動生成するスクリプト軽く書こうかな・・・。） .vimrc autocmd
[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。
最近目がかゆくてやたらとクシャミが出るんですけど、PM2.5 ってホント迷惑ですね～。みなさん、こんにちは nakamura です。 最近ちょっとおぉ！と思った jQuery プラグインがあったので今日はそのご紹介です。Ajax を使った非同期な処理も今やすっかり定番ですが、毎回メンドクサイな～と思うのがローディングアイコン。アニメーション Gif を用意して、どこで呼び出しても見栄えがするように CSS 調整して・・・。あーもうしゃらくせえ！と思っていたら、その辺全部勝手にやってくれる jQuery プラグインがあったんですね～。 NETEYE Activity Indicator っていうプラグインがそれです。github で公開されてます。 NETEYE Activity Indicator jquery-plugins/activity-indicator at master ·
[PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。
iOS6 のマップって不便って騒がれたけど、それほどでもないよね？…って思ってましたが、最近お店探しで使って全然見つからなかったので、さすがにこれは…と思いMapion インストールしました。使いやすいですね… 今日は、だらしない明らかに非効率なjQueryなコードを書くとやんわりと指摘してくれるPhpStorm/WebStormの機能「Inspection: jQuery usage efficiency 」を紹介します。(バージョン5.0以降) New JavaScript inspections and intentions | WebStorm & PhpStorm Blog 非効率なjQueryのコード っていったいどんなコードなのか。具体的には以下のようなコードです。 $("p").addClass('hover'); $("p").toggle(); 実際にはこんなコードを書
![[PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b62b4e0fd4ed08a00e42d880ceb27ae1f776b93/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fws_ps01.jpg)
jQuery Zoom で画像の拡大機能を実装する | バシャログ。
チャットモンチーの新作早く聴きたーい！みなさん、こんにちは nakamura です。 よくウェブカタログ等で画像の拡大表示機能を見掛けますが、とあるプロジェクトで似たような要件を満たす必要がありました。ただし FLASH は NG。ということで JS ベースのものを探していた所、中々シンプルで使いやすいプラグインがあったので今回紹介してみたいと思います。 jQuery Zoom プロジェクトページはこちら。Jack Moore さんって Colorbox とかも作ってる人なんですね～。いつもお世話になってます！ 使い方 とりあえずダウンロードして適当な場所に展開しましょう。ソースコードは Github で公開されているので、以下からどうぞ。 jackmoore/zoom 一緒にくっついてくる demo.html やプロジェクトページを見ればだいたいの使い方は分かると思いますが、最低限必要な
どれ使おう？モーダルウィンドウ（Lightbox 風スクリプト）を集めてみました | バシャログ。
この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト leanModal leanModal leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。 ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。 また、イメージギャラリーなどとしては使えないとのことです。 ちょっとした文章を表示するだけの場合などはこれで十分ですね。 そこそこ軽量、そこそこ機能的 Simple Modal Simple
jQuery Star Rating Plugin で iTunes 風のレイティングを実装する | バシャログ。
雪が降ってるってマジですか？nakamura です。 そうしょっちゅうはないと思いますが、ユーザに何かしらの評価をさせるシステムってあると思います。UI の選択肢も様々ですが、今日はそんな中から iTunes っぽい星アイコンでレイティングの機能を実現する jQuery Star Rating Plugin をご紹介します。 ダウンロード ダウンロードはこちらから。Download のタブから star-rating.zip を落としてきてください。 jQuery Star Rating Plugin 設置 落としてきた zip を解凍するとたくさんファイルが出てきますが、必要なのは以下の 4 つです。 jquery.rating.js jquery.rating.css delete.gif star.gif また別途 jQuery の本体が必要です。star-rating.zip に付
jQueryを使ってiframe要素の中身にアクセスする | バシャログ。
残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。 今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。 jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか？正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。 [追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。 iframe内のドキュメントにアクセスするにはcontents() $(...).
jQuery Countdown を使ってカウントダウンタイマーを表示する | バシャログ。
ハッピーバースデートゥーミー！今日が誕生日のinoueです。 さて、診断テストのような入力フォームを表示する場合、時間制限を設けたい場合があります。 そういったページに「あと〇〇分」というカウントダウン表示を簡単に追加できるjQueryプラグイン 『jQuery Countdown』を今回紹介します。 概要 jQuery Countdown 使い方は上記のサイトのトップページを見ればすぐわかります、というくらい非常に簡単かつオプションも豊富。 多言語対応もすでにされています。 例えば、id:timeCount の要素に liftoffTime までの残り時間を 時分秒（=HMS）で表示したい場合は次のように記述します。 $('#timeCount').countdown({until: liftoffTime, format: 'HMS'}); サンプル：今から20分後までのカウントダウン
[作って学ぶ！jQuery] 第6回 プラグインを作ってみよう! | バシャログ。
ゴールデンウィークはお台場でリアル脱出ゲームに参加して脱出できなかったminamiです。 jQuery連載も最終回、最後はプラグインを作ってみましょう！ プラグインとは？ jQueryのプラグインとは、 jQuery本体と併せて使うライブラリのことです。 様々な拡張機能を手軽に使うことが出来ます。 例えば以下のページにも多数のjQueryプラグインが登録されています。 自分で作ったプラグインを公開することもできます。 http://plugins.jquery.com/ プラグインの使い方 プラグインを使うために必要なのは以下の手順です。 1.jQuery本体を読み込む 2.プラグインを読み込む 3.プラグインを実行する 拍子抜けするくらい簡単ですね!ソース上では以下のような記述になります。 <!-- 1.jQuery本体を読み込む --> <script type="text/javas
[作って学ぶ！jQuery] 第3回 画像ロールオーバーを作って学ぶ | バシャログ。
Webサイト制作において、クリックできる部品にマウスポインタを乗せたときなどに、表示を切り替えるエフェクトを「ロールオーバー」と呼びます。バシャログの左サイドバーの「ホーム」「はじめての方へ」にマウスをのせるとハイライトしますが、これもロールオーバーです。今回はjQueryを使ったロールオーバーの実装を解説いたします。 デモ 今回作成したロールオーバーは次のようなものです。 ロールオーバー サンプル HTMLソース <ul id="first" class="nav clearfix"> <li><a href="/"><img src="img/btn_home.gif" alt="HOME" width="160" height="40" /></a></li> <li><a href="#"><img src="img/btn_news.gif" alt="HOME" width="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【急募】フロントエンドエンジニア / マークアップエンジニア募集！ | バシャログ。
吹き出し型のツールチップ「grumble.js」を使用してWebサイトツアーを実装するjQueryプラグイン「Crumble」 | バシャログ。