Bilgisayar » jquery http://www.bilgisayar.me Wed, 29 Aug 2018 20:31:06 +0000 tr-TR hourly 1 https://wordpress.org/?v=4.2.29 JQuery ile HTML textarea etiketinde kelime sınırlaması http://www.bilgisayar.me/index.php/2015/08/05/jquery-ile-html-textarea-etiketinde-kelime-sinirlamasi/ http://www.bilgisayar.me/index.php/2015/08/05/jquery-ile-html-textarea-etiketinde-kelime-sinirlamasi/#comments Wed, 05 Aug 2015 18:19:02 +0000 http://www.bilgisayar.me/?p=1482 DEMO]]> Jquery eklentisini sayfanıza eklemeyi unutmayın.

 
 
 

HTML

<textarea name="textarea_etiketi" id="textarea_etiketi" class="form-control karakter"></textarea>
<div class="kalan">
    Kalan <span id="kalan_karakter"></span> karakter sayısı
</div>

JQuery

<script>
var max_karakter_sayisi = 500;
(function($){
    $("#kalan_karakter").html(max_karakter_sayisi);
    $('#textarea_etiketi').bind('input propertychange', function() {
        karakterSay();
    });
    $('#textarea_etiketi').bind('keyup', null, function(e) {
        karakterSay();
    });
})(jQuery);

function karakterSay(){
    var textareaetiketi = $("#textarea_etiketi").val();
    var textareaetiketi_uzunluk = textareaetiketi.length;
    var kalan_karakter = max_karakter_sayisi - textareaetiketi_uzunluk;
    if(textareaetiketi_uzunluk <= max_karakter_sayisi)
    {
        $("#kalan_karakter")
			.html(kalan_karakter)
			.css("color", (kalan_karakter <=10 ? "#000000" : "#666"))
			.css("font-weight", 'normal');
    }
    else
    {
        $("#kalan_karakter")
			.html(kalan_karakter)
			.css("color", "#FF0000").css("font-weight", 'bold');
    }
}
</script>

Hepsi bir arada

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery ile HTML textarea etiketinde kelime sınırlaması</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<textarea name="textarea_etiketi" id="textarea_etiketi" style="width:99%; padding:5px; height:auto; line-height:1.6em;"></textarea>
<div class="kalan"> Kalan <span id="kalan_karakter"></span> karakter sayısı </div>
<script>
var max_karakter_sayisi = 500;
(function($){
    $("#kalan_karakter").html(max_karakter_sayisi);
    $('#textarea_etiketi').bind('input propertychange', function() {
        karakterSay();
    });
    $('#textarea_etiketi').bind('keyup', null, function(e) {
        karakterSay();
    });
})(jQuery);

function karakterSay(){
    var textareaetiketi = $("#textarea_etiketi").val();
    var textareaetiketi_uzunluk = textareaetiketi.length;
    var kalan_karakter = max_karakter_sayisi - textareaetiketi_uzunluk;
    if(textareaetiketi_uzunluk <= max_karakter_sayisi)
    {
        $("#kalan_karakter")
			.html(kalan_karakter)
			.css("color", (kalan_karakter <=10 ? "#000000" : "#666"))
			.css("font-weight", 'normal');
    }
    else
    {
        $("#kalan_karakter")
			.html(kalan_karakter)
			.css("color", "#FF0000").css("font-weight", 'bold');
    }
}
</script>
</body>
</html>
]]> http://www.bilgisayar.me/index.php/2015/08/05/jquery-ile-html-textarea-etiketinde-kelime-sinirlamasi/feed/ 0 PHP/MYSQL ve JQuery ile Basit Dosya Yönetici Uygulaması http://www.bilgisayar.me/index.php/2015/07/31/phpmysql-ve-jquery-ile-basit-dosya-yonetici-uygulamasi/ http://www.bilgisayar.me/index.php/2015/07/31/phpmysql-ve-jquery-ile-basit-dosya-yonetici-uygulamasi/#comments Fri, 31 Jul 2015 22:41:45 +0000 http://www.bilgisayar.me/?p=1427 YÜKLE]]>

 
 
 

Özellikler:
  • Klasör oluşturma
  • Dropzone Jquery eklentisi ile sabit diske dosya yükleme
  • Çoklu veya tek dosya silme
Ekran Görüntüleri:

