jQuery版のLightBox「ThickBox」
jQuery版のLightBox「ThickBox」 ThickBoxはLightBoxのjQuery版とも言えるJavaScriptライブラリで、画像をクリックするこのにより拡大画像を表示させることが可能です。 LightBoxがprototype.jsをベースに開発されたjsライブラリであるのに対して、ThickBoxはjQueryをベースに開発されています。 設置方法 配布ページよりjquery.jsとloadingAnimation.gif、thickbox.css、thickbox.jsというファイルをダウンロードし、ThickBoxを利用したいhtmlのhead要素などでそれらのファイルを読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"
今日から現場で使えるjQueryのフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
Eric Martin » SimpleModal
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development. Usage SimpleModal provides 2 simple ways to invoke a modal dialog. As a chained jQuery funct
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」:phpspot開発日誌
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 １個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 １個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま
ありそうでなかった？要素をふわっと表示させるjQueryプラグイン whatInOut :: 5509
Windows7のウィンドウのようにふわっと表示・非表示させることができます。ふわっとと、whatをかけ･･･（ｒｙ 色々な環境で試せてないので、バグというか予期しない動きは多いかもしれないです。twitterかコメントで報告もらえれば対応できる範囲で対応します。 ふわっとするためだけにeasingが必要になるいけてない仕様なんですけど、easingを別のところでも使ってカバーしてください（！）それかeasing関数を書いてもらえると･･･ Live demo Download demo files 導入方法 1. jQueryとeasingプラグイン、whatinoutを読み込む。 3. 実行する $()で対象にする要素を指定します。実際に使う場合は、ふわっと表示させたいときにwhatIn()、ふわっと消したいときにwhatOut()、ふわっとスライドインしたいときにwhatSlideI
第3回 トラバーシング編
連載目次 要素セット（jQueryオブジェクト）からstart番目～end番目の要素だけを抜き出すには、sliceメソッドを利用します（引数startのインデックス番号は0スタート、引数endは1スタートです）。 引数endが省略された場合にはstart番目以降のすべての要素を、引数startに負数を指定した場合には要素セット末尾から数えた要素を基点に、それぞれ要素の抽出を行います。 具体的な挙動も確認してみましょう。以下は、すべての<div>要素に対して背景色を黄色に設定した後、以下のような効果を適用するサンプルです。 2～3番目の<div>要素に赤の枠線を追加 5～6番目の<div>要素に青の枠線を追加 4番目以降のテキストの色をオレンジに変更 <style type="text/css"> .box { height:50px; width:50px; float:left; mar
iframeをValidに表示する(?)javascript「JQuery iFrame Plugin」
iframeをValidに表示する(?)javascript「JQuery iFrame Plugin」 ページに外部ページを表示させる方法にiframeがありますが、XHTML 1.0 StrictやXHTML 1.1で「非推奨要素・属性」となっています。 JQuery iFrame Pluginを使用すれば、これをクリア（多分）しつつ、iframeが使用できます。 sponsors 使用方法 JQuery iFrame Pluginからjquery_iframe.jsを、jQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery_iframe.js" type="t
JavaScriptでcookieを操作する時はjquery.cookie.jsを使おう - monjudoh’s diary
↓でtxtファイルとしてダウンロードできる。 http://plugins.jquery.com/project/cookie 使い方はデモを触ってみてソース見るとか、 jquery.cookie.jsのソースのコメントの@exampleを見るとかすればいいと思うけど簡単に説明しておくと、 基本的には$.cookie(クッキー名);で値の取得、$.cookie(クッキー名,値);で値の設定が出来て、 第3引数でoptionがいろいろ指定できる。 $.cookie(クッキー名,値,{ expires: 日数, path: '/', domain: ドメイン});とか。 expiresをDateオブジェクトだけじゃなくて日数の数値としても指定できる(というか基本的にこっちを使うはず)。 jQuery pluginだけど$.関数名で使う関数であり、 依存しているjQueryの機能がjQuery.
Alex Buga's Livingroom
About me About me Hi there, My name is Alex Buga, I’m from Bucharest, Romania and I am a design-addict - in the good way. (Voices: “Helloooo Aleeeex !”) I was the Creative Director at MB Dragan, an interactive agency based in Bucharest and I can tell you: It was the most fun place to work at. Experience I have an over 7 years background in webdesign in which I had the chance to gain experience and
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
Popup Window (jquery.popupWindow.js)
Open yahoo.com in a popup window (800x500) positioned 50 pixels from the top and left side of the screen. required | optional | not used centerBrowser - datatype:boolean, default:0 centerScreen - datatype:boolean, default:0 height - datatype:number, default:500 left - datatype:boolean, default:0 location - datatype:boolean, default:0 menubar - datatype:boolean, default:0 resizable - datatype:boole
Ajax 月送りカレンダー（jQuery・MT4版）
jQuery を使った Movable Type 4 版の Ajax 月送りカレンダーのカスタマイズです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。 これまでは prototype.js を用いたカスタマイズを公開していましたが、「jQuery版を作ってほしい」というリクエストを頂きましたので、本エントリーにて説明致します。 Ajax 月送りカレンダーの概要は「Ajax 月送りカレンダー」をご覧ください）。 ここではデフォルトテンプレートおよび公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。 １．スクリプトのダウンロード・アップロード 下記のスクリプトをダウンロードします。 jquery.js（"Download" のリンクをクリックし
[JS]jQueryのプラグイン100選 -2009年総集編
2009年に紹介したものを中心としたjQueryのプラグイン100選です。 カルーセル・ニュースティッカー関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 角丸関連
技術系雑記帳
目的 aitendoさんで取り扱っているとても安価なOLEDモジュールをRaspberry Piでも使えるようにする aitendoさんのOLEDはドライバはSSD1306系の物が多く解像度が違うだけなので、今回利用したAdafruit SSD1306ライブラリで動作する物と思われます。 利用した部品 OLED with キャリーボード OLED with キャリーボード [OLED1306-066SMD] http://www.aitendo.com/product/6994 Raspberry Pi 2 Model B 電源 3.3V単一電源 (Raspberry PiのGPIOから取り出しのみで動作させています) 組み立て キットなのでチップ部品とOLED付きのフラットケーブルはんだ付けが必要となります、また写真にあるようにI2C＋電源の最低限の配線で制御したい場合は、多少の配線が必
Toggle Tutorial - jQuery CSS Toggle Effect - javascript toggle tutorial - simple Toggle Effect
I know there are a lot of toggle tutorials out there already, but when I was learning the basics of jQuery and the toggle effect, I had a hard time finding resources on how to switch the “open” and “close” graphic state. After reading a few tutorials and mix and matching techniques I was able to achieve this effect, but wanted to share it with those who experienced the same frustration that I had
フォーカスを当てるとデフォルト文字列が消えるinput text (jQuery編) (2009-05-16)
いろんな文献を気軽に参照しにくい環境になり、いちいち検索しなくてもいいようにここにまとめておきたい感じになったのでしばらくそんな普段書かないようなPOSTばかりします。 まず、最近良くある、デフォルトの状態では入力例を表示して、フォーカスを合わせると消えるというインプットボックスの実装例について。このブログのコメント入力フォームがまさにそんな感じ。 <form action="hoge.php" method="get"> <p><input type="text" name="q" id="q" size="30" value="検索語を入力してください"><input type="submit" value="検索"></p> </form> $(function(){ $("#q").focus(function() { if($(this).val() == $(this).att
label要素で囲む書き方をIE6でも有効にするJavaScript | スマートネットワーク 開発ブログ
ラジオボタンとかチェックボックスって的が小さいのでクリックしにくいものです。label要素を使って対応するラベルを指定してあげるとクリックしやすくなります。 <input type="checkbox" id="green"/> <label for="green">緑茶</label> <input type="checkbox" id="roast"/> <label for="roast">ほうじ茶</label> <input type="checkbox" id="oolong"/> <label for="oolong">烏龍茶</label> label要素を使うとクリックしやすくなるので、ラジオボタンとかチェックボックスが出てくるときは指定するようにしてるのですが、最近になって以下のような書き方もできるということを知りました。 <label><input type="c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
maki-o memo
Site Under Maintenance
jQuery ドロップダウンメニュー | CSS Lecture