7
1

More than 3 years have passed since last update.

プリザンターのカレンダーを水の中に入れてみた!

Last updated at Posted at 2019-12-14

何か面白いプラグインでもないかな~と探していたら「jquery.ripples.js」という水たまりを表すプラグインを見つけました!

そこで!

プリザンターを水の中に入れてみた!的な感じになったので、そのご報告の記事を書こうと思いやーす。

プリザンターとは?

プリザンターとは株式会社インプリムが開発しているオープンソースのWebデータベースです。
データ管理やら業務アプリがマウス操作だけ(ノンプログラミング)でサクッと作れてしまう超有能なプラットフォーム(しかもOSSなので無料という!)なのですな。


オープンソースで脱エクセル!Pleasanter公式サイト


ということで、早速水の中に入れていきましょか!

プリザンターを水の中に入れる方法

まずは公式ページより、「jquery.ripples-min.js」を引っ張ってきます。
そしてプリザンターの「Implem.Pleasanter/Scripts/Plugins」にファイルを入れます。



そしてこのカレンダーを~・・・

水の中へIN!!

水の中へIN.css
html{
    background: #33CCFF;
}

#Grid {
    background: #33CCFF;
}

#CalenderBody {
    background: #33CCFF;
}

そしてjquery.ripples.jsをスクリプトタグへ設定。

水の中へIN.js
var script = document.createElement("script");
script.setAttribute("src", "/scripts/plugins/jquery.ripples-min.js");
document.getElementsByTagName("Canvas")[0].appendChild(script);

カレンダーに戻ってDevToolsから以下を実行すると・・・

$("html").ripples();
$("#Grid").ripples();

ripples.gif

おー!水の中にいるような感じになりましたね!
良い感じでございヤース!

おわりに

以上、プリザンターのカレンダーを水の中に入れてみたお話でした。

簡単なエフェクトには使えそうな気もするので、頭の片隅には置いておこうと思いヤース。

7
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1