Jquery Hesablama İşlemi

Yapmış olduğunuz projelerde kimi durumda site içerisinde sayfa yenilemeden anlık hesaplama yaptırmanız gerekiyor işte bu noktada jquery veya ajax devreye giriyor 🙂 ben se her ikisini birden kullanayım dedim 🙂 Aşağıda projemde kullanmış olduğum hesablama fonksiyounu umarım işine yarar 🙂

Js Kod

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript” language=”javascript”>
function hesabla()
{
price = document.getElementById(“price”).value; // id’si price olan elemntin değerini alıyoruz.
masraf=document.getElementById(“masraf”).value; //id’si masaf olan elementin değerini alıyoruz.
toplam=parseInt(price)+parseInt(masraf); // Matematiksek işleme sokuyoruz
kdv=toplam*0.18; // kdv hesaplandı.
toplamkdv=toplam*1.18; // toplam kdv hesaplandı.
$(‘#kdv’).html(kdv); // id’si kdv olan div’e değer atıyoruz
$(‘#toplam’).html(toplamkdv); // id’si toplam olan div’e değer atıyrouz.
}

</script>

 

Uygulama Kodu

<input name=”price” type=”text” id=”price”  onkeyup=”hesabla()” /> // Değer Girildiği anda hesaplama işlemi çalışacak.

<input  id=”masraf”  onkeyup=”hesabla()”  type=”text” name=”masraf” /> // Değer Girildiği anda hesaplama işlemi çalışacak.

<div id=”kdv”></div> // İşlemin kdv değeri gelecek.

<div id=”toplam”></div> // İşlemin Toplam Değeri Gelecek

 

İyi Çalışmalar.

 

 

jQuery Menü Yapımı

jQuery ile gerçekten 3 – 5 satır kod ile inanılmaz şeyler yapabiliyoruz. biraz da css (style) bilgisi ile web sitenizi zenginleştirebilirsiniz. 2 örnegim olan jQuery menu kodlaması gayet basitir.
1.Adım ——
Bir Adet html sayfası oluşturalım.
sonra editorümüz aracılıgıyla bu sayfayı açalım (not defteri , dreamweaver vs.)
head taglarının arasına gerekli dosyaları çagıralım.

 
<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script src="jquery-1.2.3.min.js" type="text/javascript"></script> <script src="menu.js" type="text/javascript"></script>  

2.Adım ——
Bir Adet text dosyası açıp icine şu kodları ekleyin. sonra uzantısını (*.txt) silip yerine (*.js) yazalım ÖRNEK : menu.js 

 
function mainmenu(){
$(" #menu ul ").css({display: "none"}); // Opera Fix
$(" #menu li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
} 

$(document).ready(function(){
mainmenu();
}); 

3.Adım ——
Aynı şekilde bir txt dosyası açıp şu kodları girelim. sonra uzantısını (*.txt) silip yerine (*.css) yazalım ÖRNEK : style.css 

 
#menu, #menu ul{
margin:0;
padding:0;
list-style-type:none;
position:relative;
line-height:1.5em;
height: 30px;
width: auto;
}

#menu a{
display:block;
padding:0px 5px;
border:1px solid #ff0000;
color:#fff;
text-decoration:none;
background:url(button.png);
}

#menu a:hover{
border:1px solid #000000;
color:#fff;
background:url(button.active.png);
}

#menu li{
float:left;
position:relative;
}

#menu ul {
position:absolute;
display:none;
width:auto;
top:1.5em;
}

#menu li ul a{
width:190px;
height:30;
float:left;
} 

#menu ul ul{
top:auto;
} 
#menu li ul ul {
left:190px;
margin:0px 0 0 10px;
} 

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menuli li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
} 

4.Adım ——
Sayfamızın içine (body tagları arasına) gerekli kodları girelim. 

burada alt menun alt menusu ve onunda alt menusu ekleyebilrisiniz 😀 bunu dahada ileri görtürmek siizn elinizde. 

 
<ul id="menu"> 
 <li><a href="#">örnek 1</a>  <ul>   <li><a href="#">örnek 1.1</a>  <ul>   <li><a href="#">1.1.1</a></li>   <li><a href="#">1.1.3</a></li>  </ul>  </li>  </ul>  </li>   <li><a href="#">örnek 1</a></li>   <li><a href="#">örnek 2</a></li>   <li><a href="#">örnek 3</a></li>   <li><a href="#">örnek 4</a></li>   <li><a href="#">örnek 5</a></li>  </ul> 

Bu Örnegi
BURADAN inceleyebilirsiniz
BURADAN indirebilirsiniz