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
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
どれ使おう？モーダルウィンドウ（Lightbox 風スクリプト）を集めてみました | バシャログ。
この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト leanModal leanModal leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。 ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。 また、イメージギャラリーなどとしては使えないとのことです。 ちょっとした文章を表示するだけの場合などはこれで十分ですね。 そこそこ軽量、そこそこ機能的 Simple Modal Simple
jQuery を使ったイメージギャラリー25コ | バシャログ。
大雨やら地震やら、天災が続きますね。取り急ぎ乾パンを買うべきか悩んでるkimotoです。最近の乾パンはうまいと言うし。 さて今回は、jQuery を使ったイメージギャラリーが25コ紹介されていたので便乗してご紹介。 説明文付きギャラリー Create an Image Rotator with Description (CSS/jQuery) デモページ 右側のサムネイルをクリックすると、説明文と共にイメージが表示されます。 「Hide」ボタンで説明文を隠す事もできます。 自動でスクロールするイメージギャラリー jQuery Image Gallery/News Slider with Caption デモページ 一定時間で、自動で画像がスクロールします。 下部のリンクにより、手動で動かす事もできます。 オンマウスで少し拡大するサムネイル Fancy Thumbnail Hover Eff
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
レキシカル変数を意識した jQuery プログラミング | バシャログ。
こんにちは、ktanakaです。今日はjQueryを利用したら無意識に使っているかもしれないレキシカル変数についてとりあげます。まず、jQueryを利用したコードを示し、それをレキシカル変数を利用したコードに書き直します。 jQuery で click して toggle するコード とりあえず、レキシカル変数とは何か？という話は置いて、 jQuery を利用したコードを示します。 index.html <html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="program.js"></script> </head> <body> <p><input type="button" id="trigger" value
人気の「JavaScript ライブラリの紹介エントリー」 9 選 詰め合わせ | バシャログ。
JavaScript などを駆使したリッチな UI の需要も、ますます高まってきていると思います。 その証拠に、当バシャログでも、その手の記事が人気を集めています。 そこで今回は、そのようなエントリーをまとめてみます。ここ半年ほど物で、全 9 エントリーです。 それではどうぞ。 使いやすい lightbox 系スクリプト by sakai（2008/11/6） lightbox 系のスクリプトはとにかくたくさんありますが、その中でも比較的新し目で使い勝手の良いものをご紹介しています。 Fancy Box → デモ この系統のはどんどん出てきますね。 Sexy LightBox 2 残念ながら、この「sexy-lightbox-2」はこのエントリ執筆現在、サーバに繋がりませんでした。 ヴァーチャルツアーが簡単に作れる jQuery virtual tour by nakayama（2008/
jQueryプラグインでクールなプルダウンメニュー | バシャログ。
お仕事で JavaScript によるプルダウンメニューを実装する必要があり、色々試してみて一番お手軽だったのが「droppy」です。 「droppy」 は jQuery のプラグインです。 パッケージをダウンロードすると色々とファイルが入っていますが、必要なのは src ├ javascripts │ └ jquery.droppy.js └ stylesheets └ droppy.css の 2 ファイルです。 プルダウンメニューの実装は、HTML に以下のコードを貼りつけて CSS を適用すればオッケーです。 ■JavaScript … 外部ファイル化がお勧め <script type='text/javascript'> $(function() { $('#nav').droppy(); }); </script> ■HTML … とてもシンプル <ul id='nav'> <
簡単に画像やコンテンツをスライドできるjQueryプラグイン Easy Image or Content Slider | バシャログ。
Easy Sliderは、エリアを固定したまま左右上下に画像やコンテンツをスライドできるｊQueryプラグインです。 まずは下のデモをご覧ください。 サンプルデモ 設置方法 配布ページよりデータ一式をダウンロードし、easySliderを利用したいhtmlのhead要素などで以下のファイルおよび処理を読み込みます。 <script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="easySlider.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script> 表示する部分は以下で
最近「おぉ～」と思った jQuery | バシャログ。
今回は私が最近「おぉ～！」と思った jQuery のプラグインを紹介したいと思います。 ■s3Slider jQuery plugin http://www.serie3.info/s3slider/ 自動車のサイトなどのトップに使える打ち出し画像を切り替えるプラグイン。 Flashを使わなくてもここまでできるとは… 驚きです。 ■Transformie http://paulbakaus.com/?p=11&language=en IEでボックス要素を 45 度傾けることが出来るプラグイン。対象ブラウザが IE のみなので、使いどころが少々難しいです。 ■SexyLightBox http://www.coders.me/ejemplos/sexy-lightbox/ 表示がセクシーな LightBox。色っぽいっす。 ■apple 風のメニュー作成 http://phpspot.org
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【急募】フロントエンドエンジニア / マークアップエンジニア募集！ | バシャログ。