JavaScript Library Archive
Just another WordPress weblog
2011-09-18T10:18:29Z
http://javascript.webcreativepark.net/feed/atom
WordPress
admin
<![CDATA[アニメーションをCSS3のtransitionで行う「jQuery transition Animate」]]>
http://javascript.webcreativepark.net/?p=273
2011-02-03T04:09:46Z
2011-02-03T04:09:03Z
<p>配布元：<a href="http://blog.webcreativepark.net/2010/09/17-183446.html">CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」[to-R]</a><br />
ライセンス：MITライセンス</p>
<p>「jQuery transition Animate」はCSS3のtransitionアニメーションを利用するためのjQueryプラグインです。jQueryではanimateメソッドがありますが負荷が高く、iPhone / iPad / Androidなどに搭載されているMobile Safariではスムーズに動かないこともあります。そういった際に利用できるのがこのライブラリです。</p>
<h3>利用方法</h3>
<p>記述方法はtransitionAnimateメソッドで指定しanimateメソッドと同じように記述します。</p>
<pre><code>$(セレクタ).transitionAnimate(params, duration, easing, [callback])</code></pre>
<p>第一引数のparamsはCSSの値を{height: “100px”}のようなオブジェクトで指定します。</p>
<p>第二引数にはアニメーションの動作時間が指定できます。1sのような秒での指定と500msのようなミリ秒での指定ができます。normalとかslowは動きません。</p>
<p>第三引数には次のようなeasing名が指定できます。</p>
<p>ease ：滑らかに始まり滑らかに終わる<br />
linear：一定<br />
ease-in：ゆっくり始まる<br />
ease-out：ゆっくり終わる<br />
ease-in-out：ゆっくり始まってゆっくり終わる</p>
<p>第一～第三までの引数は必須ですので省略できません。</p>
<p>第四引数にコールバック関数が指定できます。</p>
<pre><code>$(function(){
$("div").toggle(function(){
$(this).transitionAnimate({"width":"300px","height":"300px"},"500ms","ease-in",function(){
$(this).css("background","blue");
})
},function(){
$(this).transitionAnimate({"width":"100px","height":"100px"},"600ms","ease-in",function(){
$(this).css("background","red");
})
})
})</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jquerytransitionanimate/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/qfm-DGoFgF4Oqm7_zOgI203ff1w/0/da"><img src="http://feedads.g.doubleclick.net/~a/qfm-DGoFgF4Oqm7_zOgI203ff1w/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/qfm-DGoFgF4Oqm7_zOgI203ff1w/1/da"><img src="http://feedads.g.doubleclick.net/~a/qfm-DGoFgF4Oqm7_zOgI203ff1w/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[iPhone / iPadなどでposition: fixedが利用できる「iScroll」]]>
http://javascript.webcreativepark.net/?p=268
2011-01-28T20:31:58Z
2011-01-28T20:23:48Z
<p>配布元：<a href="http://cubiq.org/iscroll">iScroll</a><br />
ライセンス:MIT-License</p>
<p>iPhone / iPad、Androidなどに搭載されているmobile WebKitではCSSのposition: fixedが利用できませんが、iScrollを利用することでこれらのプロパティを利用したようにヘッダーやフッターの固定が可能になります。</p>
<h3>利用方法</h3>
<p>まずは、head要素内などで配布サイトよりダウンロードしたライブラリ本体を読み込みます。</p>
<pre><code><script src="iscroll.js"></script></code></pre>
<p>HTMLでは次のようにコンテンツ部分をwrapperとscrollerというidをつけたdiv要素で包んでおきます。</p>
<pre><code><body>
<header id="header">ヘッダー部分</header>
<div id="wrapper">
<div id="scroller">
コンテンツ部分
</div>
</div>
<footer id="footer">フッター部分</footer>
</body></code></pre>
<p>#wrapperには次のようなCSSを適応させます。</p>
<pre><code>#wrapper {
position:relative;
z-index:1;
width:100% ;
overflow:hidden;
}</code></pre>
<p>#wrapperにはheightの指定も必要ですので次のようなスクリプトでheightを算出します。</p>
<pre><code>function setHeight() {
var headerH = document.getElementById('header').offsetHeight,
footerH = document.getElementById('footer').offsetHeight,
wrapperH = window.innerHeight - headerH - footerH;
document.getElementById('wrapper').style.height = wrapperH + 'px';
}
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false);
function loaded() {
setHeight();
}
document.addEventListener('DOMContentLoaded', loaded, false);</code></pre>
<p>これにより#wrapperのheightが算出されます。</p>
<p>先ほど作成したloaded関数にiScrollの設定を追加し、touchmoveイベントを停止することでiScrollが利用可能になります。</p>
<pre><code>var myScroll;
function loaded() {
setHeight();
myScroll = new iScroll('scroller', {desktopCompatibility:true});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/iScroll/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/NV9BZIKQwejqh8fWnmZaVuyqxYI/0/da"><img src="http://feedads.g.doubleclick.net/~a/NV9BZIKQwejqh8fWnmZaVuyqxYI/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/NV9BZIKQwejqh8fWnmZaVuyqxYI/1/da"><img src="http://feedads.g.doubleclick.net/~a/NV9BZIKQwejqh8fWnmZaVuyqxYI/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[ダブルタップイベントを利用可能にするjQueryプラグイン「jquery.event.dblTap.js」]]>
http://javascript.webcreativepark.net/?p=265
2011-01-28T19:39:43Z
2011-01-26T22:34:03Z
<p>配布元:<a href="http://blog.webcreativepark.net/2010/09/08-204058.html">iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」[to-R]</a><br />
ライセンス:MITライセンス</p>
<p>「jquery.event.dblTap.js」はiPhone/iPad、Androidなどのスマートフォンでダブルタップイベントが利用可能になるjQueryプラグインです。</p>
<h3>利用方法</h3>
<p>配布サイトよりダウンロードした「jquery.event.dblTap.js」をjQuery本体の後に読み込みます。</p>
<pre><code><script src="jquery-.min.js"></script>
<script src="jquery.event.dblTap.js"></script></code></pre>
<p>ダブルタップイベントを設定したい要素に対して「dblTap」をbindすることでダブルタップの実装が可能です。</p>
<pre><code>$("button").bind("dblTap",function(){
alert("ダブルタップ");
});</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/dbltap/">サンプル</a></p>
<p>デフォルトでは500ミリ秒以内に2回目のタップされたらダブルタップと判定してますが、次のように「$.event.special.dblTap.delay」で変更することも可能です。</p>
<pre><code>$.event.special.dblTap.delay = 400;
$("button").bind("dblTap",function(){
alert("ダブルタップ");
});</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/dbltap/index2.html">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/5d_LP3mJANsdkgzmsshpMI7oL08/0/da"><img src="http://feedads.g.doubleclick.net/~a/5d_LP3mJANsdkgzmsshpMI7oL08/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/5d_LP3mJANsdkgzmsshpMI7oL08/1/da"><img src="http://feedads.g.doubleclick.net/~a/5d_LP3mJANsdkgzmsshpMI7oL08/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[Flashの読み込みを簡単にする「SWFObject」]]>
http://javascript.webcreativepark.net/?p=261
2011-01-26T05:42:28Z
2011-01-26T05:41:41Z
<p>配布元 : <a href="http://code.google.com/p/swfobject/">swfobject – Project Hosting on Google Code</a><br />
ライセンス : MIT License</p>
<p>SWFObject は Adobe の Flash コンテンツをWebページに簡単に取り込むことができるJavaScriptライブラリです。従来Flashコンテンツはobject要素やembed要素などを組み合わせて取り込まなくてはいけませんでしたが、SWFObjectを利用することでよりスマートにWebページを読み込むことが可能になりました。</p>
<h3>利用方法</h3>
<p>SWFObjectの読み込みは配布サイトで配布されているファイルを読み込んでもよいですが、<a href="http://code.google.com/intl/ja/apis/libraries/devguide.html#swfobject">Google Libraries API</a>などのCDNを利用することでより簡単に読み込むことができます。</p>
<pre><code><script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script></code></pre>
<p>Flashを表示したい箇所には次のように任意のidをふった要素を配置し内側にはFlashやJavaScriptが表示されない環境向けの代替コンテンツを記述します。</p>
<pre><code><div id="myContent">
<p>代替コンテンツ</p>
</div></code></pre>
<p>SWFObjectはscript要素内に次のようなembedSWFメソッドを実行します。</p>
<pre><code>swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");</code></pre>
<p>embedSWFメソッドでは次のようなオプションをとることができます。</p>
<pre><code>swfobject.embedSWF(
"swfファイルへのパス" , //必須
"置き換えるID" , //必須
"swfの横幅" , //必須
"swfの高さ" , //必須
"必要とするFlashPlayerのバージョン" , //必須
"expressInstall.swfのURI" , //任意
"flashvarsオブジェクト" , //任意
"paramsオブジェクト" , //任意
"attributesオブジェクト" ,//任意
"コールバック関数"//任意
);</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/SWFObject/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/2gViD57DYNTJ29Ipa2cKi4YNMFI/0/da"><img src="http://feedads.g.doubleclick.net/~a/2gViD57DYNTJ29Ipa2cKi4YNMFI/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/2gViD57DYNTJ29Ipa2cKi4YNMFI/1/da"><img src="http://feedads.g.doubleclick.net/~a/2gViD57DYNTJ29Ipa2cKi4YNMFI/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[jQuery公式のテンプレートplugin 「jQuery Templates」]]>
http://javascript.webcreativepark.net/?p=256
2011-09-18T10:18:29Z
2010-10-06T10:55:01Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/10/20101006_01.jpg" alt="jQuery公式のテンプレートplugin 「jQuery Templates」" title="20101006_01" width="450" height="300" class="alignnone size-full wp-image-257" /></p>
<p>配布元:<a href="http://github.com/jquery/jquery-tmpl/">jquery’s jquery-tmpl at master – GitHub</a><br />
リファレンス:<a href="http://api.jquery.com/category/plugins/templates/">jQuery Templates</a></p>
<p>jQueryプロジェクトからいくつかの<a href="http://api.jquery.com/category/plugins/">公式プラグイン</a>が公開されました。そのひとつが「jQuery Templates」。これはJavaScriptで利用できるテンプレートエンジンです。</p>
<h3>利用方法</h3>
<p>本エントリー執筆時点では<a href="http://github.com/jquery/jquery-tmpl/">GitHub</a>からダウンロードして利用できますが、<del>jQuery 1.5からはjQuery本体に組み込まれ、プラグインなしで利用することが出来ます。</del><ins>(本体への組み込みは延期されました)</ins>また、MicrosoftのCDNでも公開されていますので次のような記述で読み込むことも可能です。</p>
<pre><code><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script></code></pre>
<h3>基本的な利用方法</h3>
<p>基本的にテンプレート部分とデータ部分を作成して、これらを関連付けることでテンプレートにデータが挿入された状態を作成します。</p>
<p>データ部分はXMLやJSON、JavaScriptのオブジェクトなどを利用して作成します。</p>
<pre><code>var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];</code></pre>
<p>この場合「Name」と「ReleaseYear」というプロパティを持つオブジェクトをmoviesという配列に保存しています。</p>
<p>テンプレート部分は雛形として、通常のHTML中に${….}としてデータをセットする箇所を設定します。</p>
<pre><code>var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";</code></pre>
<p>templateメソッドを利用し、先ほど作成した雛形「markup」をテンプレート化します。第１引数にテンプレート名が設定できます。</p>
<pre><code>$.template( "movieTemplate", markup );</code></pre>
<p>tmplメソッドを利用してテンプレートとデータを関連付けます。これでHTMLが関連付けられますのでappendToメソッドを利用してHTML文章中に挿入しましょう。</p>
<pre><code>$.tmpl( "movieTemplate", movies ).appendTo( "#movieList");</code></pre>
<p>これがjQuery Templatesの基本的な利用方法です。</p>
<p><a href="http://javascript.webcreativepark.net/sample/jquery_templates/">サンプル</a></p>
<h3>テンプレート部分の分離</h3>
<p>次のようにするとテンプレート部分をJavaScriptコードから分離することも出来ます。script要素のtype属性に「text/x-jquery-tmpl」をセットすることで、その内側にテンプレートを記述することが出来ます。</p>
<pre><code><ul id="movieList">
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
</ul></code></pre>
<p>上記は直感的ですがul要素がscript要素を内包してしまいますので次のように書いたほうが良いでしょう。</p>
<pre><code><ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script></code></pre>
<p>JavaScriptではテンプレートとデータを関連付けるだけでよいので非常にシンプルなコードになります。</p>
<pre><code>var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
$( "#movieTemplate").tmpl(movies).appendTo( "#movieList" )</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jquery_templates/index2.html">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/svCI_WysnbQ8UmGFJSE2cczajbQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/svCI_WysnbQ8UmGFJSE2cczajbQ/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/svCI_WysnbQ8UmGFJSE2cczajbQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/svCI_WysnbQ8UmGFJSE2cczajbQ/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[ページ内リンク用のスムーズナビゲーションを作成できる「jQuery One Page Navigation Plugin」]]>
http://javascript.webcreativepark.net/?p=251
2010-10-03T17:21:10Z
2010-10-03T17:21:10Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/10/jquery_one_page_navigation_plugin.jpg" alt="ページ内リンク用のナビゲーションを作成できる「jQuery One Page Navigation Plugin」" title="ページ内リンク用のナビゲーションを作成できる「jQuery One Page Navigation Plugin」" width="450" height="200" class="alignnone size-full wp-image-252" /></p>
<p>配布元:<a href="http://trevordavis.net/blog/jquery-one-page-navigation-plugin/">jQuery One Page Navigation Plugin</a></p>
<p>jQuery One Page Navigation Pluginはページ内リンクナビゲーションをスムーズスクロールに変換することが出来るJavaScriptライブラリです。<a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">jQuery ScrollTo plugin.</a>を合わせて利用することで柔軟性の高いスクロールを実装しています。</p>
<h3>利用方法</h3>
<p>jQueryとQuery ScrollTo pluginそして、ダウンロードした「jquery.nav.min.js」の読み込みを行います。</p>
<pre><code><script src="jquery.js"></script>
<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.min.js"></script></code></pre>
<p>ナビゲーションはul/liのリストで作成します。現在の表示位置に「class=”current”」を追加しておきます。このclassはナビゲーションがクリックされた際に新しい表示位置のリンクが「class=”current”」に変更されます。</p>
<pre><code><ul id="nav">
<li class="current"><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li"><a href="#section-3">Section 3</a></li>
</ul></code></pre>
<p>メインのコンテンツはナビゲーションのhref属性に対応したid属性で作成します。</p>
<pre><code><div id="section-1">
<strong>Section 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-2">
<strong>Section 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-3">
<strong>Section 3</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div></code></pre>
<p>onePageNavメソッドを実行することでナビゲーションがスムーズナビゲーションに変換されます。</p>
<pre><code>$(document).ready(function() {
$('#nav').onePageNav();
});</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jQuery_One_Page_Navigation_Plugin/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/9ovLAi4CzioLKIpvRXs9RT3MV2E/0/da"><img src="http://feedads.g.doubleclick.net/~a/9ovLAi4CzioLKIpvRXs9RT3MV2E/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/9ovLAi4CzioLKIpvRXs9RT3MV2E/1/da"><img src="http://feedads.g.doubleclick.net/~a/9ovLAi4CzioLKIpvRXs9RT3MV2E/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[シンプルなカラーピッカー「the jQuery Color Picker」]]>
http://javascript.webcreativepark.net/?p=248
2010-10-03T17:27:39Z
2010-09-22T10:14:26Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/09/20100922_01.jpg" alt="" title="20100922_01" width="450" height="250" class="size-full wp-image-249" /></p>
<p>配布元：<a href="http://www.intelliance.fr/jquery/color_picker/">Download the jQuery Color Picker and the Demo</a><br />
License: Free</p>
<p>the jQuery Color Pickeはカラーピッカーを実装できる非常にシンプルなプラグインです。</p>
<h3>利用方法</h3>
<p>まずはJavaScriptファイルとCSSファイルを読み込みます。結構な量です。</p>
<pre><code><script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jquery/ifx.js" type="text/javascript"></script>
<script src="js/jquery/idrop.js" type="text/javascript"></script>
<script src="js/jquery/idrag.js" type="text/javascript"></script>
<script src="js/jquery/iutil.js" type="text/javascript"></script>
<script src="js/jquery/islider.js" type="text/javascript"></script>
<script src="js/jquery/color_picker/color_picker.js" type="text/javascript"></script>
<link href="js/jquery/color_picker/color_picker.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<link rel="stylesheet" href="js/jquery/color_picker/color_picker-ie6.css" type="text/css">
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" href="js/jquery/color_picker/color_picker-ie7.css" type="text/css">
<![endif]--></code></pre>
<p>カラーピッカー部分のHTMLは次のようになります。</p>
<pre><code><input type="text" id="myhexcode" />
<a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><span id="myshowcolor"> </span></a></code></pre>
<p>#myhexcodeには選択後の色コードが入り、#myshowcolorをクリックした際にカラーピッカーが立ち上がります。#myshowcolorはCSSで次のように装飾しておくと良いでしょう。</p>
<pre><code>#myshowcolor{
display:inline-block;
width:15px;
height:15px;
border:1px solid black;
}</code></pre>
<p>スクリプトでは「$.ColorPicker.init()」を実行するとカラーピッカーが設定されます。</p>
<pre><code>$(function(){
$.ColorPicker.init();
});</code></pre>
<p>色選択後のコールバック関数を設定したい場合は「myokfunc」という関数に設定しておきます。</p>
<pre><code>function myokfunc(){
alert("This is my custom function which is launched after setting the color");
}</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jQColorPicker/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/JsLOsBEZySU7ZnYKvoAJsxHy_nM/0/da"><img src="http://feedads.g.doubleclick.net/~a/JsLOsBEZySU7ZnYKvoAJsxHy_nM/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/JsLOsBEZySU7ZnYKvoAJsxHy_nM/1/da"><img src="http://feedads.g.doubleclick.net/~a/JsLOsBEZySU7ZnYKvoAJsxHy_nM/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[ページめくりを実装するjQueryプラグイン「jPageFlipper 」]]>
http://javascript.webcreativepark.net/?p=244
2011-01-30T23:25:45Z
2010-09-11T15:15:39Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/09/jPageFlipper.jpg" alt="ページめくりを実装するjQueryプラグイン「jPageFlipper 」" title="jPageFlipper" width="450" height="250" class="alignnone size-full wp-image-245" /></p>
<p>配布元：<a href="http://jpageflipper.codeplex.com/">jPageFlipper</a><br />
ライセンス：MIT License </p>
<p>「jPageFlipper 」は画像のページめくりを実装する為のjQueryプラグインです。 HTML 5 canvasで開発されておりGoogle Chrome 4以上, Firefox 3.5以上, Safari 4以上, Opera とiPhone、 IPadなどで動作可能です。</p>
<h3>利用方法</h3>
<p>まずは、ｊＱｕｅｒｙ本体とjquery-vsdoc.js、jquery.pageFlipper.jsをhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="javascripts/jquery.pageFlipper.js"></script></code></pre>
<p>HTMLはul/liのリスト型で作成、ul要素に「lstImages」、「imagesSource」を追加しておきます。</p>
<pre><code><ul id="lstImages" class="imagesSource">
<li><img alt=" " src="images/photo1.jpg" /></li>
<li><img alt=" " src="images/photo2.jpg" /></li>
<li><img alt=" " src="images/photo3.jpg" /></li>
<li><img alt=" " src="images/photo4.jpg" /></li>
<li><img alt=" " src="images/photo5.jpg" /></li>
<li><img alt=" " src="images/photo6.jpg" /></li>
</ul></code></pre>
<p>次のようなスクリプトでページングを実装します。</p>
<pre><code>$(function(){
$('#lstImages').pageFlipper({
fps: 20,
easing: 0.2,
backgroundColor: '#CCC',
pageWidth: 200,
pageHeight: 200
});
});</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jpageflipper/">サンプル</a></p>
<p>「jPageFlipper 」では次のようなオプションをとる事ができます。</p>
<table>
<tr>
<th>className</ht>
<td>ul要素のclass名</td>
</tr>
<tr>
<th>pageWidth</ht>
<td>１ページの横幅</td>
</tr>
<tr>
<th>pageHeight</ht>
<td>１ページの高さ</td>
</tr>
<tr>
<th>easing</ht>
<td>アニメーションのイージング</td>
</tr>
<tr>
<th>fps</ht>
<td>アニメーションのフレーム数</td>
</tr>
<tr>
<th>defaultPageColor</ht>
<td>デフォルトのページ色</td>
</tr>
<tr>
<th>backgroundColor</ht>
<td>ＴOPページと最後のページの色</td>
</tr>
<tr>
<th>cornerSide</ht>
<td>左サイトからの距離</td>
</tr>
</table>
<p>また、作者のサイトではこのプラグインの実装テクニックについて解説されています。<a href="http://www.cynergysystems.com/blogs/page/rickbarraza?entry=the_secret_behind_the_page">The Secret Behind the Page Flip Technique</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/hfyvfrl4TJ8s0UEf-Idz6dhNGjU/0/da"><img src="http://feedads.g.doubleclick.net/~a/hfyvfrl4TJ8s0UEf-Idz6dhNGjU/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/hfyvfrl4TJ8s0UEf-Idz6dhNGjU/1/da"><img src="http://feedads.g.doubleclick.net/~a/hfyvfrl4TJ8s0UEf-Idz6dhNGjU/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[ソースコードをハイライト表示する「SyntaxHighlighter」]]>
http://javascript.webcreativepark.net/?p=234
2010-05-12T11:19:03Z
2010-05-12T09:32:59Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/05/SyntaxHighlighter.jpg" alt="ソースコードをハイライト表示する「SyntaxHighlighter」" title="ソースコードをハイライト表示する「SyntaxHighlighter」" width="450" height="150" class="alignnone size-full wp-image-235" /></p>
<p>配布元：<a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter">SyntaxHighlighter – Alex Gorbatchev</a><br />
ライセンス：LGPL 3</p>
<p>SyntaxHighlighterはソースコードを簡単にハイライト表示することが可能なJavaScriptライブラリです。<br />
JavaScriptやHTML、CSS、PHP、Python、Rubyなど様々な言語のシンタックスハイライトが可能です。</p>
<h3>利用方法</h3>
<p>配布元よりダウンロードしたSyntaxHighlighter.cssとshThemeDefault.css、shCore.jsをhead要素内で読み込みます。</p>
<pre><code><link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
<script type="text/javascript" src="scripts/shCore.js"></script></code></pre>
<p>shThemeDefault.cssを他のテーマに変更することでハイライトのデザインを変更することも可能です。</p>
<p>次に利用したい言語に合わせて専用のJavaScriptファイルを読み込みます。<br />
CSSで利用したい場合はhBrushCss.jsを、JavaScriptで利用したい場合はshBrushJScript.jsを、HTMLで利用したい場合はshBrushXml.jsをといった感じです（詳しくは最後の表を参照してください）。</p>
<pre><code><script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script></code></pre>
<p>次にJavaScriptで設定を行います。</p>
<p>ClipboardSwf ではクリップボード保存用のswf(デフォルトではscriptsフォルダの中)の場所を設定できます。</p>
<pre><code>SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
SyntaxHighlighter.all();
</code></pre>
<p>シンタックスハイライトは次のようにpre要素に対して先ほど設定したclass属性に利用する言語の種類を設定することで利用できます。</p>
<pre><code><pre class="brush: css;">*{
font-size:12px;
}</pre></code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/SyntaxHighlighter/">サンプル</a></p>
<table>
<tr>
<th>言語</th>
<th>クラス名</th>
<th>読み込むファイル名</ht><br />
</tr>
<td>ActionScript3</td>
<td> as3, actionscript3
</td>
<td> shBrushAS3.js
</td>
</tr>
<tr>
<td>Bash/shell
</td>
<td> bash, shell
</td>
<td> shBrushBash.js
</td>
</tr>
<tr>
<td>ColdFusion
</td>
<td> cf, coldfusion
</td>
<td> shBrushColdFusion.js
</td>
</tr>
<tr>
<td>C#</td>
<td> c-sharp, csharp
</td>
<td> shBrushCSharp.js
</td>
</tr>
<tr>
<td>C++</td>
<td> cpp, c
</td>
<td> shBrushCpp.js
</td>
</tr>
<tr>
<td>CSS</td>
<td> css
</td>
<td> shBrushCss.js
</td>
</tr>
<tr>
<td>Delphi</td>
<td> delphi, pas, pascal
</td>
<td> shBrushDelphi.js
</td>
</tr>
<tr>
<td>Diff</td>
<td> diff, patch
</td>
<td> shBrushDiff.js
</td>
</tr>
<tr>
<td>Erlang</td>
<td> erl, erlang
</td>
<td> shBrushErlang.js
</td>
</tr>
<tr>
<td>Groovy</td>
<td> groovy
</td>
<td> shBrushGroovy.js
</td>
</tr>
<tr>
<td>JavaScript</td>
<td> js, jscript, javascript
</td>
<td> shBrushJScript.js
</td>
</tr>
<tr>
<td>Java</td>
<td> java
</td>
<td> shBrushJava.js
</td>
</tr>
<tr>
<td>JavaFX</td>
<td> jfx, javafx
</td>
<td> shBrushJavaFX.js
</td>
</tr>
<tr>
<td>Perl</td>
<td> perl, pl
</td>
<td> shBrushPerl.js
</td>
</tr>
<tr>
<td>PHP</td>
<td> php
</td>
<td> shBrushPhp.js
</td>
</tr>
<tr>
<td>Plain Text</td>
<td> plain, text
</td>
<td> shBrushPlain.js
</td>
</tr>
<tr>
<td>PowerShell</td>
<td> ps, powershell
</td>
<td> shBrushPowerShell.js
</td>
</tr>
<tr>
<td>Python</td>
<td> py, python
</td>
<td> shBrushPython.js
</td>
</tr>
<tr>
<td>Ruby</td>
<td> rails, ror, ruby
</td>
<td> shBrushRuby.js
</td>
</tr>
<tr>
<td>Scala</td>
<td> scala
</td>
<td> shBrushScala.js
</td>
</tr>
<tr>
<td>SQL</td>
<td> sql
</td>
<td> shBrushSql.js
</td>
</tr>
<tr>
<td>Visual Basic</td>
<td> vb, vbnet
</td>
<td> shBrushVb.js
</td>
</tr>
<tr>
<td>XML
</td>
<td> xml, xhtml, xslt, html, xhtml
</td>
<td> shBrushXml.js
</td>
</tr>
</table>
<p><a href="http://feedads.g.doubleclick.net/~a/eh4f7Jh05PFnhUtKm2vMDqsbkZ0/0/da"><img src="http://feedads.g.doubleclick.net/~a/eh4f7Jh05PFnhUtKm2vMDqsbkZ0/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/eh4f7Jh05PFnhUtKm2vMDqsbkZ0/1/da"><img src="http://feedads.g.doubleclick.net/~a/eh4f7Jh05PFnhUtKm2vMDqsbkZ0/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[マウスオーバーでtwitterのユーザー情報を表示する「twttrFloatTip」]]>
http://javascript.webcreativepark.net/?p=230
2010-04-22T10:39:27Z
2010-04-22T10:39:27Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/04/twttrFloatTip.jpg" alt=" マウスオーバーでtwitterのユーザー情報を表示する「twttrFloatTip」" title="twttrFloatTip" width="450" height="150" class="alignnone size-full wp-image-231" /></p>
<p>配布元：<a href="http://moto-mono.net/2010/03/17/twitter-float-tip.html">TwitterのHover Cardを実装するjQueryプラグイン twttrFloatTip :: 5509(+1)</a><br />
ライセンス：MITライセンス</p>
<p>twttrFloatTipは マウスオーバーでtwitterのユーザー情報を表示する為のjQueryプラグインです。</p>
<h3>利用方法</h3>
<p>まずは、jQuery本体と配布元よりダウンロードしたtwttrFloatTip.jsをhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="twttrFloatTip.js"></script></code></pre>
<p>次にtwttrFloatTip.cssも読み込みます。この際に同梱されいているimgフォルダと同じ階層にフォルダを作成しその中にCSSファイルを入れておく様にしてください。画像のパスがずれて画像が表示されなくなる恐れがあります。</p>
<p>css/twttrFloatTip.css<br />
img/画像ファイル</p>
<pre><code><link type="text/css" rel="stylesheet" href="./css/twttrFloatTip.css" /></code></pre>
<p>ユーザー情報を表示したいa要素には任意のclass名を付け、href属性にtwitterのURLを記述しておきます。</p>
<pre><code><a href="http://twitter.com/KazumaNishihata" class="tw">@KazumaNishihata</a></code></pre>
<p>次のコードでtwttrFloatTipを実行すればユーザー情報が表示されるようになります。</p>
<pre><code>jQuery(function($){
$('a.tw').twttrFloatTip();
});</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/twttrFloatTip/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/HN9au_q2GD5tZYm_VgxGMItNQQc/0/da"><img src="http://feedads.g.doubleclick.net/~a/HN9au_q2GD5tZYm_VgxGMItNQQc/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/HN9au_q2GD5tZYm_VgxGMItNQQc/1/da"><img src="http://feedads.g.doubleclick.net/~a/HN9au_q2GD5tZYm_VgxGMItNQQc/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[cookieを簡単に取り扱う「jQuery Cookie」]]>
http://javascript.webcreativepark.net/?p=224
2010-04-22T10:41:05Z
2010-04-08T04:59:08Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/04/jQuery-Cookie.jpg" alt="cookie を簡単に取り扱う「jQuery Cookie」" title="cookie を簡単に取り扱う「jQuery Cookie」" width="450" height="150" class="alignnone size-full wp-image-228" /></p>
<p>配布元：<a href="http://plugins.jquery.com/project/Cookie">Plugins | jQuery Plugins jQuery Cookie</a><br />
ライセンス：MITライセンス</p>
<p>「jQuery Cookie」はJavaScriptで取り扱いがめんどくさいcookieについて簡単に取り扱えるようにするためのjQueryプラグインです。</p>
<h3>利用方法</h3>
<p>まずは、jQuery本体と配布元よりダウンロードしたjquery.cookie.jsをhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script></code></pre>
<p>cookieに値を保存するには、次のように$.cookieに対してキーと保存する値を指定して保存します。</p>
<pre><code>$.cookie("キー",保存する値);</code></pre>
<p>cookieより値を取り出すには保存時に設定したキーを元に取り出します。</p>
<pre><code>$.cookie("キー");</code></pre>
<p>例えば次のようなスクリプトで、cookieの値の保存や取出しが可能です。</p>
<pre><code>$(function(){
if($.cookie("sample")){
$("h1").text("cookieの中身は"+$.cookie("sample")+"です。")
}
$("#button").click(function(){
$.cookie("sample",$("#text").val());
location.href="index.html"
})
})</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jQuery-Cookie/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/xXLndlwbcz0Zy_JV0ygbdwtFUS8/0/da"><img src="http://feedads.g.doubleclick.net/~a/xXLndlwbcz0Zy_JV0ygbdwtFUS8/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/xXLndlwbcz0Zy_JV0ygbdwtFUS8/1/da"><img src="http://feedads.g.doubleclick.net/~a/xXLndlwbcz0Zy_JV0ygbdwtFUS8/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[jQuery でCSVデータを簡単に取り扱える「jQuery CSV」]]>
http://javascript.webcreativepark.net/?p=219
2010-03-28T11:11:35Z
2010-03-28T11:10:04Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/03/20100328_01.jpg" alt="jQuery CSV" title="jQuery CSV" width="450" height="150" class="alignnone size-full wp-image-220" /></p>
<p>配布元：<a href="http://plugins.jquery.com/project/csv">Plugins | jQuery Plugins | CSV</a><br />
ライセンス：Apache License, Version 2.0</p>
<p>jQuery CSVはjQuery でCSVデータを簡単に取り扱うことができるjQueryプラグインです。</p>
<h3>利用方法</h3>
<p>次にようにCSVデータに対して$.csv()(CSVデータ)を実行することでcsvデータを配列に変換することが出来ます。</p>
<pre><code>var csv = $.csv()(CSVデータ)</code></pre>
<p>CSVデータは$.get()などのjQueryのAjaxメソッドを利用して取得します。</p>
<pre><code>$.get('data.csv',function(data){
//Ajax後の処理
})</code></pre>
<p>つまり、次のようなJavaScriptを実行することでCSVファイル（<a href="http://javascript.webcreativepark.net/sample/jquery_csv/data.csv">data.csv</a>）のデータをテーブルとして表示することが出来ます。</p>
<pre><code>$(function(){
$.get('data.csv',function(data){
var csv = $.csv()(data);
$(csv).each(function(){
if(this[0] && this[1] && this[2] && this[3]){
$("#csv").append("<tr><td>"+this[0]+"</td><td>"+this[1]+"</td><td>"+this[2]+"</td><td>"+this[3]+"</td></tr>");
}
})
})
})</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jquery_csv/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/QcC319jM_GS_l2YFFkBxWQQODc4/0/da"><img src="http://feedads.g.doubleclick.net/~a/QcC319jM_GS_l2YFFkBxWQQODc4/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/QcC319jM_GS_l2YFFkBxWQQODc4/1/da"><img src="http://feedads.g.doubleclick.net/~a/QcC319jM_GS_l2YFFkBxWQQODc4/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[簡単にフォームの入力チェックが行えるjquery.validate.js]]>
http://javascript.webcreativepark.net/?p=215
2010-03-25T00:31:37Z
2010-03-25T00:31:37Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/03/20100325_01.jpg" alt="簡単にフォームの入力チェックが行えるjquery.validate.js" title="簡単にフォームの入力チェックが行えるjquery.validate.js" width="450" height="150" class="alignnone size-full wp-image-216" /></p>
<p>配布元：<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">bassistance.de » jQuery plugin: Validation</a><br />
ライセンス：MIT/GPL</p>
<p>jquery.validate.jsは入力フォームのバリデーション（チェック）を簡単に実装することが出来るjQueryプラグインです。</p>
<h3>利用方法</h3>
<p>利用方法はまず、jQuery本体と配布元よりダウンロードしてきた「jquery.curvycorners.min.js」をhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script></code></pre>
<p>バリデーションを行いたいのが次のようなHTMLの場合、</p>
<pre><code><form method="post">
<ul>
<li>名前 <input name="name" type="text" /></li>
<li>メール <input name="mail" type="text" /></li>
<li>url <input name="url" type="text" /></li>
</ul>
<input type="submit" name="Submit" value="Submit"/>
</form></code></pre>
<p>JavaScriptで次のようの設定を行うとバリデーションを実装することが出来ます。</p>
<pre><code>$(function(){
$("form").validate({
rules: {
name :{
required: true
},
mail :{
required: true,
email: true
},
url :{
required: true
}
},
messages: {
name :{
required: "お名前を入力してください"
},
mail :{
required: "メールアドレスを入力してください",
email: "正しいメールアドレスを入力してください"
},
url :{
required: "URLを入力してください"
}
}
});
})</code></pre>
<p>これは名前、メールアドレス、URLは必須でメールアドレスは書式のチェックを行うという設定です。</p>
<p><a href="http://javascript.webcreativepark.net/sample/jquery_validate/">サンプル</a></p>
<p>最初にバリデーションを行うフォームを設定し、</p>
<pre><code>$("<strong>form</strong>").validate({</code></pre>
<p>rulesでどの入力フォームでバリデーションを行うのか、messagesでエラーが合った場合のメッセージを設定できます。</p>
<p>エラーがあった場合は次のようなHTMLが出力されますので、CSSを設定しておくとエラーであることがわかりやすくなるでしょう。</p>
<pre><code><label for="name" generated="true" class="error">お名前を入力してください</label></code></pre>
<p><a href="http://feedads.g.doubleclick.net/~a/FXnMq35_e1ZQGli_zSs1ol2pGrk/0/da"><img src="http://feedads.g.doubleclick.net/~a/FXnMq35_e1ZQGli_zSs1ol2pGrk/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/FXnMq35_e1ZQGli_zSs1ol2pGrk/1/da"><img src="http://feedads.g.doubleclick.net/~a/FXnMq35_e1ZQGli_zSs1ol2pGrk/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[jQueryでドロップシャドウを表現する「Drop Shadow Effect」]]>
http://javascript.webcreativepark.net/?p=212
2010-02-15T19:39:37Z
2010-02-15T19:39:37Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/02/drop-shadow-effect.jpg" alt="jQueryでドロップシャドウを表現する「Drop Shadow Effect」" title="jQueryでドロップシャドウを表現する「Drop Shadow Effect」" width="450" height="150" class="alignnone size-full wp-image-213" /></p>
<p>配布元：<a href="http://dropshadow.webvex.limebits.com/">Drop Shadow Effect</a><br />
ライセンス：public domain</p>
<p>Drop Shadow Effectは簡単にドロップシャドウが表現できるjQueryプラグインです。</p>
<p>CSS3などでは以下のように指定するとテキストシャドウやボックスシャドウを実装することができます。(ボックスシャドウはwebkit系ブラウザでのみ閲覧可能)</p>
<pre><code>#text{
text-shadow:3px 3px 5px blue;
}
#box{
-webkit-box-shadow:3px 3px 5px blue;
}</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/Drop-Shadow/index.html">サンプル１</a></p>
<p>Drop Shadow Effectを利用するとすべてのブラウザで同じような表現が可能になります。</p>
<pre><code>$(function(){
$('#text span').dropShadow({
left : 3 ,
top : 3 ,
blur : 5 ,
color : "blue"
});
$('#box').dropShadow({
left : 3 ,
top : 3 ,
blur : 5 ,
color : "blue"
});
})</code></pre>
<p>インラインレベル要素に対して適応することによりテキストシャドウに、ブロックレベル要素に対して適応することでボックスシャドウを表現することができます。</p>
<p><a href="http://javascript.webcreativepark.net/sample/Drop-Shadow/index2.html">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/QY5tBJck8TkBHc9ErkopUFMsNig/0/da"><img src="http://feedads.g.doubleclick.net/~a/QY5tBJck8TkBHc9ErkopUFMsNig/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/QY5tBJck8TkBHc9ErkopUFMsNig/1/da"><img src="http://feedads.g.doubleclick.net/~a/QY5tBJck8TkBHc9ErkopUFMsNig/1/di" border="0" ismap="true"></img></a></p>
0
admin
<![CDATA[アンチエイリアス付きの角丸が簡単に設定できる「JQuery Curvy Corners」]]>
http://javascript.webcreativepark.net/?p=204
2010-02-14T19:46:24Z
2010-02-14T19:37:37Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2010/02/jquery-curvy-corners.jpg" alt="アンチエイリアス付きの角丸が簡単に設定できる「JQuery Curvy Corners」" title="アンチエイリアス付きの角丸が簡単に設定できる「JQuery Curvy Corners」" width="450" height="150" class="alignnone size-full wp-image-206" /></p>
<p>配布元：<a href="http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery/">Anti-aliased Rounded corners with JQuery</a><br />
ライセンス：General Public License</p>
<p>JQuery Curvy Cornersは<a href="http://javascript.webcreativepark.net/library/curvycorners">curvyCorners</a>のjQuery版とも言えるJavaScriptライブラリでアンチエイリアス付きの角丸を簡単に設定することが可能だ。</p>
<h3>使い方</h3>
<p>head要素内などで、jQuery本体と配布サイトよりダウンロードしたjquery.curvycorners.min.jsを読み込みます。</p>
<pre><code><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.curvycorners.min.js"></script></code></pre>
<p>次のように記述するだけで角丸にすることが出来ます。</p>
<pre><code>$(function(){
$('#example_1').corner();
});</code></pre>
<p>「#example_1」の箇所が角丸にしたい要素に対応するCSSセレクターになるようにしてください。</p>
<p><a href="http://javascript.webcreativepark.net/sample/jquery-curvy-corners/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/gqL9RIJzkJekWNPDP9uBEGH7kqk/0/da"><img src="http://feedads.g.doubleclick.net/~a/gqL9RIJzkJekWNPDP9uBEGH7kqk/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/gqL9RIJzkJekWNPDP9uBEGH7kqk/1/da"><img src="http://feedads.g.doubleclick.net/~a/gqL9RIJzkJekWNPDP9uBEGH7kqk/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[要素に複数の背景画像を設定出来る「jQuery background_layers」]]>
http://javascript.webcreativepark.net/?p=182
2010-02-14T18:31:12Z
2010-02-11T17:17:03Z
<p>配布元：<a href="http://plugins.jquery.com/project/backgroundlayers">jQuery background_layers</a><br />
ライセンス：free</p>
<p>jquery background_layersはCSS3の「multiple background images」つまり、ひとつの要素に対して複数の背景画像を設定することが出来る機能をクロスブラウザで利用する為のjQueryプラグインです。</p>
<h3>使い方</h3>
<p>まずはhead要素などでjQuery本体と、配布サイトよりダウンロードしてきたjquery.background_layers.jsを読み込みます。</p>
<pre><code><script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.background_layers.js"></script></code></pre>
<p>jQuery background_layersの実行は次のように記述します。</p>
<pre><code>$(function(){
$('div').add_layer("#996600");
$('div').add_layer("url('right_top.gif') no-repeat right top");
$('div').add_layer("url('left_top.gif') no-repeat left top");
$('div').add_layer("url('right_bottom.gif') no-repeat right bottom");
$('div').add_layer("url('left_bottom.gif') no-repeat left bottom");
})</code></pre>
<p>要素をセレクターで指定し(今回はdiv)、add_layer()内に追加したいbackgroundプロパティを記述していきます。add_layerを利用すると上に上に重ねて表示されます。ここは、メソッドチェーンで連続して指定することが出来ないので注意してください。</p>
<p>サンプルでは4隅に画像を設定し角丸を表現しています。</p>
<p><a href="http://javascript.webcreativepark.net/sample/jquery-background_layers/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/nlbUj7dvJFiBMz127FuYWOi0awE/0/da"><img src="http://feedads.g.doubleclick.net/~a/nlbUj7dvJFiBMz127FuYWOi0awE/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/nlbUj7dvJFiBMz127FuYWOi0awE/1/da"><img src="http://feedads.g.doubleclick.net/~a/nlbUj7dvJFiBMz127FuYWOi0awE/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[グラデーション表現するjQuery Gradient]]>
http://javascript.webcreativepark.net/?p=178
2010-02-10T06:15:17Z
2010-02-10T06:15:17Z
<p>配布元：<a href="http://plugins.jquery.com/project/gradient">Gradient</a><br />
ライセンス：MITとGPLのデュアルライセンス</p>
<p>jQuery Gradientは要素などをグラーデーションを簡単に塗りつぶすことができるJavaScriptライブラリです。</p>
<h3>利用方法</h3>
<p>jQuery本体と配布サイトよりダウンロードしたjquery.gradient.min.jsをhead要素内などで読み込みます。</p>
<pre><code><script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gradient.min.js"></script></code></pre>
<p>グラデーションの設定は次のように行います。</p>
<pre><code>$(function(){
$(セレクター).gradient({
from: 'グラデーションの開始色',
to: 'グラデーションの終了色',
direction: 'グラデーションの形態'
})
})</code></pre>
<p>色はRGBで指定し、directionには横方向のグラデーションの場合は「vertical」、縦方向のグラデーションの場合は「horizontal」を指定します。</p>
<pre><code>$(function(){
$("div").gradient({
from: '1e2a5e',
to: '000418',
direction: 'horizontal'
})
})</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jquery-gradient/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/yFF2BrKy0_WK38OExioDAaRlpu0/0/da"><img src="http://feedads.g.doubleclick.net/~a/yFF2BrKy0_WK38OExioDAaRlpu0/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/yFF2BrKy0_WK38OExioDAaRlpu0/1/da"><img src="http://feedads.g.doubleclick.net/~a/yFF2BrKy0_WK38OExioDAaRlpu0/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[スタイルシートを切り替えるjQueryプラグイン「Switch stylesheets with jQuery」]]>
http://javascript.webcreativepark.net/?p=174
2009-06-16T00:18:29Z
2009-06-16T00:18:29Z
<p>配布元：<a href="http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery/">Switch stylesheets with jQuery</a><br />
ライセンス：クリエイティブコモンズAttribution, Share Alike License</p>
<p>Switch stylesheets with jQueryはユーザー操作により簡単にスタイルシートを切り替えることができるjQueryプラグインだ。</p>
<p>クッキーにも対応している為、一度選択されたスタイルシートはこのライブラリが読み込まれているすべてのページで優先的に表示されるようになります。</p>
<h3>使い方</h3>
<p>変更したいスタイルシートをhead要素などで読み込みます。デフォルトのスタイルシート以外はrel属性をrel=”alternate stylesheet”としデフォルトのスタイルシートはrel=”stylesheet”としておきま、title属性を使いそれぞれに名前を設定します。</p>
<pre><code><link rel="stylesheet" type="text/css" href="style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" /></code></pre>
<p>Switch stylesheets with jQueryの配布元よりダウンロードしたstyleswitch.jsとjQueryをhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="styleswitch.js"></script></code></pre>
<p>スタイル切り替えのトリガーとなるa要素にはhref属性にhref=”?style=style1″とし、style1はlink要素につけたtilte属性の名前を設定します。rel属性にもrel=”style1″と名前を設定し、class属性にはclass=”styleswitch”と設定しておきます。</p>
<pre><code><a href="?style=style1" rel="style1" class="styleswitch">style1</a>
<a href="?style=style2" rel="style2" class="styleswitch">style2</a>
<a href="?style=style3" rel="style3" class="styleswitch">style3</a></code></pre>
<p>これでリンクをクリックされた際に、スタイルシートが切り替えられます。</p>
<p><a href="http://javascript.webcreativepark.net/sample/switch-stylesheets-with-jquery/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/_zcP4vjjJ-83-ZztC_ldkxjN54Q/0/da"><img src="http://feedads.g.doubleclick.net/~a/_zcP4vjjJ-83-ZztC_ldkxjN54Q/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/_zcP4vjjJ-83-ZztC_ldkxjN54Q/1/da"><img src="http://feedads.g.doubleclick.net/~a/_zcP4vjjJ-83-ZztC_ldkxjN54Q/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[クロスフェードでロールオーバーを行う「rollover2.js」]]>
http://javascript.webcreativepark.net/?p=172
2009-06-07T07:09:38Z
2009-06-07T07:09:38Z
<p>配布元：<a href="http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2">クロスフェードするロールオーバー処理をお手軽に実装するJavaScript</a><br />
ライセンス：MIT License</p>
<p>rollover2.jsはロールーオバー処理にクロスフェードを適応できるJavaScriptライブラリだ。</p>
<h3>使い方</h3>
<p>配布元よりダウンロードした「rollover2.js」をhead要素などで読み込みます。UTF-8以外の文字コードのサイトでこのライブラリを利用する際には「charset=”utf-8″」の記述を忘れずに行う必要がある。</p>
<pre><code><script type="text/javascript" src="rollover2.js" charset="utf-8"></script></code></pre>
<p>画像はデフォルトの画像を「bottonA_rollout.jpg」など拡張子の直前に「_rollout」を追加しておき、ロールオーバー後の画像の拡張子は「bottonA_rollout.jpg」など「_rollout」を追加しておく。</p>
<p>これだけでクロスフェード処理が施されたロールオーバーを利用することが可能になる。</p>
<p><a href="http://javascript.webcreativepark.net/sample/rollover2/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/RozY6gH4o_uFUhIWv13RFkczjBA/0/da"><img src="http://feedads.g.doubleclick.net/~a/RozY6gH4o_uFUhIWv13RFkczjBA/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/RozY6gH4o_uFUhIWv13RFkczjBA/1/da"><img src="http://feedads.g.doubleclick.net/~a/RozY6gH4o_uFUhIWv13RFkczjBA/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[IE以外でクリップボードにコピーが利用できる「ZeroClipboard」]]>
http://javascript.webcreativepark.net/?p=169
2009-06-05T07:47:33Z
2009-06-05T07:47:33Z
<p>配布元：<a href="http://code.google.com/p/zeroclipboard/wiki/Instructions">Zero Clipboard</a><br />
ライセンス：LGPL</p>
<p>ZeroClipboardはIE以外のブラウザでクリップボードにコピーの機能が利用できるJavaScriptライブラリだ。</p>
<p>Flashの機能を利用しており、Flash Player10以上にも対応している。</p>
<h3>使い方</h3>
<p>ダウンロードしたZeroClipboard.jsをhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="ZeroClipboard.js"></script></code></pre>
<p>同梱されている「ZeroClipboard.swf」をサーバーにアップしておきscript要素で以下のように設定します。</p>
<pre><code>window.onload = function(){
ZeroClipboard.setMoviePath("ZeroClipboard.swf");
clip = new ZeroClipboard.Client();
clip.glue("test");
}</code></pre>
<p>ZeroClipboard.setMoviePathではアップした「ZeroClipboard.swf」のパスを設定しclip.glue(“…”);ではクリップボードへ登録のトリガーになる要素を指定します。</p>
<p>input要素のonchangeには以下のように設定。</p>
<pre><code><input type="text" value="..." onchange="clip.setText(this.value)"/></code></pre>
<p>ボタンにはscript要素で指定したidを指定します。</p>
<pre><code><input type="button" value="コピー" id="test"/></code></pre>
<p>これでクリップボードへのコピーが利用可能になります。</p>
<p><a href="http://javascript.webcreativepark.net/sample/zeroclipboard/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/8LNX5FfWaOfdWXZuiH6ggJp9RS4/0/da"><img src="http://feedads.g.doubleclick.net/~a/8LNX5FfWaOfdWXZuiH6ggJp9RS4/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/8LNX5FfWaOfdWXZuiH6ggJp9RS4/1/da"><img src="http://feedads.g.doubleclick.net/~a/8LNX5FfWaOfdWXZuiH6ggJp9RS4/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[非常に美しいLightBoxスクリプト「Sexy LightBox」]]>
http://javascript.webcreativepark.net/?p=161
2009-06-04T08:44:27Z
2009-06-04T08:44:27Z
<p>配布元：<a href="http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2">Sexy LightBox</a><br />
ライセンス：MITライセンス</p>
<p>Sexy LightBoxは非常に美しい動きをするLightBox系のJavaScriptライブラリだ。</p>
<p>ベースエンジンは<a href="http://mootools.net/">Mootools</a>を利用するか、<a href="http://jquery.com/">jQuery</a>を利用するか選択できる為、現在利用しているライブラリに合わせて柔軟に利用することができる。</p>
<h3>利用方法</h3>
<p>mootoolsを利用する場合はmootools本体と配布サイトからダウンロードした「sexylightbox.v2.2.mootools.js」と「sexylightbox.css」をhead要素などで読み込む。配布ファイルに同梱されている「sexyimagesフォルダ」も利用したいファイルと同じ階層に配置しておこう。</p>
<pre><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.mootools.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" /></pre>
<p>Sexy LightBoxはscript要素などで以下のJavaScriptを実行することにより利用可能になる。</p>
<pre>window.addEvent('domready', function(){
SexyLightbox = new SexyLightBox();
});</pre>
<p>画像表示のトリガーにしたいa要素のhref属性に拡大後の画像のURL、title要素に画像の説明、rel属性に「sexylightbox」を記述することによりSexy LightBoxが利用できる。</p>
<pre><a href="image-1.jpg" title="Sexy LightBoxサンプル" rel="sexylightbox"><img src="image-1-s.jpg" alt="Sexy LightBoxサンプル" /></a></pre>
<p><a href="http://javascript.webcreativepark.net/sample/sexy-lightbox/">サンプル</a></p>
<p>jQueryと利用する場合は読み込むライブラリと実行スクリプトを以下のようにすることで利用可能だ。</p>
<pre><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.jquery.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
SexyLightbox.initialize();
});
</script></pre>
<p><a href="http://javascript.webcreativepark.net/sample/sexy-lightbox/index2.html">サンプル</a></p>
<p>jQuery本体以外に<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a>も読み込まれている点に注意が必要だ。</p>
<h3>グループ化</h3>
<pre><a href="image-1.jpg" title="Sexy LightBoxサンプル1" rel="sexylightbox[foo]"><img src="image-1-s.jpg" alt="Sexy LightBoxサンプル" /></a>
<a href="image-2.jpg" title="Sexy LightBoxサンプル2" rel="sexylightbox[foo]"><img src="image-2-s.jpg" alt="Sexy LightBoxサンプル" /></a>
<a href="image-3.jpg" title="Sexy LightBoxサンプル3" rel="sexylightbox[foo]"><img src="image-3-s.jpg" alt="Sexy LightBoxサンプル" /></a></pre>
<p>sexylightbox[foo]のようにrel属性の末尾に任意のグループ名をつけることによりグループ化し、ギャラリーとしても利用することができる。</p>
<p><a href="http://javascript.webcreativepark.net/sample/sexy-lightbox/index3.html">サンプル</a></p>
<h3>背景色の変更</h3>
<p>実行スクリプトにOverlayStylesを与えることにより背景色や背景の透過度も容易に変更できる。</p>
<pre>$(document).ready(function(){
SexyLightbox.initialize({
OverlayStyles:{
'background-color':'#000',
'opacity': 0.5
}
});
});</pre>
<p><a href="http://javascript.webcreativepark.net/sample/sexy-lightbox/index4.html">サンプル</a></p>
<h3>ライトボックスの色の変更</h3>
<p>デフォルトでは黒色のウィンドウが開くが実行スクリプトにcolor:’white’を加えることによりウィンドウの色を白色に変更できる。</p>
<pre>$(document).ready(function(){
SexyLightbox.initialize({
OverlayStyles:{
'background-color':'#000',
'opacity': 0.5
},
color:'white'
});
});</pre>
<p><a href="http://javascript.webcreativepark.net/sample/sexy-lightbox/index5.html">サンプル</a></p>
<p>ウィンドウの色はデフォルトの黒、オプションの白の2色が用意されている。</p>
<p><a href="http://feedads.g.doubleclick.net/~a/rnUoFPat9UZ05CNNyS4U8MckGSM/0/da"><img src="http://feedads.g.doubleclick.net/~a/rnUoFPat9UZ05CNNyS4U8MckGSM/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/rnUoFPat9UZ05CNNyS4U8MckGSM/1/da"><img src="http://feedads.g.doubleclick.net/~a/rnUoFPat9UZ05CNNyS4U8MckGSM/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[select要素をプルダウンに拡張するjQuery.selectable.js]]>
http://javascript.webcreativepark.net/?p=156
2009-05-20T03:46:32Z
2009-05-20T03:46:32Z
<p>配布元：<a href="http://moto-mono.net/2008/09/14/jqueryselectable.html">selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js</a><br />
ライセンス:MITライセンス</p>
<p>select要素でセレクトボックスを作成した際に、情報量が多いと非常に選択肢が多く探すのが難しいことがある。都道府県を検索する際に多くの人が経験したことがあるだろう。</p>
<p>jQuery.selectable.jsはセレクトボックスをプルダウンメニューに変更し、簡単に検索できるように変更するJavaScriptライブラリだ。</p>
<h3>使い方</h3>
<p><a href="http://jquery.com/">jQuery</a>と配布サイトよりダウンロードしたjquery.selectable.js、スキン用のCSSファイルをhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="jquery.selectable.js"></script>
<link type="text/css" rel="stylesheet" href="skin/natural/style.css" /></code></pre>
<p>プルダウンに変更したいselct要素はoptgroup要素によりグループ分けを行い、name属性とid属性を記述しておきます。</p>
<pre><code><select id="pref" name="pref">
<optgroup label="北海道">
<option value="01">北海道</option>
</optgroup>
<optgroup label="東北">
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
<option value="06">山形県</option>
<option value="07">福島県</option>
</optgroup>
<optgroup label="関東">
<option value="08">東京都</option>
<option value="09">茨城県</option>
<option value="10">栃木県</option>
<option value="11">群馬県</option>
<option value="12">埼玉県</option>
<option value="13">千葉県</option>
<option value="14">神奈川県</option>
</optgroup>
<optgroup label="北陸">
<option value="15">富山県</option>
<option value="16">石川県</option>
<option value="17">福井県</option>
</optgroup>
<optgroup label="甲信越">
<option value="18">新潟県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
</optgroup>
<optgroup label="東海">
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
</optgroup>
<optgroup label="関西">
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
</optgroup>
<optgroup label="中四国">
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
</optgroup>
<optgroup label="九州">
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
</optgroup>
<optgroup label="沖縄">
<option value="47">沖縄県</option>
</optgroup>
</select></code></pre>
<p>script要素などでスクリプトを実行します。$(“…”)内に変更を行いたいselect要素をCSSセレクタで指定します。</p>
<pre><code>$(function(){
$("<span>select#pref</span>").selectable();
}); </code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jquery-selectable-js/">サンプル</a></p>
<p>option要素にclass=”br”を付加することにより任意の位置で改行を行うことも可能です。</p>
<h3>デザインの変更</h3>
<p>標準ではselectableとnaturalの2種類のスキンが提供されており、CSSファイルを読み込む際に選択したスキンが反映されます。</p>
<pre><code><link type="text/css" rel="stylesheet" href="skin/natural/style.css" /></code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jquery-selectable-js/index2.html">スキン「natural」を読み込んだサンプル</a></p>
<h3>拡張</h3>
<p>プルダウンの表示形式・表示非表示の際のエフェクト・表示速度・不透明度・プルダウン位置の微調整・プルダウンの高さなどの変更が可能です。</p>
<h3>表示形式</h3>
<p>styleに”simpleBox”を指定することによりデザイン可能な通常のプルダウンに変更されます。heightで高さを合わせて指定しておく必要があります。また、optgroupによる指定はできません。</p>
<pre><code>$(function(){
$("select#pref").selectable({
style: "simpleBox",
height: 150
});
})</code></pre>
<h3>エフェクト</h3>
<p>setにslideDownやfadeInを指定することによりプルダウン表示時のエフェクトを、outにslideUpやfadeOutを指定することによりプルダウンを非表示にする際のエフェクトを、opacityに0～1の値(.9など)を指定することによりプルダウンの透過度を制御することができます。</p>
<pre><code>$(function(){
$("select#pref").selectable({
set: "slideDown" ,
out: "slideUp" ,
inDuration: "fast",
outDuration: "fast" ,
opacity: .9
});
})</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jquery-selectable-js/index4.html">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/LrED7AEEN6gQgYdDN_z8WkAkTOc/0/da"><img src="http://feedads.g.doubleclick.net/~a/LrED7AEEN6gQgYdDN_z8WkAkTOc/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/LrED7AEEN6gQgYdDN_z8WkAkTOc/1/da"><img src="http://feedads.g.doubleclick.net/~a/LrED7AEEN6gQgYdDN_z8WkAkTOc/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[角丸を簡単に表現する「 jQuery Canvas Rounded Corners」]]>
http://javascript.webcreativepark.net/?p=143
2009-04-29T14:19:51Z
2009-04-29T14:19:51Z
<p>配布元：<a href="http://ragamo.medioclick.com/jquery/corners/">jQuery Canvas Rounded Corners</a><br />
ライセンス：GNU Lesser General Public License</p>
<p>jQuery Canvas Rounded CornersはjQueryで簡単に角丸を実装するためのJavaScriptライブラリです。<br />
Canvasで作成されているため、様々な表現が可能だ。</p>
<h3>使い方</h3>
<p>最新のjQueryファイルとダウンロードしたファイルに含まれる「jquery.corners.js」、「newExcanvas.js」をhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corners.js"></script>
<script type="text/javascript" src="newExcanvas.js"></script></code></pre>
<p>$(‘角丸にしたい要素(CSSセレクタで選択)’).corners();のように記述すれば角丸にすることが出来ます。</p>
<pre><code><script type="text/javascript">
$(function(){
$('#example_1').corners();
});
</script></code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jquery-canvas-rounded-corners/">サンプル</a></p>
<p>オプションをつけることにより角丸の半径やボーダーの設定など様々な条件を付加することが出来ます。</p>
<pre><code>$('#example_5').corners({
radio: 半径,
inColor: 角丸の色,
outColor: '角丸の外の色',
borderSize: ボーダーのサイズ,
borderColor: 'ボーダーの色'
});</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jquery-canvas-rounded-corners/index2.html">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/3PMNJACM96Bb0c8brGWMNJFIXCM/0/da"><img src="http://feedads.g.doubleclick.net/~a/3PMNJACM96Bb0c8brGWMNJFIXCM/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/3PMNJACM96Bb0c8brGWMNJFIXCM/1/da"><img src="http://feedads.g.doubleclick.net/~a/3PMNJACM96Bb0c8brGWMNJFIXCM/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[IE6で透過pngを表示する「DD_belatedPNG」]]>
http://javascript.webcreativepark.net/?p=138
2009-04-28T19:46:35Z
2009-04-28T19:46:35Z
<p>配布元：<a href="http://dillerdesign.com/experiment/DD_belatedPNG/">Medicine for your IE6/PNG headache!</a><br />
ライセンス：MIT License.</p>
<p>DD_belatedPNGはIE6で透過pngを表示するJavaScriptライブラリだ。background-positionやbackground-repeatなどのプロパティや:hover擬似クラスなどにも対応している。<br />
その上、AlphaImageLoaderではなくVMLにより実装されている為、比較的早くに動作する。</p>
<h3>使い方</h3>
<p>ダウンロードしたDD_belatedPNGをhead要素などで読み込みます。その際に条件付コメントでIE6のみで読み込まれるようにしてください。</p>
<p>次にD_belatedPNG.fix(‘透過にしたい要素をCSSセレクタで指定’);といったJavaScriptを実行します。</p>
<pre><code><!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript" >
DD_belatedPNG.fix('透過にしたい要素をCSSセレクタで指定');
</script>
<![endif]--></code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/dd_belatedpng/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/ba98Vc3mrImLK9IsOaTkCF-S93U/0/da"><img src="http://feedads.g.doubleclick.net/~a/ba98Vc3mrImLK9IsOaTkCF-S93U/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/ba98Vc3mrImLK9IsOaTkCF-S93U/1/da"><img src="http://feedads.g.doubleclick.net/~a/ba98Vc3mrImLK9IsOaTkCF-S93U/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[IE7以下でもdisabled 属性を利用できるようになる「select-option-disabled-emulation.js」]]>
http://javascript.webcreativepark.net/?p=132
2010-02-14T19:53:37Z
2009-04-15T11:32:50Z
<p>配布元：<a href="http://www.lattimore.id.au/2005/07/01/select-option-disabled-and-the-javascript-solution/">Select, Option, Disabled And The JavaScript Solution </a><br />
ライセンス：非商用に限り無料</p>
<p>select-option-disabled-emulation.jsはIE7以下でもoption要素のdisabled 属性を利用できるようになるJavaScriptライブラリです。</p>
<p>通常、option要素にdisabled属性を記述した場合、文字の色が薄くなり選択できなくなります。</p>
<pre><code><select>
<option>選択</option>
<option disabled="disabled">選択(disabled)</option>
<option>選択</option>
</select></code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/select-option-disabled-emulation/">サンプル</a></p>
<p>ところが、IE6やIE7ではdisabled 属性を利用しても選択できてしまいます。</p>
<h3>使い方</h3>
<p>head要素などでダウンロードしたJavaScriptファイルを読み込みます。その際に条件付コメントを利用してIE7以前のIEにのみ読み込まれるようにします。</p>
<pre><code><!--[if lt IE 7]>
<script type="text/javascript" src="select-option-disabled-emulation.js"></script>
<![endif] --></code></pre>
<p>設定はこれだけでOKです。</p>
<p><a href="http://javascript.webcreativepark.net/sample/select-option-disabled-emulation/index2.html">サンプル</a></p>
<p>選択された際に、ひとつ上のoptionに切り替えるなどが行われていますが、ちょっとdisabledを利用したいときに便利なライブラリです。</p>
<p><a href="http://feedads.g.doubleclick.net/~a/Ra3OQEIZJFw0YjbdTte0gbkN7bQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/Ra3OQEIZJFw0YjbdTte0gbkN7bQ/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/Ra3OQEIZJFw0YjbdTte0gbkN7bQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/Ra3OQEIZJFw0YjbdTte0gbkN7bQ/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[スタイルシートを切り替える「styleswitcher.js」]]>
http://javascript.webcreativepark.net/?p=128
2009-03-17T19:21:19Z
2009-03-17T19:21:19Z
<p>配布元：<a href="http://alistapart.com/stories/alternate/">Alternative Style: Working With Alternate Style Sheets</a><br />
ライセンス：不明</p>
<p>styleswitcher.jsはリンクにより読み込んでいるスタイルシートを切り替えることができ、文字サイズの切り替えなどによく利用されるJavaScriptライブラリです。</p>
<h3>使い方</h3>
<p>配布元よりダウンロードした「styleswitcher.js」をhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="styleswitcher.js"></script></code></pre>
<p>次にスタイルシートを読み込みます。スタイルシートは切り替え前のスタイルシートと切り替え後のスタイルシートです。<br />
切り替え後のスタイルシートは読み込み時に反映されないようにrel属性は「alternate stylesheet」としておきます。<br />
また、それぞれtitle属性に一意の名前をつけておきます。</p>
<pre><code><link rel="stylesheet" type="text/css" href="style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" /></code></pre>
<p>スタイルシートを切り替えるリンクは以下のように設定します。</p>
<pre><code><a href="#" onclick="setActiveStyleSheet('link要素のtitle属性'); return false;">style1</a></code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/styleswitcher/">サンプル</a></p>
<p>変更されたスタイル情報はcookieに保存されるため、一度設定してしまえば、ページ遷移や再訪問の際にも反映されています。</p>
<p><a href="http://feedads.g.doubleclick.net/~a/4l3jTpjqLUDn3k-uOf_di600Y1k/0/da"><img src="http://feedads.g.doubleclick.net/~a/4l3jTpjqLUDn3k-uOf_di600Y1k/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/4l3jTpjqLUDn3k-uOf_di600Y1k/1/da"><img src="http://feedads.g.doubleclick.net/~a/4l3jTpjqLUDn3k-uOf_di600Y1k/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[ページめくりを表現するJavaScriptライブラリ「The Sexy Curls jQuery Plugin」]]>
http://javascript.webcreativepark.net/?p=123
2009-01-28T07:36:31Z
2009-01-28T07:36:31Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2009/01/the_sexy_curls_jquery_plugin.jpg" alt="ページめくりを表現するJavaScriptライブラリ「The Sexy Curls jQuery Plugin」" title="ページめくりを表現するJavaScriptライブラリ「The Sexy Curls jQuery Plugin」" width="450" height="150" class="alignnone size-full wp-image-124" /></p>
<p>配布元：<a href="http://www.elliottkember.com/sexy_curls.html">The Sexy Curls jQuery Plugin! </a><br />
ライセンス：MIT license.</p>
<p>The Sexy Curls jQuery PluginはWEBページにページめくりの効果を追加するJavaScriptライブラリです。</p>
<h3>利用方法</h3>
<p>配布元よりダウンロードしたファイル群をhead要素などで読み込みます。<br />
ファイル群にはjQueryとjQuery UI、turn.jsとturn.cssが含まれています。</p>
<pre><code><script type="text/javascript" src="jquery1.3min.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type="text/javascript" src="turn.js"></script>
<link type="text/css" rel="stylesheet" href="turn.css" /></code></pre>
<p>ページめくり時に表示したい画像をimg要素でbody要素内の適当な位置に配置します。img要素には任意のID属性を振っておいてください。</p>
<pre><code><img id="target" src="curl.jpg" alt="" /></code></pre>
<p>ページめくりの記述はscript要素で記述します。$()内にはimg要素で指定したIDを設定します。</p>
<pre><code><script type="text/javascript">
$(document).ready(function(){
$( '#target' ).fold();
});
</script></code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/the_sexy_curls_jquery_plugin/">サンプル</a></p>
<p>非常にインパクトのあるライブラリですのでサイトのアクセントによいですね。</p>
<p><a href="http://feedads.g.doubleclick.net/~a/jDJ5NagrrYM39I3OLzKTB_yzqSo/0/da"><img src="http://feedads.g.doubleclick.net/~a/jDJ5NagrrYM39I3OLzKTB_yzqSo/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/jDJ5NagrrYM39I3OLzKTB_yzqSo/1/da"><img src="http://feedads.g.doubleclick.net/~a/jDJ5NagrrYM39I3OLzKTB_yzqSo/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[非常にきれいなアラートを表示する「jQuery Alert Dialogs」]]>
http://javascript.webcreativepark.net/?p=121
2009-01-05T18:46:46Z
2009-01-05T18:46:46Z
<p>配布元：<a href="http://abeautifulsite.net/2008/12/jquery-alert-dialogs/">jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)</a><br />
ライセンス：GNU General Public License.</p>
<p>「jQuery Alert Dialogs」はjQueryで非常に美しいアラートやプロンプトを表示するJavaScriptライブラリです。</p>
<h3>使い方</h3>
<p>jquery.jsと配布元よりダウンロードしたjquery.alerts.jsとjquery.ui.draggable.js、jquery.alerts.cssをhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript" src="jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="jquery.alerts.css" type="text/css" /></code></pre>
<p>アラートを表示するには以下の関数を実行します。</p>
<pre><code>jAlert('アラートに表示する内容', 'アラートのタイトル');</code></pre>
<p><a href="http://javascript.webcreativepark.net/sample/jquery.alerts/">サンプル</a></p>
<p>内容にはxhtml要素を利用することも可能です。</p>
<p><a href="http://javascript.webcreativepark.net/sample/jquery.alerts/index4.html">サンプル</a></p>
<p>確認ダイアログを表示するには以下の関数を実行します。</p>
<pre><code>jConfirm('確認の内容', '確認のタイトル', function(r) {確認後の処理});</code></pre>
<p>確認後の処理ではrに確認時に押されたボタンの内容(true,false)を利用することができます。</p>
<p><a href="http://javascript.webcreativepark.net/sample/jquery.alerts/index2.html">サンプル</a></p>
<p>入力プロンプトを利用する場合には以下の関数を実行します。</p>
<pre><code>jPrompt('入力メッセージ', '初期値', '入力プロンプトタイトル', function(r) {入力後の処理});</code></pre>
<p>入力後の処理ではrに入力された内容が入っています。</p>
<p>デザインはCSSで制御されている為、jquery.alerts.cssを変更することによりお好みのスタイルで利用することも可能です。</p>
<p><a href="http://feedads.g.doubleclick.net/~a/Fp7IJ5-ifC9ABFlwO_u3HVHN4lc/0/da"><img src="http://feedads.g.doubleclick.net/~a/Fp7IJ5-ifC9ABFlwO_u3HVHN4lc/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/Fp7IJ5-ifC9ABFlwO_u3HVHN4lc/1/da"><img src="http://feedads.g.doubleclick.net/~a/Fp7IJ5-ifC9ABFlwO_u3HVHN4lc/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[CSVをTable化するjQueryプラグイン「jquery.csv2table.js」]]>
http://javascript.webcreativepark.net/?p=119
2010-09-22T09:33:07Z
2008-12-24T14:18:10Z
<p>配布元：<a href="http://plugins.jquery.com/project/csv2table">csv2table</a><br />
ライセンス:不明</p>
<p>jquery.csv2table.jsはExcelなどで生成できるCSVファイルを読み込みtableとして表示する為のjQueryプラグインです。<br />
このプラグインを利用して生成されたテーブルは項目ごとのソートなどにも対応しています。</p>
<p><strong>使い方</strong></p>
<p>まずはjQuery本体と配布元よりダウンロードした「jquery.csv2table.js」とhead要素などで読み込みます。</p>
<pre><code><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.csv2table.js"></script></code></pre>
<p>次にbody要素内に任意のIDを付けた要素を用意します。</p>
<pre><code><div id="view1"></div></code></pre>
<p>テーブルはこの中に設置されます。</p>
<p>head要素内などのscript要素でプラグインを実行します。</p>
<pre><code><script type="text/javascript">
$(function(){
$('任意のID').csv2table('読み込むCSV');
});
</script></code></pre>
<p>今回は<a href="http://javascript.webcreativepark.net/sample/csv2table/Book.csv">Book.csv</a>を読み込んでテーブルを描画します。</p>
<pre><code><script type="text/javascript">
$(function(){
$('#view1').csv2table('Book.csv');
});
</script></code></pre>
<p>最後にダウンロードしたimgフォルダをテーブルを描画するファイルと同じフォルダにアップロードします。</p>
<p><a href="http://javascript.webcreativepark.net/sample/csv2table/">サンプル</a></p>
<p><a href="http://feedads.g.doubleclick.net/~a/H5QluRVfF5fPYoc5ObF7oShwfUc/0/da"><img src="http://feedads.g.doubleclick.net/~a/H5QluRVfF5fPYoc5ObF7oShwfUc/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/H5QluRVfF5fPYoc5ObF7oShwfUc/1/da"><img src="http://feedads.g.doubleclick.net/~a/H5QluRVfF5fPYoc5ObF7oShwfUc/1/di" border="0" ismap="true"></img></a></p>
0
<![CDATA[ブロックレベル要素の高さを揃える「Equal Heights」]]>
http://javascript.webcreativepark.net/?p=114
2008-12-12T07:13:57Z
2008-12-12T07:13:57Z
<p><img src="http://javascript.webcreativepark.net/wp-content/uploads/2008/12/equal_heights.jpg" alt="ブロックレベル要素の高さを揃える「Equal Heights」" title="ブロックレベル要素の高さを揃える「Equal Heights」" width="450" height="150" class="size-full wp-image-115" /></p>
<p>配布元：<a href="http://www.cssnewbie.com/equalheights-jquery-plugin/">The EqualHeights jQuery Plugin</a><br />
ライセンス：不明</p>
<p>EqualHeights jQuery Pluginはブロックレベル要素の高さを揃えるJavaScriptライブラリです。</p>
<h3>Equal Heightsの使い方</h3>
<p>head要素などでダウンロードしたjquery.equalheights.jsとjquery.jsを読み込みます。</p>
<pre><code><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.equalheights.js"></script></code></pre>
<p>その後に高さを揃えたい要素、CSSセレクタで指定しequalHeights()を実行します。</p>
<pre><code><script type="text/javascript">
$(document).ready(function() {
$("CSSセレクタ").equalHeights()
});
</script></code></pre>
<p>これで、高さが揃えられます。</p>
<p><a href="http://javascript.webcreativepark.net/sample/equal_heights/">サンプル</a></p>
<p>equalHeightsを指定しておくことにより、最小の高さや最大の高さを指定することが出来ます。</p>
<pre><code>$("CSSセレクタ").equalHeights(最小の高さ,最大の高さ)</code></pre>
<p>文字サイズなどを変更したり、内容が最大の高さを超えた場合はスクロールバーが表示されます。</p>
<p>同じようなスクリプトに「<a href="http://javascript.webcreativepark.net/library/heightline">heightLine.js</a>」があります。heightLine.jsは文字サイズを変更した際に高さを再調整します。</p>
<p><a href="http://feedads.g.doubleclick.net/~a/mBtaVaYRfLQxhCh9hcqlVSjK0Ns/0/da"><img src="http://feedads.g.doubleclick.net/~a/mBtaVaYRfLQxhCh9hcqlVSjK0Ns/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/mBtaVaYRfLQxhCh9hcqlVSjK0Ns/1/da"><img src="http://feedads.g.doubleclick.net/~a/mBtaVaYRfLQxhCh9hcqlVSjK0Ns/1/di" border="0" ismap="true"></img></a></p>
0