• かちびと.net

    Gistに書いたCSSやJavaScriptのコードを表示し、その場で実行出来るjQueryプラグイン・Intelligistのご紹介。開発者向けですかねー。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Gistに書いたCSSやJavaScriptのコードを表示し、その場で実行出来るjQueryプラグイン・Intelligist

スポンサーリンク

Gistのコードを表示させるだけでなく、
その場で実行出来るようにする、という
jQueryのプラグインです。あんまり
用途は浮かばないかもですけど、珍しい
ので一応メモ的に。Gistは複数指定
可能です。

GW中なので軽めの話題。開発者向けのライブラリになります。Gistに書いたCSSやJSを表示して、その場で実行させます。

Intelligist


デモの作成用のライブラリという感じですかね・・・動作サンプルの為に複数ページを作成しなくて済むし、コードも書かなくていいので楽と言えば楽な気がします。

以下動作サンプルです。

Sample


連続で表示させると微妙な挙動しますね・・

コード

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="jquery.intelligist.js"></script>

本体とライブラリを読み込みます。

<div id="demo" class="snippet"></div>

で、空の要素を用意します。

 $("#demo").intelligist({
            "2576349": "黄色い背景にする"
          , "2576329": "CSS3でテキストエフェクト"
          , "2576313": "jQueryでテキストエフェクト"
        }, { exec: true });

そのセレクタにあわせて以下のようにGistのIDとselect要素のテキストを加えます。選択すれば指定しているIDのGistのコードがページ内で実行されます。

尚、ライブラリの中にはchosenも一緒に読み込まれていました。圧縮版は分かりません。

いろいろ思いつきますね。

Intelligist

URL :
TRB :

Ads

Posts

Contact

Services