VLSM

by David Joseph Guzsik

HTML

<p>A(z) <input type="text" id="network" pattern="^(\d{1,2}|1\d{2}|2[0-5]\d)\.(\d{1,2}|1\d{2}|2[0-5]\d)\.(\d{1,2}|1\d{2}|2[0-5]\d)\.(\d{1,2}|1\d{2}|2[0-5]\d)\/(\d|[12]\d|3[12])$" placeholder="10.0.0.0/8" required> hálózat felbontása VLSM-el.<br><small>(A <a href="#" id="ac">osztályos</a>/<a href="#" id="af">teljes</a>, B <a href="#" id="bc">osztályos</a>/<a href="#" id="bf">teljes</a>, C <a href="#" id="cc">osztályos</a>/<a href="#" id="cf">teljes</a>)</small></p>
<p>Hálózatok:<br><textarea placeholder="A 20
B 60
C 40
VLAN10 10
VLAN20 20" rows=8 cols=30></textarea></p>

CSS

a {
  color: blue;
  text-decoration: unerline;
}
#network {
  color: #080;
  border: 1px solid;
  padding: 2px;
}
#network:invalid {
  color: red;
}

JavaScript

$(function(){
	var $network = $('#network'),
  		nets = {
      	ac: '10.0.0.0/8',
        af: '10.0.0.0/8',
        bc: '172.16.0.0/16',
        bf: '172.16.0.0/12',
        cc: '192.168.0.0/24',
        cf: '192.168.0.0/16',
      };
   
  $('#ac,#af,#bc,#bf,#cc,#cf').on('click',function(e){
  	e.preventDefault();
    
    var index = $(this).attr('id');
    $network.fadeTo(200,0,function(){
    	$network.val(nets[index]).fadeTo(200,1);
    });
  });
});