今日の人気記事

  1. 入力に応じてテキストエリアの高さを調節「Autosize」
  2. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  3. 指定した数値から折れ線グラフを描画「SimpleChart」
  4. シンプルな日付選択フォームを実装「Date Selector」
  5. 使用しているブラウザーのUserAgentを表示「detectBrowser」

Web上で計算を! 電卓を実装する「Calculator」 - jQueryプラグイン

スポンサーリンク

Web上に電卓を実装するプラグイン「Calculator」を紹介します。

Calculator

このプラグインを使えば、Web上に四則演算をすることのできる電卓を作成することができます。クリックだけで簡単に操作できるので、Windowsに標準搭載されている「電卓」に似てるかな!?

スポンサーリンク

デモで電卓の使用感を確かめてみてください。

「Calculator」のデモ

ソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Calculatorのデモでーす。">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src='js/dep_js/jquery-2.1.0.min.js'></script>
<script src='js/dep_js/jquery-ui-1.10.4.custom.min.js'></script>
<script src='js/jquery.thecalculator.js'></script>
<link rel=stylesheet href='css/dep_css/jquery-ui.min.css'>
<link rel=stylesheet href='css/jquery.thecalculator.css'>
</head>
<body>
<h1>Calculatorのデモでーす。</h1>
<div id='calc'></div>

<script>
  $(document).ready(function () {
    $('#calc').calculator().draggable();
  });
</script>
</body>
</htmL>

jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Calculator

スポンサーリンク

関連記事(一部広告含む)