少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
わずか3STEP！誰でも簡単にjQueryを使ったLightboxギャラリーを作成出来るソフトウェア・Jquery Photo Viewer
なかなか面白い試みだったので 備忘録。現在数多くのjQueryを 使用したギャラリーが存在し、その 中には多くのLightbox風ギャラリー が存在します。今日、ご紹介する のはそんなギャラリーを作成する ソフトウェアです。 jQueryを使用したギャラリーを作成するジェネレーターになりますね。ちょっとこの発想はありませんでした。 オンラインのジェネレーターではなく、ローカル環境で動かすソフトウェアです。使い方も凄く簡単ですよ。 言語も日本語に対応しています。 わずか3STEPで作成出来ます。 STEP.1 使い方はDLページにも書いてありますが、簡単にご紹介。おそらく直感で作成出来ます。ソフトウェアをDLしてセットアップすると上記画面が立ち上がります。ここにギャラリーにしたい画像をドラッグ＆ドロップしていきます。 STEP.2 画像を決めたら、上部のPublishをクリックします。すると
タブやアコーディオンなど、様々なUI構築用のjQueryプラグイン30個以上をセットにしたフレームワーク・ jQuery EasyUI
普段からよく見かけるjQueryによる タブやアコーディオンなどのUIの構築 を簡略化するためのフレームワーク・ jQuery EasyUIのご紹介です。プラグ インは30個以上あり、どれもシンプル なものになっています。 数じゃ敵いませんけど、Ext JSのjQuery依存型みたいな印象です。結構昔からあるみたいなので知ってる方も多いかもですけど・・・恥ずかしながら最近知ったので、僕と同様にまだ知らない方向けにシェア。 jQueryを使ったシンプルなユーザーインターフェースを構築する為のプラグイン30数個をワンセットにしているフレームワークです。余計な機能が付いていないものばかりなのでカスタムしやすいのでは。 コードはドキュメントに全部書いてありますので割愛します。 プラグインの一部をご紹介します。 Accordion 開閉するアコーディオン Menu シンプルなメニュー Panel パ
Youtube動画を透過(opacity)できるjQueryプラグイン・YTPLAYER
あまり見かけないタイプのライブラリだった のでメモ。Youtubeの動画を透過させる事 が出来るjQueryプラグインです。インター フェースもクールにされて全画面に配置した りオート再生させたりも可能でIE6や7でも 一応は動作してくれます。 僕はちょっと知らないんですけど、Youtubeって普通は透過出来ない、で合ってますよね？普通に出来るならちょっと恥ずかしい記事ですけどｗ 透過だけでなく、オート&リピート再生、ミュート設定も出来て、見た目もスッキリさせてくれています。以前はYoutube動画を背景にするjQueryプラグインをご紹介しましたが、今回は透過が出来るプラグイン。いろいろ出来るんですね・・ CPUの問題は否めないとして、これはちょっと素敵なので覚えておきたいです。透過のみに関してはIE6や7にも対応していますが、Operaは透過出来ませんでした。バージョンにもよるんですか
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
Youtube動画を背景に設定可能なWordPressテーマ・「WP-Tubular」を作ったので無料配布します
先週の土曜日に書いた記事が思い のほか、ご好評でしたので調子に のってWPテーマにしました。管理 画面でYoutubeのIDを指定すれば、 背景にしている動画を変更する事が 出来ます。勿論無料ですし、リンク の表記も不要です。 もともと、使用しているjQueryのプラグインであるjquery-tubular自体、クロスブラウザに対応（IE6で動作せず、IE7でレイアウトにズレ）していませんのでこのテーマもそんな感じです。jquery-tubular自体のライセンスはMITになります。 昨日、たまたま時間が開いたので突貫工事的に作りました。使用しているjQueryは以前書いた記事をご参照ください。 動画の指定方法 肝心の動画の指定方法です。WP-Tubularを有効化すると、管理画面の外観の所に設定項目の「WP-Tubular Settings」が追加されます。 この項目でYoutubeの動
jQuery事始めvol.2・画像にマウスオーバーして動作するアニメーションエフェクトを作ってみる
以前に書いたjQuery事始め、という記事の 続編のような内容の記事です。基本を理解 したら今度はコードを真似して体で覚えて みるのも勉強方法の有効な手の一つだと 思います。ご自分で改変して遊べる程度の 簡単なコードなのでぜひチャレンジしてみて ください。 内容はjQueryを覚えたいけどなかなか時間が無い、というWebデザイナーさん向けです。多くのプラグインやチュートリアルが存在しますが、jQueryの基本中の基本と少しのアイデアだけでも十分出来ることがありますので、そこまで深く追求する必要は無い気もします。 少しでもハードルが低くなればと思って、コードを真似して、そこからご自身で応用出来るような簡単な内容を記事にしてみました。今回はよくあるマウスオーバーエフェクトを作ってみます。 サンプルまずはサンプル。画像にマウスを乗せるとアニメーションエフェクトがかかります。 確認出来ましたでしょ
お手軽WordPress Tips：ウィジェット機能で追加した項目をjQueryを使って開閉パネルにする
何度かエントリーしているWordPress の小ネタのコーナーです。カテゴリを 作るべきでしたね・・・今からでも遅くな いかな。今日はWordPressカスタマ イズのTipsですが、以前書いたjQuery 事始めのおさらい、実践編も兼ねて チュートリアル的に書いています。 今日の内容は、ウェイジェット機能でサイドバーに項目を追加しているサイトが対象。どうしてもウィジェットを使う必要がある、という事もたまにあります。この項目が仮に縦長になってしまうと微妙なので、jQueryで開閉パネルにしてすっきりさせよう、というものです。 以前書いた、jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみるという記事のおさらい、実践編にもなっていますのでこれからjQueryを学ぼう、という方はぜひチャレンジしてみてください。 Step.1 / ソースを確認するまず、ご自身のWebサイトの
フォームのバリデーション用jQueryプラグインいろいろ+α
個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。
コンテンツをユニークなアニメーションで入れ替える2KBの軽量jQueryプラグイン・MobilyNotes
コンテンツをユニークなアニメーション で入れ替える軽量なjQueryプラグイン MobilyNotesのご紹介です。IE6や7 でも問題なく動作してくれます。省ス ペースにコンテンツをまとめられるので なかなか使い勝手もいいのでは。 ファイルサイズもたった2KBと大変軽量です。 紙で見ているかのように表現されたエフェクトがなかなかユニークです。画像やdiv要素ごとも可能です。また、自動で切り替わる、ボタン式などの選択も出来ますよ。 使い方jQueryとプラグインを読み込んで以下のような設定をします。 $(function(){ $('.notes_img').mobilynotes({ init: 'rotate', showList: false }); $('.notes_txt').mobilynotes({ init: 'plain', positionMultiplier: 20
まとめ記事やTipsなど、ひたすらjQueryの情報を配信しているブログ・jQuery4u
jQueryのプラグインのまとめ記事 や、Tipsなど、jQuery関連の情報 のみをひたすら配信しているブログ jQuery4uをご紹介。即効RSS購読 でした。まとめ記事も多数あるので 暇を見て全部見まわっていきたい。 まだ大量の記事数ではありませんが、今後に期待したいところ。以前書いた「jQueryプラグインを探す際にだいたい見て回る巡回サイトまとめ」にも加えています。 jQuery情報のチェック先に。 いくつか良かった記事をご紹介。 フォーム系プラグイン30個 バリデーションとかフォームデザインとかいろいろ jQuery Forms > 30 Examples and Plugins 画像拡大系プラグイン10個 画像を拡大する的なプラグインいろいろ 10 jQuery Image Zoomers jQuery Mobileを使った5つのテクニック jQuery Mobileのテクニ
Re：zapa氏 今更ですが、jQueryにはまりました - ホームページを作る人のネタ帳
ZAPA氏の記事。 ニュータイプなJSライブラリjQueryを使ってみよう！ これを見てから3日間。 ブログもあまりかけずこればっかりいじって遊んでました。 睡眠時間も1日2時間くらいになり、今日は書こうと思います。 まずZAPA氏、きっかけをありがとう。 私はJavaScriptの知識がほぼ皆無な人間です。 そんな私でもjQueryは簡単に使える為、面白くてはまりました。 ただ、お恥ずかしい話、PHPを使ってJavaScriptをある程度制御しなければ私は使いこなせません。 ですが恐ろしく簡単にこれまでこのブログで紹介してきたようなJavaScriptアプリと同等のものを作れる為、これははまります。 JavaScriptダメダメの私でも出来ました データベース接続部や、なんやかんやは全てPHPでまかない、動作部分やFormなどはｊQueryに投げる。 こんな方法で色々試して見ましたが、A
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/08/wp-jquery.html
5509.me