サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
テキストフィールドに入力すると、自動補完で選択肢がでてきて、タグが追加されるような仕組みを入れたかったのですが、既存のもので使い勝手がよさそうなものがなかったので作ってプラグインとしてgithubで公開してみました。 複数タグの追加がサクッとできる 文字を入力すると、選択肢がでてきます。選ぶと、入力ボックス内にタグがペタッと張り付きます。デモはこちらから。 設置方法jQueryとjQueryUI、CSSを読み込む<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link
これらの機能を利用することで、開発者はデバイスに依存することなく、手軽にネイティブアプリ・ライクなUI（ユーザーインターフェース）を実装できます。当然、jQueryとの親和性に優れますので、アプリ独自の機能を実装する場合にも、jQueryの知識をそのまま利用できるのはうれしいポイントです。 jQuery Mobileの動作環境 jQuery Mobileが動作するおもな環境は、以下のとおりです。ざっくりと言ってしまうならば、対応が制限されるデバイス／機能が一部にあるにせよ、現在メジャーな環境のほとんどで問題なく動作します。Android iOSWindows PhoneChrome forAndroid Firefox Mobile Opera Mobile／DesktopKindle 3 and FireBlackberryKindle 3, Fire, and Fire
jQueryUI の Dialog プラグインのダイアログを、アニメーション動作で開閉させる。アニメーション動作の指定には、show オプションとhide オプションを使う。 show オプションとhide オプションに指定する値については、アニメーション開閉の種類と動作例（サンプル）へ。 実装例（サンプル） 「×」アイコンをクリックすると、アニメーション動作で閉じる。タイトルをドラッグしながら、ダイアログを移動できる。ダイアログのサイズを変更することもできる。 ダイアログを開く 実装例（サンプル）の動作について 「ダイアログを開く」ボタンを押すと、ブラウザの中央に、ダイアログが、アニメーション動作で出現する。 ダイアログ内の「×」アイコンをクリックすると、アニメーション動作で、ダイアログを閉じる。 ダイアログ内のタイトルをドラッグしながら、ダイアログを移動できる。 ダイアログのサイズを
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので FileAPIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fd68996a682d66a0a12cce22ce700c4f49f5b6023%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fblack-flag.net%252Fcommon%252Fimg%252Fogp_jquery.png&f=jpg&w=240)
画面遷移を行わずに、その場でDOM要素を編集できる機能を「inplace editor」とか言うらしいです。 プラグインを使う方が簡単なのですが、作りたいものに合わせてカスタマイズするのが思うようにいかなかったので、自分で書いてみました。 <table id="edit-table"> <tr> <th>要素１</th> <th>要素２</th> <th>要素３</th> </tr> <tr> <td>1</td><td>hoge</td><td>hoge</td> </tr> <tr> <td>2</td><td>hello</td><td>world</td> </tr> <tr> <td>3</td><td></td><td></td> </tr> </table>
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな
77 18 12 2008 ブラウザの表示サイズに合わせてフォントサイズを自動で変更する方法 jquery jQuery, Ajax 可変するボックスやブログの記事部分なんかにいいかもしれません。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript"> function AutoFsize(){ var wpx = $("div#content").width(); var fpar = (Math.floor((wpx)/(400/100
Update: Version 1.1 released 2/8/08.Good bug fixes + Opera compatibility! ...so I fought back the charging Guanaco, immediately hopped on my paraglider, and basically caught the first flight out of Chile — but not without dealing with some cantankerous customs inspectors while drinking a cool glass of chicha. Really sorryit took so long! But hey, two years later,it's finally done! SmoothJavasc
Introduction Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQueryjavascript library.It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2. Demo Single images Image set These are pictures I took during a journey through India and Nepal. Features F
To display a single imagesimply link to the source. Also, 'title' attributes will automatically populate the caption field: $(".boxer").boxer(); <a href="image.jpg" class="boxer" title="Caption"> <img src="thumbnail.jpg" alt="Thumbnail" /> </a> Demo To display a gallery of images attach a common 'rel' attribute to eachitem: <a href="image_1.jpg" class="boxer" title="Caption One" rel="gallery"> <
Webサイト上でバナーや商品のサムネイル画像などの見せ方として、並べられた画像（コンテンツ要素）を一定のスピードで自動でスライドして、無限ループさせているものをたまに見かけます。 そんなビューアー的役割のコンテンツ無限ループスライダーを作ってみたので紹介してみます。 まずは動作のサンプルから。 jQuery LOOPSLIDER【SAMPLE】 10個並べてある画像が自動でスライドし、無限にループしています。 この動作の全体構成について、HTMLから。 ◆HTML <div id="loopslider"> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo02.jpg" width="1
Lightweight Circle slideshow〔くるくる回して画像を切り替える円形のイメージギャラリー〕 Smooth Div Scroll〔水平方向に並べた画像をマウス操作でするするスクロール〕 Nivo Slider〔9種類のエフェクトがかけられるイメージスライダー〕 Galleriffic〔画像ギャラリーをリッチかつ高速にレンダリング〕 IMGPREVIEW〔マウスオーバーでリンク先の画像をプレビュー表示〕 jQuery largePhotoBox plugin〔大きな画像対応ポップアップ（マウス移動で画像全体を閲覧可能）〕 PIROBOX〔シンプルかっこいい画像ポップアップ〕 bxGallery〔シンプルな画像ギャラリー〕 ASimple jQuery Slideshow〔シンプルなスライドショー〕 Accessible News Slider〔全件表示や件数に応じて前
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
