2009年に紹介したものを中心としたjQueryのプラグイン100選です。 カルーセル・ニュースティッカー関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 角丸関連
2009年に紹介したものを中心としたjQueryのプラグイン100選です。 カルーセル・ニュースティッカー関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 角丸関連
CSS is an acronym that stands for cascading style sheets and refers to a set of instructions that controls the appearance of a web page. The formatting principles of CSS are supported by most browsers include Firefox and IE3. In comparison with HTML, CSS provides more formatting options and finer tuning for instance, instead of being stuck with 7 font sizes one can simply use an infinite number of
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! ↑私が10年以上利用している会計ソフト! 追記:この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です!詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
ページ内リンク用のスムーズナビゲーションを作成できる「jQuery One Page Navigation Plugin」 JavaScript Library Archive ページ内リンク用のスムーズナビゲーションを作成できる「jQuery One Page Navigation Plugin」 Check Tweet 配布元:jQuery One Page Navigation Plugin jQuery One Page Navigation Pluginはページ内リンクナビゲーションをスムーズスクロールに変換することが出来るJavaScriptライブラリです。jQuery ScrollTo plugin.を合わせて利用することで柔軟性の高いスクロールを実装しています。 利用方法 jQueryとQuery ScrollTo pluginそして、ダウンロードした「jquery.nav
やはり横のナビゲーションメニューは「現在位置」がわかった方が良いなぁと思い、せっかくなのでサーバサイドではなくjQueryで実装してみました。 原理は簡単で、現在のURLから1階層ずつ遡りながら、一致するリンクを探しています。 完全に自分の環境任せなので、例えば次のようなケースであれば、コードの書き換えが必要です。 httpからの絶対パスで指定している 逆に、現在ページからの相対パスで指定している("below/this/path/"など) 途中に"."や".."などのポインタが入る GETのパラメータが付いても被リンクと認められたい コードが理解できれば、対応は容易だと思います。 以下がコードになりますが、方法としてセレクターにパスの捜索を委ねるより、ループを廻しながら文字列の最長一致を捜した方が恐らくレスポンスは良いでしょう。 せっかくのjQueryなので、ちょっと無理矢理、xPath
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記: 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ(IE8, Fx2.5, Chrome2)を更新しました。 2009年2月23日 ver.3.0.6をリ
画像を使って、スムーズなアニメーションで開閉するアコーディオンメニューを実装するjQueryのプラグインを紹介します。 デモ:vertical, easeOutBack [ad#ad-2] Accordion Image Menuの実装 HTML 各パネルはリスト要素で実装されています。 <ul id='menu'> <li><a href='link1'><span>title 1</span><img src='image1.jpg' /></a></li> <li><a href='link2'><span>title 2</span><img src='image2.jpg/></a></li> <li><a href='link3'><span>title 3</span><img src='image3.jpg' /></a></li> <li><a href='link4'>
簡単なログインフォームをはじめ、お問い合わせフォーム、コメント用フォーム、ショッピングカート用フォーム、アンケート用フォームなど多種多様なタイプが用意された、バリデーション機能も備えたフォームのフレームワークを紹介します。 jQuery Form Framework - jFormer [ad#ad-2] jFormerの特徴 クライアントサイドのバリデーション サーバーサイドのバリデーション AJAXを使ったページ変更機能 CSSベースの簡単なカスタマイズ Botの防止(CAPTCHAは無し) 入力データのレジューム機能 フィールドのロック機能 フォームのテンプレートも多数用意 jFormerのデモ デモには、さまざまな実用的なフォームがあります。
どこかで使うかもしれないと思って メモがてらシェア。スマートフォンに サクッと対応させるjQueryプラグイン のjquery-mobileに960グリッドシス テムを取り入れることが出来るcss、 jquery-mobile-960です。 なんだかタイトルが謎ですが語彙が無いだけなので気にしないでください。jquery-mobile-960はライセンスがMIT。商用もOKで無料で配布してくれています。 jquery-mobile-960は、960.gsをjQuery-Mobileを使ったレイアウトにも使うためのcssです。2カラム、3カラム、イメージギャラリーなどに使えそうな4カラムレイアウトなどもも思いのまま。 少し大きいですけど全画面キャプチャ↓ 実際にiPhoneで確認 縦の場合。 横の場合。 使い方<link href="http://code.jquery.com/mobile
If one of your requirements is to support multiple languages, you must familiarize yourself with supporting Unicode data. An in-depth discussion of Unicode support is outside the scope of this article. Besides, Joel Spolsky has already said it best. What you should know is how Unicode affects your database design (data types used), how it affects the encoding used for your Web application pages, a
以前にも同じようなものがありましたが、 こちらのほうが良かったのでメモ。リスト (デモでは画像を使っています)にフィルタ リングしてソート出来るjQueryプラグイン。 わずか2KBと軽量で、クロスブラウザ対応 です。便利そうなのでどこかで使いたい ですね。 以前ご紹介したFilter Image Viewも良かったのですが、IE6で表示が微妙でしたが、MobilySelectは問題なく、しかも軽量です。 機能はFilter Image Viewと同様で、ボタンを押すと、そのボタン以外のリストを非表示にする、というフィルタリング。 上記は「名刺」のみの表示にした状態。 完璧に同じ挙動、とは行きませんが、IE6でもちゃんとフィルタリングしてくれます。上記はIETesterでのキャプチャ。 マークアップ<div class="selecter selecter1"> <div class="s
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」 2011年01月25日- jQuery File Upload Demo 複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」。 「Upload files」ボタンを選択するとダイアログが開き、複数ファイルを一括して選択。その後すぐアップロードが始まり、プログレスバーを通して進捗を表示、アップされたファイルのサムネイルも次のように表示してくれるという、ファイルアップロードのフルセットを提供してくれます。 アップされたファイルの横に表示されているごみ箱アイコンをクリックすればすぐさま削除も可能。 HTML5ベースなプラグインなのでFlashも不要です。 アップロードの受け口としてphpのソースも同
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
この記事は賞味期限切れです。(更新から1年が経過しています) 透過PNGの処理が下手くそなのは、IE6だけではなく、IE7/8も同様です。 IEで透過PNGをあてた要素のopacityを弄ると、周りがグレーがかって汚くなります。 この現象はよく知られていると思いますが、今日はこの不具合の治し方のメモを記しておきます。 サンプルコード 例えば、こんなコード。 <style> .test { display:block; width:128px; height:128px; background:url(./test.png) 0 0 no-repeat transparent; } .test:hover { background-image:url(./test-hover.png); } </style> <a href="#" class="test"></a> test.pngとte
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単! スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1)HTMLを書くだけでモバイルアプリケーションができてしまう 2)モバイルのユーザーインターフェイス対応の部品が多く揃っている 3)iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
jQuery でスクレイピングできたらセレクタ使えるし便利かなーと思ったりしたんですが、Rhino と env-js を使うと超簡単にできたのでレポートしてみます。 Rhino と env-js って何ぞい? Rhino ってのは Java で書かれた JavaScript エンジンです。Rhino を使うとコマンドラインから JavaScript を実行できます。 Rhino には DOM が無いので単体では jQuery を実行することはできませんが、env-js という DOM ライブラリを使用するとこの辺はクリアできます。 env-js の中に jQuery を使ったサンプルがいくつか入ってますので、Java とか JavaScript とか詳しい方はそちらを見てもらった方が早いと思います。 使ってみる まず env-js をビルドしないといけないのでその辺の手順から説明します。
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 1)3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く