テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
[JS]テキストを揃えたり、文字間を調整したり、かっこいいアニメーションを適用したりするjQueryのプラグインのまとめ
テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js) ::ハブろぐ
HTML5の仕様にあるplaceholder属性を、未対応のブラウザでも擬似的に使えるようにするjQueryプラグインです。title属性に入れた文字列を、プレースホルダー用のテキストとして扱います。placeholder属性については以下などを参照。 HTML5のFormで実現されるplaceholder、autofocusが便利そう - IDEA*IDEA <input> placeholder－HTML5タグリファレンス 今回のプラグインは、HTML5のplaceholder属性をjQueryでやってみる :: ハブろぐ で、以前書いていたjQueryを整理して、プラグインの体裁に整えてみたものです。車輪の再発明もいいとこですね。 2011-09-09追記 バージョン1.2でplaceholderAttrオプションを追加 これまでplaceholder属性代わりに使う属性がtitle
スマフォ用サイトでよく使うエレメントが豊富に揃ってるフレームワーク -ChocolateChip-UI
スマートフォンなどのモバイル用サイトを簡単に制作できるようにするJavaScriptベースのフレームワークを紹介します。 先日リリースされたiOS5にも最適化されています。 ChocolateChip-UI [ad#ad-2] ChocolateChip-UIで用意されているエレメント あらかじめ用意されているエレメントは数多くあります。 ツールバー ナビゲーションバー ボタン アイコン ナビゲーションリスト テーブルビューアー セレクションリスト スイッチコントロール ポップアップ プログレスバー アクティビティインディケーター アクションシート セグメントコントロール スライダー カルーセル スクロールパネル ページングコントロール テキストを並べても分かりにくいと思うので、下記にキャプチャでご紹介。
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」:phpspot開発日誌
jQuery Marquee Animation Plugin Preview - CodeCanyon 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」。 ホームページをつくりはじめた時には誰もが使ったマーキー。覚えていくにつれ、ほとんど使われないかわいそうなマーキー。 そんなマーキーもjQueryで超かっこ良く、まるで映画のプロモーション動画に使われるようなエフェクトに生まれ変わったようです。 生まれ変わったマーキーを見てみよう 実装は超簡単！ <script language="javascript"> $(document).ready(function() { $('.marquee').fMarquee({width: 960, height: 100}); // サイズをオプション指定 }); </script> <!-- 内容はdivに入
【Webサイト制作】独学素人がjQueryで、ドラクエ画面を作ってみた
こんなサイトを作ってみました オッス、オラ日曜ネット大工。 １年に１回くらい趣味でwebサイトを作ったりする独学素人ノンプログラマーです。 仕事はＩＴ系にかすりもしないけど、たまにサイトが作りたくなるんです。 htmlもCSSも知識不足ですが、作成ソフトに頼ればなんとかなります。 そんなレベルで無謀にも「JavaScriptも使いたいな」とか思ったりするわけですよ。 で、たまに「簡単にわかるJavaScript入門」なんてサイトや記事がありますよね。 ああいうのを書いてくださる人に、ちょっと言いたい。 あの、独学素人ノンプログラマーの俺をなめてませんか？ あなた方の想像を絶するほどに、俺のＩＴ系理解能力はゴミクズですよ！ 「簡単に分かる入門」にさえ入門できません助けて先生！ と、鼻水をたらしながら泣き出すような底辺レベルのスキルしかないザコであります自分は。 ですが、jQueryと出会い、
[JS]jQueryのプラグイン33+1選 -2011年4月
Slider Kit スライドショー、コンテンツスライダー、タブコンテンツ、カルーセルなどさまざまなスライドコンテンツに対応。
Mega Web Buttons Pack #1 | Codrops
Today we want to share our first set of easy-to-implement buttons called ‘Mega Web Buttons Pack’. In this set you will find 42 buttons which you can use easily on […] Today we want to share our first set of easy-to-implement buttons called ‘Mega Web Buttons Pack’. In this set you will find 42 buttons which you can use easily on your website. We are using the WooFunction icon set released under the
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
使い方簡単で見た目も綺麗なダイアログ実装jQueryプラグイン「Apprise」:phpspot開発日誌
Apprise - The attractive alert alternative for jQuery 使い方簡単で見た目も綺麗なダイアログ実装jQueryプラグイン「Apprise」 次のようなダイアログを apprise('Hello?', options); だけで実現できるようになります。 optionsに色々渡すことで様々にカスタマイズが可能。 confirm っぽくしたり 入力ボックスにしたり。 アニメーションで表示させたりも出来ます。 ダイアログは色々ありますが１つの選択肢として覚えておいてもよさそうです。 関連エントリ 超カッコいい確認ダイアログをjQueryで実装するチュートリアル jQueryを使って作るシンプルなモーダルダイアログ その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAction」 効果音付きでアニメーション
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデー
jQuery - StackTrace
jQuery とは、John Resig によって開発された JavaScript ライブラリです。 Ajax や DOMプログラミングを「簡潔に」「簡単に」書くことができる、軽量で強力なフレームワークです。 jQueryプロジェクトは、4つのプロジェクトで構成されています。 jQuery Core jQuery のコアライブラリを開発するプロジェクトです。Ajax や DOMプログラミングフレームワークを提供します。 jQuery UI jQuery Core上に構築された強力なユーザインターフェースライブラリです。 Sizzle 高速なセレクタエンジンです。jQueryでも使用されています。単独でも使用可能です。 QUnit 使いやすいJavaScriptのテスティングフレームワークです。 このサイトでは、jQuery Core、jQuery UI の日本語リファレンスを公開しています
JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ
JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。 日付の単位について 基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分 よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒 現在時刻の取得 まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get
ドラッグ&ドロップするだけでJavaScriptの構文チェックができるbkhvalid - 小さい頃はエラ呼吸
はじめに ドラッグ&ドロップするだけでJavaScriptの構文チェックができるbkhvalidをご紹介します。 JavaScriptはJavaやC言語などのコンパイル言語と違い、コンパイルという手順がないまま動かすことができるスクリプト言語です。このため、セミコロンの付け忘れなどでバグを生み出す可能性があります。そんな小さなミスを機械的にチェックすることができるツールがbkhvalidです。bkhvalidを利用すると、JavaScriptにおける構文ミスや潜在バグの検出に役に立ちます。 bkhvalidとは bkhvalidは、HTML, XHTML, CSS, JavaScriptの構文をチェックをしてくれるソフトウェアです。 HTML、XHTML、CSSにおいては今やエディタで構文チェックができる時代なので、それほどすごいことではありません。このソフトウェアの最も魅力的な機能はJa
ファンシーなデザインのカウントダウンタイマー実装jQueryプラグイン「Fancy Countdown」:phpspot開発日誌
ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler... 次の記事 ≫：ストライプ等、Photoshop用の４００個のパターンまとめ Fancy Countdown ファンシーなデザインのカウントダウンタイマー実装jQueryプラグイン「Fancy Countdown」 何らかのカウントダウンというと、待ち遠しかったりするもので、単純にテキストだけでカウントダウンしても面白みが少ないですね。 ということで、次のようなデザインのカウントダウンタイマーがjQueryで簡単に実現可能です。 あと何日でサイトオープン！みたいなティザーサイトを作る場合にも使えそう。 $(function() { $("#anyID").fancyCountdown({ 'year':2011, 'month':05, 'day':13, 'hour':13, 'minute
使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」:phpspot開発日誌
JK - jQuery SimpleFAQ 使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」。 FAQというと内容が多くなればページが長くなって見難くどんどん使いづらくなっていきますね。 そんな場合に、項目は並べつつも、クリックした際にアニメーションで質問のすぐ下に現れるようなFAQが簡単に作れます。 質問のリスト。 とりあえず質問が並んでいるので分からないことを探してもらいます。 そんなに大規模なFAQじゃなければ質問項目を羅列しておくだけでもそれなりに使いやすいです。 クリックすればページ移動とかもなく、その場にアニメーションしながら答えが表示されます。 別ページに移動したりといったことがなく、ストレスフリーで内容が見れます。仮に答えが的外れでも戻ったりせずにすぐに他の質問に行けます で、何がいいかという個人的におすすめする点は、作り方。 作り手は、
JavaScript開発にalertを使っている人必見！ログ出力ライブラリ「Blackbird」 | Web活メモ帳
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.jquery4u.com/plugins/
Site Under Maintenance