dosya_yonetici

dosya_yonetici_1

dosya_yonetici_2

dosya_yonetici_3

]]> http://www.bilgisayar.me/index.php/2015/07/31/phpmysql-ve-jquery-ile-basit-dosya-yonetici-uygulamasi/feed/ 0 JQuery ile bir dizeden dizi oluşturma http://www.bilgisayar.me/index.php/2015/07/29/jquery-ile-bir-dizeden-dizi-olusturma/ http://www.bilgisayar.me/index.php/2015/07/29/jquery-ile-bir-dizeden-dizi-olusturma/#comments Wed, 29 Jul 2015 20:12:55 +0000 http://www.bilgisayar.me/?p=1347 jQuery split() işlevi ile bir dizeden(string) bir dizi(array), jQuery join() işlevi ile de tekrardan bir diziyi bir dizeye dönüştürmek oldukça basit bir işlemdir.

Arraylar(dizi) hakkında bilgilerinizi tazelemek için burayı tıklayın.

split() işlevi

Örneğin elimizde aşağıdaki gibi bir dizemiz olsun.

<script>
var dize = "a,b,c,s,t,u,p,d";
var dizi = dize.split(',');
</script>

Diziyi döngü içine almak istersek

<script>
$.each(dizi, function(index, value) { 
    alert(index + ': ' + value);
});
</script>

Dizideki değerlere tek tek ulaşmak için

// diziler 0' dan başlarlar
dizi[0]; // a 
dizi[3]; // s
dizi[5]; // u

Bazı dize örnekleri

var dize = "a b c s t u p d";
var dizi = dize.split(' ');

var dize = "a:b:c:s:t:u:p:d";
var dizi = dize.split(':');

join() işlevi

Bir diziyi dizeye dönüştürmek için kullanılır.

var dizi= new Array("A", "B", "C", "E", "F", "Z", "S", "D"); // dizi oluştur
var dize= dizi.join(','); // diziyi dizeye dönüştür
alert(dize); // dizemiz A,B,C,E,F,Z,S,D
]]> http://www.bilgisayar.me/index.php/2015/07/29/jquery-ile-bir-dizeden-dizi-olusturma/feed/ 0 Jquery ile HTML seçme kutusuna bir değer ekleme http://www.bilgisayar.me/index.php/2015/07/29/jquery-ile-html-secme-kutusuna-bir-deger-ekleme/ http://www.bilgisayar.me/index.php/2015/07/29/jquery-ile-html-secme-kutusuna-bir-deger-ekleme/#comments Wed, 29 Jul 2015 19:14:44 +0000 http://www.bilgisayar.me/?p=1320 DEMO]]> Bu yazımızda jQuery ile HTML seçme kutusuna yeni bir seçenek eklemek nasıl olur onu öğrenecegiz.
 

 
 
 
secenekkutusu
 
jQuery ile HTML seçme kutusuna yeni bir seçenek eklemek için önce seçenek kutumuzu oluşturalım.

<select name="box-1" id="box-1" class="form-control">
    <option val="MYSQL">MYSQL</option>
    <option val="PHP">PHP</option>
    <option val="JQuery">JQuery</option>
    <option val="HTML">HTML</option>
    <option val="CSS3">CSS3</option>
</select>
<input name="yeniekle"  id="yeniekle" type="text" class="form-control" placeholder="eklenecek kelime"/>
<button name="secekle" id="secekle" type="button" class="btn btn-info">Yeni Ekle</button>

Daha sonra JQuery kodu ile istenilen kelimeyi seçenek kutumuza ekleyelim.

<script>
(function($){
    $(document).on("click", "#secekle",function(){
        var yeniekle = $("#yeniekle").val();
        if (yeniekle !=''){
            $('#box-1').append('<option value="' + yeniekle + '" selected="selected">' + yeniekle + '</option>');
            $("#yeniekle").val('');
        } else {
            alert ("Eklenecek Kelimeyi Girin");	
            return false;
        }
    });
})(jQuery);
</script>

Hepsi bir arada

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilgisayar.me</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
<select name="box-1" id="box-1" class="form-control">
    <option val="MYSQL">MYSQL</option>
    <option val="PHP">PHP</option>
    <option val="JQuery">JQuery</option>
    <option val="HTML">HTML</option>
    <option val="CSS3">CSS3</option>
