쿠...sal: [컴][html] mootools 개발 template

mootools.js
https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js

API cookbook

$$('#interestB4tax').set('value', formatCurrency(this.interestBeforeTax));

$$('#calculate').addEvent('click',function(event) {
    event.preventDefault();    // default action is not triggered

$each($$('.calclass'),function(el) {
    el.addEvent('focus',function(event) {
      event.preventDefault();
    });
  });

interestCal.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js">

</script>
<script type="text/javascript" src="./interestCal.js"></script>

<style type="text/css">
.title {
    font-size: 13px;
  margin:25px 50px 75px 50px;
    
    background-color: white;
}

</style>

</head>
<body>

<table>
<tr>
  <td>
  <span class='title'>예금액(원)</span>
  <span class='title'>연이율(%)</span>
  <span class='title'>세전이자(원)</span>
  <span class='title'>세율(%)</span>
  <span class='title'>세후이율(%)</span>
  <span class='title'>세후이자(원)</span>
  </td>
</tr>
<tr>
  <td>
  <input type="text" id="deposit" class="calclass"/>
  <input type="text" id="interestrate" class="calclass"/>
  <input type="text" id="interestB4tax" class="calclass"/>
  <input type="text" id="taxrate" class="calclass"/>
  <input type="text" id="realtaxrate" class="calclass"/>
  <input type="text" id="interestaftertax" class="calclass"/>
  </td>
</tr>

<div><input type="submit" value="Calculate" id="calculate"></div>

</body>
</html>

interestCal.js

function formatCurrency(num) {
  num = num.toString();
  for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
    num = num.substring(0, num.length - (4 * i + 3))
        + ','
        + num.substring(num.length - (4 * i + 3));
  return num
}
var InterestCalBox = new Class({
  //implements
  Implements: [Options],
  Privates: {
    name: "",
    deposit: 0,
    interestRate: 0,
    interestBeforeTax: 0,
    taxRate: 0,
    interestAfterTax: 0
  },
  
  //options
  options:{
    container: null,
    heads: null,
    initSize: null
  },
  
  //initialization
  initialize: function(options) {
    //set options
    this.setOptions(options);
    
  },
  
  // public methods
  cal : function(){
    this.interestBeforeTax = this.deposit * this.interestRate * 0.01;
    this.realTaxRate = this.interestRate * (1-(this.taxRate*0.01));
    this.interestAfterTax = this.deposit * this.realTaxRate;
  },
  
  showInterestBeforeTax : function(){
    $$('#interestB4tax').set('value', formatCurrency(this.interestBeforeTax));
  },
  showRealTaxRate : function(){
    $$('#realtaxrate').set('value', formatCurrency(this.realTaxRate));
  },
  showInterestAfterTax : function(){
    $$('#interestaftertax').set('value', formatCurrency(this.interestAfterTax));
  },
  
  /**
    make a row which has all the input values
    
    example:
      <div>
        <span class="title">aa</span>
        <span class="title">1111</span>
        <span class="title">11</span>
        <span class="title">122.21000000000001</span>
        <span class="title">1</span>
        <span class="title">10.89</span>
        <span class="title">12098.79</span>
      </div>
  **/
  toString : function(){
    var valList = [this.name, this.deposit, this.interestRate, 
        this.interestBeforeTax, this.taxRate, this.realTaxRate,
        this.interestAfterTax];
    
    var elDiv = new Element('div');
    var colCount = $$('#inputheader').getChildren('span')[0].length;
    for(var j=0;j<colCount;j++){
      var el = new Element('span',{
        class: 'title',
        text : valList[j]
      }).inject(elDiv);
      
    }
    
    return elDiv;
    
  },
  
  // setter
  setName : function(val){
    this.name = val;
  },
  setDeposit : function(val){
    this.deposit = val;
  },
  setInterestRate : function(val){
    this.interestRate = val;
  },
  setInterestBeforeTax : function(val){
    this.interestBeforeTax = val;
  },
  setTaxRate : function(val){
    this.taxRate = val;
  },
  setRealTaxRate : function(val){
    this.realTaxRate = val;
  },
  setInterestAfterTax : function(val){
    this.interestAfterTax = val;
  }
      

});

쿠...sal

[컴][html] mootools 개발 template

댓글 없음:

댓글 쓰기