Aycan BÜLBÜL – Sayfa 5 – aycan.net

jQuery Rating Uygulaması

Merhaba arkadaşlar, her projede farklım farklı yazmaktan yoruldum ve burada paylaşıyorum.

Html Kodları

<div class="rating">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
</div><!-- /. rating -->

</div>

Css Kodları

.rating{padding: 10px;}
    .rating a{width: 60px; height: 60px; background: url('stars.png') left top no-repeat; display: inline-block;  text-indent: -9999px; margin: 0 0;}
    .rating a.selected,
    .rating a.hover{background-position: right top; transform: scale(1.1); transition: transform ease-in-out .2s;}

.rating{padding: 10px;}

.rating a{width: 60px; height: 60px; background: url('stars.png') left top no-repeat; display: inline-block; text-indent: -9999px; margin: 0 0;}

.rating a.selected,

.rating a.hover{background-position: right top; transform: scale(1.1); transition: transform ease-in-out .2s;}

Js Kodları

rating(function (e)
{
    $('.callback').html('Selected : 1-' + e);
});

function rating(callback)
{
    $('.rating a').on(
    {
        mouseover : function () {
            $(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('hover');
        },
        mouseout : function () {
            $('.rating  a').removeClass('hover');
        },
        click : function ()
        {
            if($('.rating a').hasClass('selected'))
            {
                // Alert
                $('.rating a').removeClass('selected');
            } 

                $(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('selected').removeClass('hover');
            typeof callback === 'function' && callback.call( this, ($(this).index() + 1) );
        }
    });
}

rating(function (e)

{

$('.callback').html('Selected : 1-' + e);

});

function rating(callback)

{

$('.rating a').on(

{

mouseover : function () {

$(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('hover');

mouseout : function () {

$('.rating a').removeClass('hover');

click : function ()

{

if($('.rating a').hasClass('selected'))

{

// Alert

$('.rating a').removeClass('selected');

}

$(this).parent().find('a:lt(' + ($(this).index() + 1) + ')').addClass('selected').removeClass('hover');

typeof callback === 'function' && callback.call( this, ($(this).index() + 1) );

}

});

}

Codepen:

See the Pen jQuery Rating Uygulaması by Aycan BÜLBÜL (@AycanB) on CodePen.

Aycan.net demo -> http://calismalar.aycan.net/rating/

jQuery .slice() nedir ? nasıl kullanılır ?

Merhaba Arkadaşlar

Bugun ki konumuzda .slice() fonksiyonun kullanımını inceliycez.

.slice() fonksiyonun en basit tanımı olarak iki adet indeks noktası arasındaki nesnelerini seçtiğini söylebiliriz.

Aşağıdaki örnek güzel bir örnek olduğu için jquery.com‘dan aldım ve biraz türkçeleştirdim.

HTML Kodlarımız

  <p>
    <button>Kutu Seçmek İçin Tıklayın</button>
    <span>Butona Tıkla !</span>
  </p>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

<p>

<button>Kutu Seçmek İçin Tıklayın</button>

<span>Butona Tıkla !</span>

</p>

Okumaya devam et jQuery .slice() nedir ? nasıl kullanılır ?

jQuery :first-child nedir ? nasıl kullanılır ?

:first-child

Girilen seçiciye göre barındırılan ilk nesneyi verir. Her zaman ki gibi daha iyi anlaşılır olabilmesi için basit bir örnek verelim.

HTML Kodlarımız

<div>
  <span>Ozan</span>
  <span>Erkan</span>
  <span>Emin</span>
</div>
<div>
  <span>OZAN</span>
  <span>ERKAN</span>
  <span>EMİN</span>
</div>

<div>

<span>Erkan</span>

</div>

<div>

<span>ERKAN</span>

</div>

Okumaya devam et jQuery :first-child nedir ? nasıl kullanılır ?

jQuery .has() nedir ? nasıl kullanılır ?

İçerisinde girilen nesneye sahip olan nesneleri seçer.

$(“ul”).has(“li”) fonksiyonu $(“ul:has(li)”) filtresinden daha hızlı sonuç verir.

HTML Kodlarımız

<ul>
  <li>Mercedes <span>candır</span></li>
  <li>TOFAŞ </li>
  <li>BMW <span>candır</span></li>
  <li>AUDI <span>candır</span></li>
  <li>İRENO</li>
  <li>VOLVO <span>candır</span></li>
  <li>PEGEOUT</li>
  <li>JAGUAR <span>candır</span> </li>
  <li>Huyundaaayy</li>
</ul>

<button>Can Olanları göster</button>

<ul>

<li>Mercedes <span>candır</span></li>

<li>TOFAŞ </li>

<li>BMW <span>candır</span></li>

<li>AUDI <span>candır</span></li>

<li>İRENO</li>

<li>VOLVO <span>candır</span></li>

<li>PEGEOUT</li>

<li>JAGUAR <span>candır</span> </li>

<li>Huyundaaayy</li>

</ul>

<button>Can Olanları göster</button>

Okumaya devam et jQuery .has() nedir ? nasıl kullanılır ?

jQuery .eq() nedir ? nasıl kullanılır ?

Girilen indeks numaralı nesneyi seçer.
Örneğin: 5 adet nesne içerisinde .eq(-1) yazdığımızda alttan 5. nesne seçilir.

Yani üstten 0,1,2,3,4,5 alttan ise -1,-2,-3,-4,-5 diye nesneler sıralanır.

Html Kodları

<div>
    <span>Fizik</span>
    <span>Kimya</span>
    <span>Biyoloji</span>
    <span>Matematik</span>
    <span>Geometri</span>
</div>
<br>
<button class="bir">
$('span').eq(2); 
</button>
<button class="iki">
$('span').eq(-1);
</button>
<button class="uc">
$('span').eq(-2);
</button>

<div>

<span>Fizik</span>

<span>Kimya</span>

<span>Biyoloji</span>

<span>Matematik</span>

<span>Geometri</span>

</div>

<br>

$('span').eq(2);

</button>

$('span').eq(-1);

</button>

$('span').eq(-2);

</button>

Okumaya devam et jQuery .eq() nedir ? nasıl kullanılır ?