</select>
<input name="yeniekle"  id="yeniekle" type="text" class="form-control" placeholder="eklenecek kelime"/>
<button name="secekle" id="secekle" type="button" class="btn btn-info">Yeni Ekle</button>
</div>
<script>
(function($){
    $(document).on("click", "#secekle",function(){
        var yeniekle = $("#yeniekle").val();
        if (yeniekle !=''){
            $('#box-1').append('<option value="' + yeniekle + '" selected="selected">' + yeniekle + '</option>');
            $("#yeniekle").val('');
        } else {
            alert ("Eklenecek Kelimeyi Girin");	
            return false;
        }
    });
})(jQuery);
</script>
</body>
</html>
]]> http://www.bilgisayar.me/index.php/2015/07/29/jquery-ile-html-secme-kutusuna-bir-deger-ekleme/feed/ 0 JQuery ile form değerlerinin değişip değişmedigini kontrol etme http://www.bilgisayar.me/index.php/2015/07/24/jquery-ile-form-degerlerinin-degisip-degismedigini-kontrol-etme/ http://www.bilgisayar.me/index.php/2015/07/24/jquery-ile-form-degerlerinin-degisip-degismedigini-kontrol-etme/#comments Sat, 25 Jul 2015 00:56:02 +0000 http://www.bilgisayar.me/?p=1190 FORM bilgilerini veritabanına göndermeden önce, FORM değerlerinin değişip değişmedigini kontrol etmek istersek, önceki FORM bilgileri ile yeni FORM bilgilerini aşağıdaki örnekte görüldüğü üzere SERIALIZE ile kıyaslamamız yeterlidir. 

(function() {
    var formoncekiveri = $("#form").serialize(); 
    $("#kaydetbutton").click(function() {
        if ($("#form").serialize() != formoncekiveri ) {
            // form yeni verilere sahip
        }
    });
});

HTML sayfasında görmek istersek

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilgisayar.me</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<form id="form">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="10%"> </td>
      <td width="90%"> </td>
    </tr>
    <tr>
      <td>İsim</td>
      <td><input type="text" name="isim" id="isim" value="Hakan" /></td>
    </tr>
    <tr>
      <td>Soyad</td>
      <td><input type="text" name="soyad" id="soyad" value="Atilgan"/></td>
    </tr>
  </table>
</form>
<button name="kaydetbutton" id="kaydetbutton" type="submit">Kaydet</button>
<script type='text/javascript'>
(function() {
    var formoncekiveri = $("#form").serialize(); // ilk FROM verilerini sakla
    $(document).on("click","#kaydetbutton", function(e) {
        e.preventDefault();
        if ($("#form").serialize() != formoncekiveri ) { // ilk ve son FROM verilerini kıyasla
            alert("Form Değişti");
        } else {
            alert("Form Değişmedi");	
        }
    });
})(jQuery);
</script>
</body>
</html>
]]> http://www.bilgisayar.me/index.php/2015/07/24/jquery-ile-form-degerlerinin-degisip-degismedigini-kontrol-etme/feed/ 0 jQuery $.each kullanım örnekleri http://www.bilgisayar.me/index.php/2015/07/23/jquery-foreach-ve-each-kullanim-ornekleri/ http://www.bilgisayar.me/index.php/2015/07/23/jquery-foreach-ve-each-kullanim-ornekleri/#comments Thu, 23 Jul 2015 20:17:22 +0000 http://www.bilgisayar.me/?p=1230 JQuery’nın foreach ya da for eşdeğerinde olan $.each döngüsünün kullanımı, Jquery uygulamalarınızda bir çok açıdan kullanışlı olacaktır. Aşağıda diziler, nesneler ve HTML elemanları ile ilgili $.each kullanarak nasıl döngü yapılabilir örneklerini bulacaksınız.

JQuery $.each ile dizi döngüsü

$(function(){
    var dizi = ["araba", "uçak", "gemi", "bisiklet", "tren"];
    $.each(dizi, function(index, value){
        console.log("INDEKS: " + index + " DEGER: " + value);
    });
});

Yukarıdaki scriptin çıkışı aşağıdaki gibi olacaktır:

araba
uçak
gemi
bisiklet
tren

JQuery $.each ile objelerin döngüsü

