[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
[JS]jQueryのプラグイン33+1選 -2011年4月
Slider Kit スライドショー、コンテンツスライダー、タブコンテンツ、カルーセルなどさまざまなスライドコンテンツに対応。
カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」:phpspot開発日誌
カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」 2011年03月31日- jQuery Flower Navigation | jQuery Plugins カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」。 何の変哲もない円形のボタン。 クリックすると円の内側から画像がワサッとアニメーションでメニューが現れます。 カーソルを合わせると止まります。 マークアップは次のように書かれています。 デモではクリックしても飛べませんが、aタグのhrefを指定してあげれば飛べるということが分かりますね。 <nav id="websites"> <ul> <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/mdm_sma
要素をバイブレーションさせられるjQueryプラグイン「jRumble」:phpspot開発日誌
jRumble | A jQuery Plugin That Rumbles Elements 要素をバイブレーションさせられるjQueryプラグイン「jRumble」。 カーソルを合わせる等のアクションをトリガとして、アイテムを自由にバイブレーションして目立たせることが出来るjQueryプラグインです。 利用者の注目を集めたい場所に仕込んでおくことで、かなり注意をひけそう。 メニューなんかもブルブルさせて今の位置を分かりやすくしたりも。 CSS3で回転なんかもできるようになってよりリアルにブルブルしてます。 動きの強さなんかはパラメータで簡単に調整できます。 ユーザビリティを上げるための１つのテクニックとして覚えておいて損はないですね。 追記）CPU利用率が高まるということで利用には注意が必要です 関連エントリ １枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「i
[JS]これFlashじゃないの？ってなるナビゲーションを実装するjQueryのチュートリアル
軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML：背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D
フォームのバリデーション用jQueryプラグインいろいろ+α
個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。
[JS]jQueryのプラグイン33+1選 -2011年2・3月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 MobilySlider 軽量ながらも高性能なコンテンツスライダー。 jShowOff さまざまなオプションを備えたコンテンツスライ
長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」:phpspot開発日誌
長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」 2011年02月03日- Multi-column lists | jQuery Plugins 長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」。 <ul><li>1</li><li>2</li> ....... </ul> と、長い ul リストを、jQuery("ul").columns(5, true);のようにすることで、5行に勝手に分割してくれます。6行にしたければ6を指定 次のようになります。 通常これをやろうとすると、数値で割って、規定値にきたら一旦</ul>で閉じてみたいなことをする必要がありますね。 これをたった1行で出来るというのはかなりHTML出力側のプログラムが楽ちんになり、頭を使う必要がないですね。 行
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」:phpspot開発日誌
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもＯＫだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade
[JS]シャドウをふんわりとアニメーションで変化させるスクリプト -Shadow animation
CSS3のbox-shadowで適用したシャドウをふんわりとアニメーションで変化させるjQueryのプラグインを紹介します。 ボタンなどにシャドウを使用した際には、よりリアルな効果を与えることができます。 Shadow animation jQuery plugin デモページ [ad#ad-2] アニメーションで変化できるのは、CSS3のbox-shadowで指定できる表示位置（X軸オフセット・Y軸オフセット）、ぼかしの半径、シャドウの半径、カラー、となっています。 各デモのスクリプトでの指定は下記のようになります。 JavaScript：左端 onmouseoverで、ぼかしの半径を30ox、カラーを#44fに $('#box1').animate({shadow: '0 0 30px #44f'}); JavaScript：真ん中 onmouseoverで、ぼかしの半径を50pxに
13 Excellent jQuery Techniques And Demonstrations
Are you looking for some cool and handy jQuery Plugins, you landed at right place. Below we are presenting 13 most useful and handy techniques that you can use in your next project and make it stand out. jQuery is the most well-known and open source JavaScript library which is being used all around the world because it simplifies the client-side scripting of HTML. You can also create marvelous ef
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
[JS]多彩なカスタマイズ、設置も簡単な画像の一部を拡大するスクリプト -Zoomy
画像の一部を拡大するスクリプトは数多くリリースされていますが、その決定版ではないか、というjQueryのプラグインを紹介します。 Zoomy デモページ [ad#ad-2] Zoomyの設置 Zoomyのオプション Zoomyの設置 Zoomyの設置は簡単で、ユーザビリティにも配慮されています。 使用する画像ファイル ページに配置する画像、拡大時に使用する画像、の2枚が必要です。 外部ファイル 「jquery.js」とZoomy用のJS, CSSファイルを外部として記述します。 <link type="text/css" rel="stylesheet" href="path-to/zoom.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.
[JS]テキストリンクのリストをアニメーションでスクロールさせるスクリプト
jQueryを使用して、リスト要素で実装したテキストリンクを指定した範囲内だけでスクロールさせるスクリプトを紹介します。 The MoveUp Menu デモページ [ad#ad-2] テキストリンクのリストはマウスを上下に移動すると、ものすごい勢いでスクロールします。 デモではマウス操作だけでは難しいため、キーボードの矢印キーの操作にも対応しています。 実装 実装はHTML, CSSともに最小限の形で実装されています。 HTML <div id="menu"> <ul> <li><a href="#">Nature</a></li> <li><a href="#">Receivability</a></li> <li><a href="#">Alone time</a></li> /ul> </div> CSS リストの可視範囲（高さ）を指定します。表示されないリストはスクリプトで表示し
jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル:phpspot開発日誌
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
[JS]jQueryのプラグイン100選 -2010年総集編
2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連
全画面をスライドとして使うダイナミックなナビゲーションを構築する2KB以下の軽量jQueryプラグイン
全画面をスライドギャラリー風にするダイナミック なナビゲーションをjQueryを使って実装するサン プルです。透過処理が必要ですが、IE6、IE7の 両問題児でも問題なく動いてくれますので、実践 でもプロモーションなどに利用できるっぽいですね。 スライドするとロゴが平行してスライドする事で視差 効果も出しています。 クロスブラウザ対応なので使いどころも出て来るかもしれませんね。ダイナミックに動いてくれますのでプレゼンテーションやポートフォリオ、キャンペーンなどに使うのも面白そうです。 Awesome Scrolling Navigation 全画面がスライドします。背景に画像を指定しているのでテキストなんかも入れられるっぽいですね。試していませんけどこれは結構使えそうです。 動作確認していただくと分かるかと思いますが、左上のロゴ部分も微妙なスライドをして視差効果を出しています。 マークアッ
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」:phpspot開発日誌
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」 2010年12月14日- Shorten - A jQuery Plugin for Truncating Styled Text 横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。 ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。 $(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。 .shorten({width: 400, tail: '<a href="">..
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://alpaca.chocosk.server-cowboy.net/blog/jquery/jquery-toastmessage-plugin/
IDEA * IDEA
