Simple JS｜超軽量のJSライブラリ｜Ajax

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名, 時間);

要素を表示するときは上から下へ、非表示にするときは下から上になめらかにブラインドします。

サンプルを見る

<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;">&laquo;&nbsp;前へ</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;">次へ&nbsp;&raquo;</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>

Adobe Spry フレームワーク Adobe Spry: ウィジェット（UIコントロール）

PHP & JavaScript Room

超軽量のJSライブラリSimple JS

Simple JSについて

Simple JS

エフェクト効果
simple.js

Pulsate

Opacity

Alpha

highlight

textColor

morphColor

Blind UP、 Blind Down

Toggle

アコーディオン
simple.js + simpleacco.js

スライドショー
simple.js + simpleslish.js

XML読み込み
simpleajax.js

関連コンテンツ

超軽量のJSライブラリSimple JS

Simple JSについて

Simple JS

エフェクト効果simple.js

Pulsate

Opacity

Alpha

highlight

textColor

morphColor

Blind UP、 Blind Down

Toggle

アコーディオンsimple.js + simpleacco.js

スライドショーsimple.js + simpleslish.js

XML読み込みsimpleajax.js

関連コンテンツ

エフェクト効果
simple.js

アコーディオン
simple.js + simpleacco.js

スライドショー
simple.js + simpleslish.js

XML読み込み
simpleajax.js