jQuery计算器输入插件jCalculator

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery计算器输入插件jCalculator 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype>
<html>
<head>
    <title>jQuery������������jCalculator</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">    
    <link rel="stylesheet" type="text/css" href="css/jcalculator.css" media="screen">
</head>

<body>

    <div class="header">
        <img src="px/icon.png" />
        <h1>jCalculator</h1>
        <h2>Awesome jQuery plugin for calculator inputs</h2>
    </div>
    
    <div class="demonstration">
        <div class="container">
            <h2>Demonstration</h2>            
            <input id="testinput" type="text" placeholder="click here to see the magic" />            
        </div>
    </div>

    <div class="container" id="content">
        <h2>How to install</h2>
        <p>1. Include the following files before <span class="code">body</span> tag close.</p>
        <p class="sublime">
            <span class="w">&lt;</span><span class="p">link</span> <span class="g">href</span><span class="w">=</span>"path_to/jcalculator.css" <span class="g">rel</span><span class="w">=</span>"stylesheet" <span class="g">type</span><span class="w">=</span>"text/css"<span class="w">&gt;</span><br>
            <span class="comment">&lt;-- jQuery library --&gt;</span><br>
            <span class="w">&lt;</span><span class="p">script</span> <span class="g">type</span><span class="w">=</span>"text/javascript" src="path_to/jquery.js"<span class="w">&gt;&lt;/</span><span class="p">script</span><span class="w">&gt;</span><br>
            <span class="w">&lt;</span><span class="p">script</span> <span class="g">type</span><span class="w">=</span>"text/javascript" src="path_to/jcalculator.min.js"<span class="w">&gt;&lt;/</span><span class="p">script</span><span class="w">&gt;</span>
        </p>
        <p>2. Call the <span class="code">jCalculator</span> plugin.</p>
        <p class="sublime">
            <span class="w">&lt;</span><span class="p">script</span> <span class="g">type</span><span class="w">=</span>"text/javascript"<span class="w">&gt;</span> <br>
            <span class="padding"><span class="p">$</span><span class="w">(</span>'#yourInput'<span class="w">).calculator();</span><br>
        
            <span class="w">&lt;/</span><span class="p">script</span><span class="w">&gt;</span>
        </span></p>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/jcalculator.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
      $(document).ready(function() {                       
        $('#testinput').calculator();
      });

      function popitup(url) {
        newwindow=window.open(url,'name','height=300,width=600');
        if (window.focus) {newwindow.focus()}
        return false;
    }
    </script>
</body>
</html>

CSS代码(style.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;text-decoration:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after{content:"";content:none;}
q:before,q:after{content:"";content:none;}
table{border-collapse:collapse;border-spacing:0;}
/*========================*/
/*========= BODY =========*/
/*========================*/
 .container{width:680px;margin:0 auto;}
.container h2{font-weight:bold;font-family:Roboto;font-size:46px;color:#5e5e5e;margin:0 0 30px;}
/*========================*/
/*======== HEADER ========*/
/*========================*/
 .header{padding:60px 0 40px;text-align:center;background:#fc6e51;font-family:Roboto;color:#fff;position:relative;border-bottom:20px solid #db5138;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.header img{opacity:.5;}
.header h1{font-size:64px;line-height:1.6;font-weight:900;}
.header h2{font-size:1.375rem;opacity:0.8;color:#fff;}
.header a{display:inline-block;margin:25px 0 0;padding:0 25px;clear:both;color:#fff;font-size:12px;text-transform:uppercase;text-decoration:none;border:2px solid rgba(255,255,255,0.4);height:40px;line-height:40px;border-radius:5px;-webkit-transition:.2s all;transition:.2s all;}
.header a:hover{background:rgba(255,255,255,0.1);}
.header a:active{position:relative;top:1px;}
/*=========================*/
/*======== CONTENT ========*/
/*=========================*/
 #content{margin-top:50px;text-align:center;font-family:Roboto;}
#content p{margin:0 0 35px;}
#content p .code{font-family:Courier New;font-size:14px;background:#ebebeb;margin:0 2px;padding:5px 10px;}
#content .sublime{text-align:left;border-radius:5px;background:#303030;line-height:1.8;text-align:left;padding:30px 40px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#e6db74;font-size:14px;font-family:Courier New;}
#content .sublime .p{color:#f92672;}
#content .sublime .w{color:#fff;}
#content .sublime .g{color:#7fe22a;}
#content .sublime .comment{color:#75715e;}
#content .sublime .padding{padding:0 0 0 25px;}
#content .sublime .padding-2{padding:0 0 0 60px;}
/*=========================*/
/*===== DEMONSTRATION =====*/
/*=========================*/
 .demonstration{margin:50px 0 0;background:#f3f3f3;font-family:Roboto;padding:60px 0;color:#5e5e5e;text-align:center;}
.demonstration .jcalculator_wrap{width:460px;margin:0 auto;}
.demonstration .jcalculator_wrap input{border:0;padding:20px 30px;width:460px;color:#5e5e5e;font-size:24px;font-family:Roboto;border-radius:5px;outline:0;border:4px solid #D8D8D8;}
.demonstration .jcalculator_wrap input:focus{border-color:#37BE42;border-radius:5px 5px 0px 5px;}
.demonstration .jcalculator_wrap input:focus .jcalculator{display:block;}
/*========================*/
/*========= SHARE ========*/
/*========================*/
 #share{margin-top:50px;margin-bottom:50px;text-align:center;}
#share h2{margin:0 0 28px;}
#share a{width:80px;height:80px;display:inline-block;border-radius:50%;}
#share a img{width:30px;height:30px;border:0px;padding-top:25px;}
#share .fb{background-color:#3b5998;}
#share .tw{background-color:#00acee;margin:0 5px;}
#share .gplus{background-color:#dd4b39;}
/*=========================*/
/*========= FOOTER ========*/
/*=========================*/
 .footer{background:#303030;font-family:Roboto;text-align:center;color:#999;font-size:12px;padding:25px 0;}
.footer a{color:#fff;border-bottom:1px solid #fff;padding:0 0 2px;}

附件:下载该文件资源,减少时间成本(增值服务)