Dizilerin yanısıra, bazen objeleride döngüye almak isteriz. Aşağıdaki kod JSON nesne döngüsü için bir örnektir.

$(function(){
    var obje = [
        {
            no: 1,
            ad: "Süleyman",
            soyad: "Sol",
        },
        {
            no: 2,
            ad: "Murat",
            soyad: "Demir",
        },
        {
            no: 3,
            ad: "Mustafa",
            soyad: "Alkan",
        },
    ];
    $.each(obje, function(){
        console.log("NO: " + this.no);
        console.log("İSİM: " + this.Ad);
        console.log("SOY İSİM: " + this.soyad);
        console.log(" ");
    });
});

Yukarıdaki scriptin çıkışı aşağıdaki gibi olacaktır:

NO: 1
İSİM: Süleyman
SOY İSİM: Sol

NO: 2
İSİM: Murat
SOY İSİM: Demir

NO: 3
İSİM: Mustafa
SOY İSİM: Alkan

JQuery $.each ile liste döngüsü

Aşağıdaki kod ‘liste’ sınıfına sahip bütün <ul> etiketi içindeki <li> elemanlarının yazı rengini $.each döngüsü ile green(yeşil)’e çevirir.

$(function(){
    $('.liste li').each(function(){
        $(this).css("color", "green");
    }
    });
});

JQuery $.each ile diğer HTML elemanları döngüsü

Liste elemanları yanı sıra her türlü HTML elemanlarınıda döngüde kullanabiliriz. Aşağıda örnekler bunlardan bazılarıdır.

$(function(){
    $('a').each(function(){ // sayfadaki tüm bağlantıları döngüde kullan
        $(this).prop("href", "#"); // bağlantıyı devre dışı bırak
    });
    $('.hide').each(function(){ // .hide sınıfina sahip tüm unsurları döngüde kullan ve sakla
        $(this).hide(); 
    });
    $('pre').each(function(){ // bütün pre etiketlerini bul ve ekle sınıfını ekle
        $(this).addClass("ekle");
    });
});
]]> http://www.bilgisayar.me/index.php/2015/07/23/jquery-foreach-ve-each-kullanim-ornekleri/feed/ 0 JQuery ile açılan liste(select box) değiştiginde yeni sayfaya yönlerdirme http://www.bilgisayar.me/index.php/2015/07/16/jquery-ile-acilan-listeselect-box-degistiginde-yeni-sayfaya-yonlerdirme/ http://www.bilgisayar.me/index.php/2015/07/16/jquery-ile-acilan-listeselect-box-degistiginde-yeni-sayfaya-yonlerdirme/#comments Thu, 16 Jul 2015 21:06:58 +0000 http://www.bilgisayar.me/?p=1157 HTML

<div class="pull-right">Elemanlar
  <select name="kullanicikutusu" id="kullanicikutusu" style="width:300px">
    <option value=""></option>
    <option value="199" selected="selected">Adam Ri</option>
    <option value="89">Amanda Loweryneken</option>
    <option value="200">Anna Bowenneken</option>
    <option value="145">Bethany Olnekenson</option>
    <option value="158">Brent Rednekenburn</option>
    <option value="177">Chris Mornekengan</option>
    <option value="86">Dustin Zimmer</option>
    <option value="187">Greg Lauxman</option>
    <option value="1">Hakan Atilgan</option>
    <option value="198">Jessica Schlossmaner</option>
    <option value="164">Juan Alemasn</option>
    <option value="153">Lucas Muel</option>
    <option value="156">Matt Millerler</option>
    <option value="191">Shawn Smithler</option>
    <option value="193">Shelly Littleler</option>
  </select>
</div>

JQUERY

