jQueryでメニューを固定位置に追随させる：Live floating menu
いろいろなサイトでメニューを固定＆追随させています。 今回はJavaScriptでこれを実現させてみます。 via：Live floating menu sponsors 使用方法 jQueryからjquery.jsとjquery.dimensions.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.dimensions.js"></script> <script type="text/javascript"> var name = "#id名"; var menuYloc = null; $(document).ready(function(){ menuYloc = parseInt($(name
JavaScriptで絵文字を表示させる「Emotions toggle」
コメント欄などでかわいい絵文字が使用できると、華やかになります。 JavaScriptライブラリjQueryのプラグインEmotions toggleを利用すると簡単に導入できます。 sponsors 使用方法 Emotions toggleからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.emotions.js"></script> <script> $(document).ready(function () { $('#id名').emotions(); }); </script> jquery.emotions.js内に画像を指定する箇所が61行目にありますので、適宜変更して下さい。
長くなったコードをJavaScriptでぐいっと伸ばす via:Making an Expanding Code Box
コードを書くときに改行をしないと、非常に横長になることがあります。 改行すると見やすくないし・・・というような時に、のばして表示できると便利です。 via：Making an Expanding Code Box sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script language="javascript" type="text/javascript"> $(function() { $("pre").hover(function() { var codeInnerWidth = $("code", this).width() + 10; if (codeInnerWidth > 450) { //ここの数値は後述す
2行追加でスムーズなページトップエフェクトを付与するJavaScript「jQuery Scroll to Top Control」
2行追加でスムーズなページトップエフェクトを付与するJavaScript「jQuery Scroll to Top Control」 最近ページトップへ戻るリンクをクリックするとスムーズな動きでトップまでスクロールするサイトが増えています。 今回は2行追加だけで、これを手軽に実現します。 via：jQuery Scroll to Top Control v1.1 sponsors 使用方法 jQuery Scroll to Top Control v1.1からscrolltopcontrol.jsとup.pngをダウンロードします。 また、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src=
フォームの要素にうっすらテキストを表示するJavaScript「jQuery Form Tips」
ユーザビリティに配慮したフォーム作りのため、入力項目にうっすらテキストを表示してみましょう。 JavaScriptライブラリjQueryのプラグイン「jQuery Form Tips」を使用すると簡単に実現できます。 sponsors 使用方法 jQuery Form Tipsからjquery.formtips.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.formtips.js"></script> <script type="text/javascript"> $(document).ready(function() { $('form').formtips(
フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」
フォームなどでよく、デフォルトでテキストが表示されている場合があります。 何を入力すれば良いのかを示しことができるので、ユーザービリティ上有意義な方法です。 jQuery Watermark PluginはjQueryベースでこれが可能です。 使用方法 jQuery Watermark Pluginからjquery.updnWatermark.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.updnWatermark.js"></script> <script type="text/javascript"> jQuery(document).ready(funct
div要素もリンクにするjavascript「jquery.biggerlink」
リンクと言えばaタグですが、ボックス単位の大きなdiv要素もリンクにしたくなります。 jquery.biggerlinkはそんな我が儘を叶えてくれるjavasrciptです。 sponsors 使用方法 jquery.biggerlinkからjquery.biggerlink.jsを、jQueryからjquery.js（v1.2.1）をダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.biggerlink.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#id名 div')
3ステップでツールチップを作成「jQuery Simple Tooltip」
ツールチップと呼ばれるその要素に関する詳細などをヒントっぽく表示する手法があり、フォームなどに使用するとユーザビリティの向上に役立てられます。 3ステップでこのツールチップを導入できるjQuery Simple Tooltipを紹介します。 sponsors 使用方法 STEP 1 jQuery Simple Tooltipからファイルをダウンロードします。 STEP 2 以下を記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.simpletooltip-min.js"></script> <script> $(function(){ $("#id名").simpletooltip(); }); </script>
jQueryでfaviconを表示させるJavaScript「favoriteIcon」
最近はfaviconがメジャー化してきて、多くのサイトで導入されています。 サイトを象徴する画像なので、リンクの近くに表示させておくとリンク先がわかりやすくなります。 jQueryプラグインの「favoriteIcon」を利用すると、簡単に外部リンクにfaviconをつけられます。 sponsors 使用方法 Add a favicon near external links with jQueryからjquery.favoriteIcon.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.favoriteIcon.js"></script> <script> $(
簡単・軽量の吹き出しJavaScript「vTip」
リンクや画像などにマウスを乗せると吹き出しのように説明を表示するJavaScriptがあります。 これを簡単かつ軽量のJavaScriptで実現したのが、jQueryプラグインの「vTip」です。 sponsors 使用方法 vTipからファイル一式をダウンロードします。 <link href="vtip.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="vtip.js"></script> ディレクトリ構造を維持しない場合、vtip.js内で吹き出しの矢印部分の画像指定をする必要があります。 あとは以下のように記述すれば完成です。
JavaScriptで文字サイズを変更する「jQuery Text Resizer Plugin」
サイトでよく見かける、文字サイズ（大・中・小）。 文字サイズが変更できるとなんだかユーザビリティに配慮した気になれます。 JavaScriptライブラリの「jQuery」プラグインjQuery Text Resizer Pluginを使用して実現してみましょう。 sponsors 使用方法 jQuery Text Resizer Pluginからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.textresizer.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script> $(f
フォントサイズを調整するJavaScript「fontScaler」
フォントのサイズをユーザーが調整できるサイトは多いですが、大中小と制作者側で決めてしまってよいのでしょうか？ jQueryプラグイン「fontScaler」は+-でも調整が可能です。 sponsors 使用方法 fontScalerからファイル一式をダウンロードします。 <link rel="stylesheet" type="text/css" href="jquery.fontSizer.css" media="screen" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.fontScaler.js"></script> <script type="text/javascript"> $(document).read
インライン型LightBoxを実現するJavaScript「jQuery.popeye」
昨今LightBoxスクリプトが広まり、さまざまな場所でオーバーレイが登場するのに辟易している人も多いでしょう。 jQuery.popeyeはJavaScriptライブラリ「jQuery」を使用し、ユーザーの視線を妨げない表示方法が可能です。 sponsors 使用方法 jQuery.popeyeから、jquery.popeye-0.2.1.js、jquery.easing.1.3.jsや画像ファイルを、jQueryからjquery.jsをダウロードします。 <link rel="stylesheet" type="text/css" href="jquery.popeye.css" media="screen" /> <link rel="stylesheet" type="text/css" href="styling.css" media="screen" /> <script ty
ページめくり風の画像ギャラリーを作成するjavascript「jqShuffle」
LightBoxの登場にインパクトがあったからか画像の表示方法がワンパターン化している気がします。 今回紹介するjqShuffleでは、画像を1枚1枚めくるようなギャラリーを作成することができます。 Flashではありそうですが、Javascriptでは一風味変わった表示方法です。 sponsors 使用方法 jqShuffleからjqshuffle.jsを、JavascriptライブラリのjQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jqshuffle" type="text/javascript"></script> <script type="text/javas
テキストエリアを入力内容に応じて自動でリサイズするjQueryプラグイン「autoResize」
フォームに設置するテキストエリアはある程度大きくしておきたいところですが、スペースをとるのは避けたい。 そんなあなたに朗報です。 jQueryプラグインのautoResizeで入力内容に応じてリサイズ可能になります。 sponsors 使用方法 autoResizeからautoresize.jquery.jsをjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="autoresize.jquery.js"></script> <script> $(function(){ $('#id名').autoResize({ onResize : function() { //リサイズ時の処理 $(th
入力内容を推測して候補を表示するJavaScript「jQuery Simple Filter」
フォームで項目を入力させるとき、県名など決まりきったものであれば、1文字目の入力で候補を挙げることがユーザビリティ上、好ましいです。 jQueryプラグインjQuery Simple Filterを利用するとJavaScriptを利用して簡単に作成できます。 sponsors 使用方法 jQuery Simple Filterからjquery.simpleFilter-0.5.js、jquery.quicksilver.jsを、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.quicksilver.js"></script> <script type="text/javas
フォームに入力を促すヒントを表示するJavaScript「jQuery Advisor plugin」
フォームの申し込み率を上げるためには、入力内容をわかりやすくすることが必要です。 jQuery Advisor pluginを利用することで、JavaScriptを利用して、ヒントを明示できコンバージョンの向上が期待できるかもしれません。 sponsors 使用方法 jQuery Advisor pluginからjquery-advisor.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery-advisor.js"></script> <script> $(document).ready(function() { $.formAdvisor(); }); </scrip
jQueryでカレンダーを表示するプラグイン「jMonthCalendar」
カレンダーを表示したい時、月ベースで一覧できると便利です。 JavaScriptライブラリ「jQuery」のプラグインjMonthCalendarでは、お手軽にカレンダーを作成可能です。 sponsors 使用方法 jMonthCalendarからjMonthCalendar-1.0.1.jsをjQueryからjquery.jsをダウロードします。 <link href="jMonthCal.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="/test/js/jquery-1.3.js"></script> <script type="text/javascript" src="/test/js/jMonthCalendar-1.0.1.js"></script> <script type=
jQueryベースのカレンダー作成javascript「jCalendar」
フォームなどでは日付を指定させることが多く、利便性が求められます。 jCalendarはjQueryベースでカレンダーを作成するjavascriptで、利用者のユーザビリティーを向上させることができます。 sponsors 使用方法 jCalendarからjcalendar.js、jcalendar.cssをjQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jcalendar.js" type="text/javascript"></script> <link rel="stylesheet" href="http://yourdomain/jcalendar.css" t
フォームの入力を限定するjavascript「MaskedInput」
フォームでは、電話番号や郵便番号、プロダクトIDなどの定型的な入力方式を固定することがユーザビリティの向上に役立つかも知れません。 digitalBushのMaskedInputでは、リアルタイムにフォームの入力方式をチェックすることができます。 sponsors 使用方法 MaskedInputのjquery.maskedinput-1.0.jsに加え、jQueryが必要になります。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.maskedinput-1.0.js" type="text/javascript"></script> 上記のようにhead内にスクリプトを埋め込み、入力方式を固定したいinputの
jQueryベースの日付選択javascript「jQueryDatePicker」
フォームなどで日付を入力してもらうときなどに、日付を視覚的に確認できると利用者にとって便利です。 また入力ミスが減るなどの利点があります。 kelvinluck.comのjQueryDatePickerを使用すると、日付選択が可能なフォームを作成することが出来ます。 sponsors 使用方法 ＊開始日を指定すると終了時を指定する際に、それ以前の日にちが選択できない方法。 jquery.js、date.js、jquery.dimensions.js、jquery.datePicker.js、datePicker.cssをダウンロードし、以下の様にheadに挿入します。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/date.j
自動文字参照javascript「jQuery Autocomplete」
フォームを作成する時に文字を入力すると自動で該当項目を示してくれるオートコンプリートがあります。 これを利用すると入力間違いが減少するなど訪問者・開設者の双方に役立ちます。 今回は、jQueryベースのjQuery Autocompleteを取り上げます。 sponsors 使用方法 jQuery Autocompleteからjquery.autocomplete.js、jquery.autocomplete.cssを、jQueryからjquery.jsをダウンロードします。 <link rel="stylesheet" media="screen" href="http://yourdomain/jquery.autocomplete.css" type="text/css"> <script src="http://yourdomain/jquery.js" type="text/ja
JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
JavaScriptでカレンダーを作る方法はいろいろありますが、なかなか満足のいくものは多くありません。 jCalはJavaScriptライブラリ「jquery」を使用し、お手軽かつクールなカレンダーを作成可能です。 sponsors 使用方法 jCalからファイル群をダウンロードします。 <script type="text/javascript" src="http://yourdomain/jquery.js"></script> <script type="text/javascript" src="http://yourdomain/jquery.animate.clip.js"></script> <script type="text/javascript" src="http://yourdomain/jCal.min.js"></script> <link rel="sty
時間を選択できるjavascript「jQuery.ptTimeSelect」
フォームでは日付のほかに時間を求めることがあります。 日付同様、時間にも人により様々な書き方があるので、定型の形式を選択できると利用者、制作者にとって便利になるでしょう。 jQuery.ptTimeSelectは視覚的にわかりやすい時間選択javascriptです。 sponsors 使用方法 jQuery.ptTimeSelectからダウンロードし、以下のスクリプトを書き込みます。 <script type="text/javascript" src="http://yourdomain/jquery.js"></script> <script type="text/javascript" src="http://www.skuare.net/test/js/dimensions.js"></script> <script type="text/javascript" src="http
JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
過去2度jQueryベースのカレンダーを紹介しました。 ・jQueryベースのカレンダー作成javascript「jCalendar」 ・JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」 今回は第3弾となるdynDateTimeです。 sponsors 使用方法 dynDateTimeからjquery.dynDateTime.js、calendar-win2k-cold-1.cssをダウンロードします。 またjQueryからjqueryy.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.dynDateTime.js"></script> <script
JavaScriptでフォームの入力項目をリアルタイムでチェックする「jQuery Form Validators」
フォームに間違った内容が入力された際に、どこがどう間違っているかを表示してくれるとわかりやすくなります。 jQuery Form ValidatorsならJavaScriptで実現可能です。 sponsors 使用方法 jQuery Form Validatorsからファイル一式をダウロードします。 <link type="text/css" rel="stylesheet" href="validator.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="validator_0.1.js"></script> 上記記述後、フォームを以下のルールで書き込めば完成です。 <form> お名前:<input type="text"
JavaScriptライブラリ「jQuery」でカレンダーを作る「FullCalendar」
JavaScriptライブラリの「jQuery」を使用してカレンダーを作ります。 via：FullCalendar - Full-sized Calendar jQuery Plugin sponsors 使用方法 FullCalendar - Full-sized Calendar jQuery Pluginからファイル一式をダウンロードします。 <link rel="stylesheet" href="fullcalendar.css" media="all"> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui.core2.js"></script> <script type="text/javascript" src="ui.dra
ハイクオリティなカラーピッカーJavaScript「GcColor」
色を選択させることはあまりないでしょうが、そんな要素だからこそリッチにしておくとユーザーの印象も変わるでしょう。 jQueryプラグインのGcColorは、jQuery UIを使用するなど、操作面でハイクオリティなカラーピッカーとなっています。 sponsors 使用方法 GcColorからファイル一式をダウロードします。 <link rel="stylesheet" type="text/css" href="gccolor.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.ui.all.js"></script> <script type="text/javascript" src="jquery.gccolo
表を読み取りやすくするjavascript「tableHover plugin」
サイトでは表をテーブルで作成することが多いですが、縦横に項目が増えていくと、どこを示しているのか判別しづらくなります。 tableHover pluginを利用すると、マウスを載せた（またはクリックした）セルを着色することができ、読み取りやすい表を作成することができます。 sponsors 使用方法 tableHover pluginからjquery.tablehover.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="http://yourdomain/jquery.js"></script> <script type="text/javascript" src="http://yourdomain/jquery.tablehover.js"></script> <script type="text/
jQuery 642 プラグイン：skuare.net
jQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavaScriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト／リンク関連、その他、日本語未解説のjQueryプラグインを分類して紹介しています。 初心者でもすぐにリッチなサイトを作成可能ですので、ぜひjQueryプラグインをご利用ください Image Menu Form Text/Link Other W/O_JP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA