Bu yazımızda Css ve Jquery kullanarak butonlara tıklandığında metin kutusu içerisindeki değeri arttırıp azaltmayı öğreneceğiz.
Örneğin bir ETicaret sitesi düşünelim. Sitede alışveriş yaparken alacağımız ürünleri sepete atarken ürünün kaç adet olacağını belirttiğimiz kısım bulunuyor. İşte o tarz bir uygulama yapıyor olacağız.
Uygulama üzerinde daha anlaşılır olacaktır.
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"> </head> <body> <div> <button class="quantity-minus"><i class="fa fa-minus"></i></button> <input class="quantity-input" type="text" value="1" readonly /> <button class="quantity-plus"><i class="fa fa-plus"></i></button> </div> </body> </html> |
Önemli İconlar için fontawesome versiyon 5.6.1’i sayfamıza dahil ediyoruz.
Css kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.quantity-input { width: 45px; height: 36px; text-align: center; float: left; font-size: 18px; border: 1px solid gray; border-left: none; border-right: none; color: gray; } .quantity-minus, .quantity-plus { color: #fff; border: none; width: 40px; height: 40px; font-size: 20px; float: left; } .quantity-minus { background-color: #E71426; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .quantity-plus { background-color: #13D008; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } |
Jquery kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { quantityValue = parseInt($(".quantity-input").val()); $(".quantity-minus").click(function () { if (quantityValue > 1) { quantityValue--; $(".quantity-input").attr("value", quantityValue); } }); $(".quantity-plus").click(function () { if (quantityValue < 100) { quantityValue++; $(".quantity-input").attr("value", quantityValue); } }); }); </script> |
Kısaca yazdıklarımızı özetlersek;
► Metin kutusunun değerine ilk olarak 1 veriyoruz ve değerin elle değiştirilmemesi için input etiketine readonly parametresini yazıyoruz. Böylece input’un değerini sadece butonları kullanarak değiştirilebilir yapmış oluyoruz.
► Azalt butonuna tıklayınca değer 1’den büyükse değeri 1 azaltıp metin kutusuna yazdırıyoruz. Böylece değer 1’den küçük olamayacak.
► Arttır butonuna tıklayınca değer 100’den küçükse değeri 1 arttırıp metin kutusuna yazdırıyoruz. Böylece değer 100’den büyük olamayacak.
Uygulamamızın Son Hali
Şu yazılar da ilginizi çekebilir.
Animasyonlu Hamburger İcon Yapımı
Jquery ile Beğendim – Beğenmedim Uygulaması
Yeni bir yazımda görüşmek üzere.