<script>
$(document).ready(function() { 
    $(document).on("change","#kullanicikutusu", function(){
        var sel = $(this).val(); //açılan liste seçilen değer
        window.location ='index.php?id='+sel;  //kullanicikutusu ismindeki açılan liste değiştiginde index.php sayfasina yönlerdir
    });
});
</script>
]]> http://www.bilgisayar.me/index.php/2015/07/16/jquery-ile-acilan-listeselect-box-degistiginde-yeni-sayfaya-yonlerdirme/feed/ 0 Bir HTML tablosundan PHP kullanarak MYSQL veritabanından birden fazla satır nasıl silebilir veya güncelleyebilirim? http://www.bilgisayar.me/index.php/2015/07/16/bir-html-tablosundan-php-kullanarak-mysql-veritabanindan-birden-fazla-satir-nasil-silebilir-veya-guncelleyebilirim/ http://www.bilgisayar.me/index.php/2015/07/16/bir-html-tablosundan-php-kullanarak-mysql-veritabanindan-birden-fazla-satir-nasil-silebilir-veya-guncelleyebilirim/#comments Thu, 16 Jul 2015 19:46:45 +0000 http://www.bilgisayar.me/?p=1131 YÜKLE DEMO]]> “Tümünü Seç” onay kutusunu tıklayarak birden fazla onay kutusunu kaldırmak/seçmek ve aynı zamanda MYSQL veritabanından verileri silmek için kullanılabileceğiniz basit uygulama.

 

 
 
 

index.php

JQUERY

<script>
(function($){
    // Bütün onay kutularını seç
    $(document).on("click","#hepsinisec",function(){
        $('input:checkbox').not(this).prop('checked', this.checked);
    });
    // Button tıklandı
    $(document).on("click","#kaldir",function(){
        $(this).html('<i class="fa fa-trash"></i> Kaldırılıyor...');
        var onaykutu = $('input[name="onaykutusu[]"]:checked');
        var enazbironay = onaykutu.length > 0;
        if (enazbironay <= 0) {
            alert("En az bir onay kutusu seçmelisiniz");
            return false;
        } else {
            $.ajax({ 
                type: "POST", 
                url: "ajax.php",
		data: "onay=onay&" + onaykutu.serialize(), 
		success: function(html){
		    if (onaykutu){ 
			onaykutu.closest("tr").slideUp();
		    }
		    $("#kaldir").html('<i class="fa fa-trash"></i> Kaldır');
		}
	    });
	}
    });	
})(jQuery);
</script>

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table">
  <thead>
    <tr>
    <th width="5%"><input type="checkbox" name="hepsinisec" id="hepsinisec" /></th>
    <th width="5%">NO</th>
    <th width="23%">Isim</th>
    <th width="67%">Soyad</th>
  </tr></thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="onaykutusu[]" id="onaykutusu[]" value="1"/></td>
    <td>1</td>
    <td>Hakan</td>
    <td>Atılgan</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="onaykutusu[]" id="onaykutusu[]" value="23" /></td>
    <td>2</td>
    <td>Murat</td>
    <td>Yalçın</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="onaykutusu[]" id="onaykutusu[]" value="423" /></td>
    <td>3</td>
    <td>Mustafa</td>
    <td>Ermiş</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="onaykutusu[]" id="onaykutusu[]" value="33" /></td>
    <td>4</td>
    <td>Süleyman</td>
    <td>Solak</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="onaykutusu[]" id="onaykutusu[]" value="22" /></td>
    <td>5</td>
    <td>Tayyip</td>
    <td>Erdoğan</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="onaykutusu[]" id="onaykutusu[]" value="44" /></td>
    <td>6</td>
    <td>Doğan</td>
    <td>Kartal</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="onaykutusu[]" id="onaykutusu[]" value="12" /></td>
    <td>7</td>
    <td>Kemal</td>
    <td>Saglam</td>
  </tr>
    </tbody>
</table>
<button class="btn btn-info" id="kaldir"><i class="fa fa-trash"></i> Kaldır</button>

ajax.php

<?PHP
if (isset($_POST) && $_POST['onay'] == 'onay'){
    /*$arr = implode(",",$_POST['onaykutusu']);
    $sql = "DELETE FROM tablo WHERE id IN (".$arr.")";
    $mysqli->query($sql);*/

    //veya
    /*foreach($_POST['onaykutusu'] as $v){
        $sql = "DELETE FROM tablo WHERE id = ".$v;
        $mysqli->query($sql);
    }*/
}
?>
]]> http://www.bilgisayar.me/index.php/2015/07/16/bir-html-tablosundan-php-kullanarak-mysql-veritabanindan-birden-fazla-satir-nasil-silebilir-veya-guncelleyebilirim/feed/ 0 JQuery ile onay kutularının tümünü seçme veya iptal etme http://www.bilgisayar.me/index.php/2015/07/16/jquery-ile-onay-kutularinin-tumunu-secme-veya-iptal-etme/ http://www.bilgisayar.me/index.php/2015/07/16/jquery-ile-onay-kutularinin-tumunu-secme-veya-iptal-etme/#comments Thu, 16 Jul 2015 18:43:23 +0000 http://www.bilgisayar.me/?p=1146 Eğer programcılığa yeni başlayanlardansanız ve “Tümünü Seç” onay kutusunu tıklayarak birden fazla onay kutusunu kaldırmak veya seçmek için hızlı bir jQuery kodu arıyorsanız, bu kod işinize yarayacaktır.

