超軽量のJSライブラリSimple JS
- Simple JSについて
- エフェクト効果〔simple.js〕
- アコーディオン〔simple.js + simpleacco.js〕
- スライドショー〔simple.js + simpleslish.js〕
- XML読み込み〔simpleajax.js〕
Simple JSについて
2008/2/4
Simple JS

14KBの超軽量のJSライブラリです。 「simple.js」(基本)、「simpleacco.js」(アコーディオン)、「simpleslish.js」(スライドショー)、「simpleajax.js」(XML読込)の4つのプラグインが提供されています。
エフェクト効果
simple.js
2008/2/4
Pulsate
$pulsate(id名, 数値); または $pulsate(id名, 数値, マイクロ秒);
要素をblinkのように点滅します。

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <p>▼クリック</p> <div id="testpulsate" onclick="$pulsate(this.id,5,400); return false;" style="width:90px; height:90px;"><img src="/content/img/dog_black.png" alt="dog" /></div>
Opacity
$opacity(id名, opacStart, opacEnd, マイクロ秒);
要素を透過します。

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <p>▼クリック</p> <span id="testopacity" onclick="$opacity(this.id, 100, 20, 600); return false;" style="width:90px; height:90px;"><img src="/content/img/dog_black.png" alt="dog" /></span> <span id="testopacity2" onclick="$opacity(this.id, 20, 100, 1200); return false;" style="width:90px; height:90px;"><img src="/content/img/dog_white.gif" alt="dog" /></span>
Alpha
$shiftOpacity(id名, opac);
要素をAlphaチャンネルで透過します。

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <p>▼クリック</p> <div id="testalpha" class="hihltest" style="filter:Alpha(opacity=1,finishopacity=0,style=2); -moz-opacity:100; opacity:100; width:90px; height:90px;" onclick="$shiftOpacity(this.id,400); return false;"><img src="/content/img/dog_black.png" alt="dog" /></div>
highlight
$highlight(id名); または $highlight(id名, 時間, 通常時の背景色, ハイライト時の背景色);
要素にハイライト効果を付けます。

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <p>▼クリック</p> <style type="text/css"> .testhighlight { width:100px; margin:0; padding:1em; border:2px solid #cccccc; cursor:pointer; color:#666666; background-color:#e1e1e1; font:bold 16px/1em verdana,sans-serif; text-align:center; } </style> <div id="testhighlight" class="testhighlight" onclick="$highlight(this.id); return false;"><img src="/content/img/dog_mini.gif" alt="dog" />$highlight</div>
textColor
$textColor(id名, 開始色, 終了色, 時間);
テキストにグラデーション効果を付けます。

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <p>▼クリック</p> <style type="text/css"> .testtextcolor { width:10em; margin:0; padding:1em; border:2px solid #cccccc; cursor:pointer; color:#666666; background-color:#e1e1e1; font:bold 16px/1em verdana,sans-serif; text-align:center; } </style> <div id="testtextcolor" class="testtextcolor" onclick="$textColor(this.id, '#00FF66','#666666',700); return false;">$textColor</div>
morphColor
$morphColor(id名, テキスト開始色, テキスト終了色, 背景開始色, 背景終了色, ボーダー開始色, ボーダー終了色, 時間);
要素のテキスト色、背景色、枠線色にグラデーション効果を付けます。

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <p>▼クリック</p> <style type="text/css"> .testmorphcolor { width:10em; margin:0; padding:1em; border:2px solid #cccccc; cursor:pointer; color:#666666; background-color:#e1e1e1; font:bold 16px/1em verdana,sans-serif; text-align:center; } </style> <div id="testmorphcolor" class="testmorphcolor" onclick="$morphColor(this.id, '#FFFFFF', '#666666', '#FF6600', '#FFFFFF', '#FFCC00', '#CCCCCC', 600); return false;">$morphColor</div>
Blind UP、 Blind Down
$blindup(id名); $blinddown(id名);
または
$blindup(id名, 時間); $blinddown(id名, 時間);
または
$blindup(id名, 時間); $blinddown(id名, 時間);
要素を表示するときは上から下へ、非表示にするときは下から上になめらかにブラインドします。

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <input type="button" onclick="$blinddown('testblind'); return false" name="Button2" value="$blinddown" /> <input type="button" onclick="$blindup('testblind'); return false" name="Button" value="$blindup" /> <div id="testblind" style="display:none;"> <div style="background-color:#eee;padding:1em;"> サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 </div> </div>
Toggle
$toggle(id名);
要素の表示・非表示をなめらかに行います。 上のブラインドのアップダウンを1つの関数で処理しています。

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <input type="button" onclick="$toggle('testtoggle'); return false" name="Button" value="$toggle" /> <div id="testtoggle" style="display:none;"> <div style="background-color:#eee;padding:1em;"> サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。 </div> </div>
アコーディオン
simple.js + simpleacco.js
2008/2/4
「simple.js」+「simpleacco.js」使用。

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <script src="/content/lib/simplejs/simpleacco.js"></script> <script type="text/javascript"> $AccoInit('acco0;acco1;acco2;acco3;'); </script> <style type="text/css"> .accoblock { width:400px; border:2px solid #f2f2f2; background-color:#ffffcc; } .accoblock .titleacco { display:block; padding:2px 10px; border:1px solid #00cc66; background-color:#effceb; } .accoblock a { color:#009900; font-weight:bold; text-decoration:none; } .accoblock .accotexte { background-color:#FFFFF4; font-size:12px; color:#999999; width:400px; } </style> <h4>Content Menu</h4> <div class="accoblock"> <div class="titleacco">【PHP】 <a href="#" onclick="$accopush(0); return false">$accopush(0)</a> or <a href="#" onclick="$accopush(0,true); return false">$accopush(0,true)</a></div> <div id="acco0" class="accotexte"> <div class="myborder"> Windows OS に PHPとApacheサーバーのインストール ~ php.iniの設定まで、 パソコンでPHPを使えるようになるまでの手順を図解。 .htaccessの指定方法、使用頻度の高いPHP関数をサンプル付きで解説。 Tipsでは実用的な自作関数を紹介。</div> </div> </div> <div class="accoblock"> <div class="titleacco">【JavaScript】 <a href="#" onclick="$accopush(1); return false">$accopush(1)</a> or <a href="#" onclick="$accopush(1,true); return false">$accopush(1,true)</a></div> <div id="acco1" class="accotexte" style="display:none"> <div class="myborder"> Windows OS に PHPとApacheサーバーのインストール ~ php.iniの設定まで、 パソコンでPHPを使えるようになるまでの手順を図解。 .htaccessの指定方法、使用頻度の高いPHP関数をサンプル付きで解説。 Tipsでは実用的な自作関数を紹介。</div> </div> </div> <div class="accoblock"> <div class="titleacco">【Ajax】 <a href="#" onclick="$accopush(2); return false">$accopush(2)</a> or <a href="#" onclick="$accopush(2,true); return false">$accopush(2,true)</a></div> <div id="acco2" class="accotexte" style="display:none"> <div class="myborder"> ブログやサイトで使える実用的なAjaxをサンプル付きで解説。</div> </div> </div> <div class="accoblock"> <div class="titleacco">【CSS】 <a href="#" onclick="$accopush(3); return false">$accopush(3)</a> or <a href="#" onclick="$accopush(3,true); return false">$accopush(3,true)</a></div> <div id="acco3" class="accotexte" style="display:none"> <div class="myborder"> スタイルシートをプロパティ別に、コピペで使える実用的なサンプル付きで解説。 floatプロパティを使ったサイトレイアウト、リストメニュー、角丸テーブルなど、サイト制作に役立つスタイルシートを使った小技も紹介。</div> </div> </div>
スライドショー
simple.js + simpleslish.js
2008/2/4
「simple.js」+「simpleslish.js」使用。

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <script src="/content/lib/simplejs/simpleslish.js"></script> <script type="text/javascript"> $slish('maphoto',"/content/lib/galleryimages/christmas-party-1.jpg;/content/lib/galleryimages/christmas-party-2.jpg;/content/lib/galleryimages/christmas-party-3.jpg;/content/lib/galleryimages/christmas-party-4.jpg;/content/lib/galleryimages/christmas-party-5.jpg;",900); </script> <style type="text/css"> div#slish { width:380px; background-color:#000; overflow:hidden; } div#slish table { width:100%; margin:0; padding:0; } div#slish td.prev { text-align:left; } div#slish td.play { text-align:center; } div#slish td.next { text-align:right; } div#slish a { color:#fff; } .miniphotos { border:1px solid #cccccc; margin:5px; } .imaa { float:left; margin-right: 5px; margin-left: 5px; } </style> <div id="slish"> <table> <tr> <td class="prev"><a href="#" onclick="$slishPREV(); return false;">« 前へ</a></td> <td class="play"><a href="#" class="linktest" onclick="$slishPLAY(3000); return false">再生</a> <a href="#" onclick="$slishSTOP(); return false" class="linktest" >一時停止</a></td> <td class="next"><a href="#" onclick="$slishNEXT(); return false;">次へ »</a></td> </tr> </table> <div class="imaa"><img src="/content/lib/galleryimages/christmas-party-1.jpg" name="maphoto" width="320" height="213" id="maphoto" /></div> <a href="#" onclick="$slishToNum(1); return false"><img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" class="miniphotos" width="32" height="32" /></a><br> <a href="#" onclick="$slishToNum(2); return false"><img src="/content/lib/galleryimages/thumbnail/christmas-party-2.jpg" class="miniphotos" width="32" height="32" /></a><br> <a href="#" onclick="$slishToNum(3); return false"><img src="/content/lib/galleryimages/thumbnail/christmas-party-3.jpg" class="miniphotos" width="32" height="32" /></a><br> <a href="#" onclick="$slishToNum(4); return false"><img src="/content/lib/galleryimages/thumbnail/christmas-party-4.jpg" class="miniphotos" width="32" height="32" /></a><br> <a href="#" onclick="$slishToNum(5); return false"><img src="/content/lib/galleryimages/thumbnail/christmas-party-5.jpg" class="miniphotos" width="32" height="32" /></a><br> <img src="/content/lib/galleryimages/christmas-party-2.jpg" alt="rien" width="320" height="213" style="display:none" /> <img src="/content/lib/galleryimages/christmas-party-3.jpg" alt="rien" width="320" height="213" style="display:none" /> <img src="/content/lib/galleryimages/christmas-party-4.jpg" alt="rien" width="320" height="213" style="display:none" /> <img src="/content/lib/galleryimages/christmas-party-5.jpg" alt="rien" width="320" height="213" style="display:none" /> <img src="/content/lib/galleryimages/christmas-party-1.jpg" alt="rien" width="320" height="213" style="display:none" /> </div>
XML読み込み
simpleajax.js
2008/2/4
$ajaxload(divId, url, loader, effect, ecache);

サンプルを見る
<script src="/content/lib/simplejs/simple.js"></script> <script src="/content/lib/simplejs/simpleajax.js"></script> <script type="text/javascript"> function fAjaxroad(){ divId = 'myfeed'; // ID of Div which will recover the result. url = 'index.xml'; // 'HTML file to be called' ext *.php, *.inc, ... loader = '<p>loading</p>'; // 'html for loading' or false effect = 'appear'; // 'appear' , 'blind' , 'highlight' or false ecache = false; //cache for html file true or false $ajaxload(divId, url, loader, effect, ecache); } </script> <input type="button" value="$ajaxload()" onclick="fAjaxroad();" /> <div id="myfeed"></div>