JQUERY

$(document).ready(function() {
    $(document).on("click","#hepsinisec",function(){
        $('input:checkbox').not(this).prop('checked', this.checked);
    });
});

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
    <th width="5%"><input type="checkbox" name="hepsinisec" id="hepsinisec" /></th>
    <th width="5%">NO</th>
    <th width="23%">Isim</th>
    <th width="67%">Soyad</th>
  </tr></thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="checkbox[]" id="checkbox[]" /></td>
    <td>1</td>
    <td>Hakan</td>
    <td>Atılgan</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox[]" id="checkbox[]" /></td>
    <td>2</td>
    <td>Murat</td>
    <td>Yalçın</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox[]" id="checkbox[]" /></td>
    <td>3</td>
    <td>Mustafa</td>
    <td>Ermiş</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox[]" id="checkbox[]" /></td>
    <td>4</td>
    <td>Süleyman</td>
    <td>Solak</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox[]" id="checkbox[]" /></td>
    <td>5</td>
    <td>Tayyip</td>
    <td>Erdoğan</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox[]" id="checkbox[]" /></td>
    <td>6</td>
    <td>Doğan</td>
    <td>Kartal</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox[]" id="checkbox[]" /></td>
    <td>7</td>
    <td> </td>
    <td> </td>
  </tr>
    </tbody>
</table>
]]> http://www.bilgisayar.me/index.php/2015/07/16/jquery-ile-onay-kutularinin-tumunu-secme-veya-iptal-etme/feed/ 0 JQuery ScrollUp eklentisi ile sayfa başına gitme http://www.bilgisayar.me/index.php/2015/07/16/jquery-scrollup-eklentisi-ile-sayfa-basina-gitme/ http://www.bilgisayar.me/index.php/2015/07/16/jquery-scrollup-eklentisi-ile-sayfa-basina-gitme/#comments Thu, 16 Jul 2015 18:08:11 +0000 http://www.bilgisayar.me/?p=1133 ScrollUp web sayfasının başına gitmeyi (Scroll to top) sağlayan ve eklenti sahibine göre bütün web sayfalarında çalışabilen bir JQuery eklentisidir. CSS dosyasının kolay ayarlanması nedeniyle bütün projelerinize kolaylıkla uygulayabilrsiniz.

ScrollUp yüklemek için burayı tıklayın.

HTML

<div id="scrollUp"></div

CSS

#scrollUp {
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #555;
    color: #fff;
}

Jquery

//JQuery' i eklemeyi unutmayın
$(function () {
    $.scrollUp({
        scrollName: 'scrollUp',      // eleman nosu
        scrollDistance: 300,         // Elemanı göstermeden önce üst / alt uzaklık (piksel)
        scrollFrom: 'top',           // 'top' or 'bottom'
        scrollSpeed: 300,            // Başa dönüş hızı(ms)
        easingType: 'linear',        // Scroll to top easing (see http://easings.net/)
        animation: 'fade',           // Fade, slide, none
        animationSpeed: 200,         // Anımasyon hızı (ms)
        scrollTrigger: false,        // Özel tetikleme elemanı ayarlayın. HTML dize veya jQuery nesnesi olabilir
        scrollTarget: false,         // Kaydırma için özel bir hedef elemanı ayarlayın. Eleman veya sayı olabilir
        scrollText: 'Scroll to top', // HTML Metin içerebilir 
        scrollTitle: false,          // Gerekirse başlığı <a> özel bir ayarlayın.
        scrollImg: false,            // Resim kullanmak için 'true' olarak ayarlayın
        activeOverlay: false,        
        zIndex: 2147483647           // Z-Index değeri
    });
});
]]> http://www.bilgisayar.me/index.php/2015/07/16/jquery-scrollup-eklentisi-ile-sayfa-basina-gitme/feed/ 0