arşiv

‘jQuery’ kategorisi için arşiv

ajax post

Pazartesi, 13 Kas 2017 yorum yok
$.ajax({
             url: "http://www.yk.com/Insert",
             type: "POST",
             dataType: "json",
             contentType: 'application/json; charset=utf-8',
             data: JSON.stringify({
                        Code: 123,
                        Data: "data",
                        Comment: ""
             }),
                    success: function (data) { }
 });

 

Categories: JavaScript, jQuery Tags: ,

SweetAlert

Perşembe, 06 Eki 2016 yorum yok

Online Pdf, Excel v.s. Download

Çarşamba, 21 Eyl 2016 yorum yok
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="robots" content="noindex, nofollow">
	<meta name="googlebot" content="noindex, nofollow">
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/result-light.css">
	<script type="text/javascript" src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xepOnline.jqPlugin.js"></script>
	<style type="text/css"></style>
	<title>@cloudformatter template</title>
</head>
<body>
  <div id="buttons">
	  <button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'download'})">PDF</button>
	  <button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'download', mimeType:'application/postscript'})">Postscript</button>
	  <button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'download', mimeType:'application/vnd.ms-xpsdocument'})">XPS</button>
	  <button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'embed', mimeType:'image/svg+xml'})">SVG</button>
	  <button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'embed', mimeType:'image/png'})">PNG @120dpi</button>
	  <button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'embed', mimeType:'image/jpg', resolution:'60'})">JPG @60dpi</button>
	  <button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'embed', mimeType:'image/gif', resolution:'30'})">GIF @30dpi</button>
  </div>
	<hr>
	<div id="JSFiddle">
		<!-- Insert your document here -->
		<header style="display:none;margin-top:20px;"><p>Add your header</p></header>     
		<footer style="display:none"><p>Add your header</p></footer>  
		<h1>Create a Document Here</h1>
	 </div>
</body>
</html>

http://www.cloudformatter.com/

Categories: JavaScript, jQuery Tags: ,

html2canvas

Cumartesi, 03 Eyl 2016 yorum yok

Ekrandaki verilerin "screenshots" almak için kullanılır.

http://html2canvas.hertzen.com/

Categories: JavaScript, jQuery Tags: ,

Export HTML Table to CSV TXT JSON XML SQL XLS DOC PNG PDF

Cumartesi, 03 Eyl 2016 yorum yok

Installation

To save the generated export files on client side, include:

<script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>

To export the table as a PDF file the following includes are required:

<script type="text/javascript" src="libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>

To export the table in PNG format, you need to include:

<script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script>

To generate the export file in the desired format, finally include:

<script type="text/javascript" src="tableExport.min.js"></script>

Please keep this include order.

https://github.com/hhurz/tableExport.jquery.plugin

 

Categories: JavaScript, jQuery Tags: ,

Sayfa Yükleniyor…..

Çarşamba, 10 Ağu 2016 yorum yok
<div id="divLoading" style="display:none; z-index: 10002;">
    <div class="jtable-busy-panel-background" style="left:0; top:0; margin:0; width: 100%; height: 100%;"></div>
    <div style="position: fixed; top: 45%; left: 45%;">
        <i class="fa fa-refresh fa-spin fa-5x fa-fw margin-bottom"></i>
    </div>
</div>
$(document).ajaxStart(function () {
    onBegin();
});

$(document).ajaxStop(function (event, request, settings) {
    onComplete();
});
function onBegin() {
    $("#divLoading").show();
}
 
function onComplete() {
    $("#divLoading").hide();
}

 

https://www.javascripting.com/

Cuma, 22 Tem 2016 yorum yok
Categories: bestURL, JavaScript, jQuery Tags: ,

Jquery Neden Çalışmıyor ?

Perşembe, 30 Haz 2016 yorum yok
  • Jquery kütüphanesini yüklediniz mi ?,

  • Jquery $(document).ready(function() {}) kullandınız mı ?

  • Jquery çakışma problemi

    • Birincisi $.noConflict();

    • jQuery Migrate

Kanyank: http://www.gencprogramci.net/sayfalar/icerik_perma/151/jquery-neden-calismiyor

Categories: jQuery Tags:

jQuery – toggleClass()

Çarşamba, 28 Eki 2015 yorum yok

Seçilen nesne üzerinde belitilen stil varsa kaldırır yoksa ekler. Bir nevi anahtar gibi çalışır.

<style>
    .kare{
        width:60px;
        height: 60px;
        background-color:black;
    }
    .renk {
        color:white;
    }
</style>
<div id="divKare" class="kare renk"></div>
<button id="toggleClass">toggleClass</button>
$("#toggleClass").click(function () {
    $('#divKare').toggleClass('kare renk');
});

 

Categories: jQuery Tags:

jQuery – removeClass()

Çarşamba, 28 Eki 2015 yorum yok

Seçilenen nesnedeki var olan stili kaldırır.

<style>
    .kare{
        width:60px;
        height: 60px;
        background-color:black;
    }
    .renk {
        color:white;
    }
</style>
<div id="divKare" class="kare renk"></div>
<button id="removeClass">removeClass</button>
$("#removeClass").click(function () {
    $('#divKare').removeClass('kare renk');
});

 

Categories: jQuery Tags:

jQuery – addClass()

Çarşamba, 28 Eki 2015 yorum yok

Daha önceden hazırladığımız stilin seçili olan nesneye atayabilmesini sağlar.

<style>
    .kare{
        width:60px;
        height: 60px;
        background-color:black;
    }
    .renk {
        color:white;
    }
</style>
<div id="divKare"></div>
<button id="addClass">addClass</button>
$("#addClass").click(function () {
    $('#divKare').addClass('kare renk');
});
   

 

Categories: jQuery Tags:

jQuery – css()

Çarşamba, 28 Eki 2015 yorum yok

Seçili nesnenin stil(style) özellikleri öğrenilir ve değiştirilir.

<button>p elementinin rengini değiştir </button>

<p>Deneme text</p>
<p>Deneme deneme deneme</p>
$("button").click(function(){
        $("p").css("color", "red");
    });

 

Categories: jQuery Tags:

jQuery – attr() – removeAttr()

Çarşamba, 28 Eki 2015 yorum yok

.attr() : Belirtilen nesnenin alt özelliklerine erişmeye yarar.

<img src="https://www.google.com/intl/en_ALL/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google . . ." title="Google Her Yerde" ><br>
<button id="title">Title Getir</button>
<button id="titleChange">Title Değiştir</button>
$("#title").click(function () {
    alert($("img").attr("title"));
});

$("#titleChange").click(function () {
    $("img").attr("title", "Google Her Yerde.......");
    alert($("img").attr("title"));
});

.removeAttr() : Belirtilen nesneden istenilen özniteliğin kaldırılmasını sağlar.

<img src="https://www.google.com/intl/en_ALL/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google . . ." title="Google Her Yerde" ><br>
<button id="title">Title Getir</button>
<button id="titleRemove">Title Kaldır</button>
$("#title").click(function () {
    alert($("img").attr("title"));
});

$("#titleRemove").click(function () {
    $("img").removeAttr("title");
    alert($("img").attr("title"));
});

 

Categories: jQuery Tags: , ,

jQuery – Set()

Pazar, 18 Eki 2015 yorum yok
<p id="test1">Vermeyince Mabut,</p>
    <p id="test2">Vermeyince Mabut,</p>

    <p>Varsayılan Değer: <input type="text" id="test3" value="Vermeyince Mabut,"></p>

    <button id="btn1">Değer Ata Text</button>
    <button id="btn2">Değer Ata HTML</button>
    <button id="btn3">Değer Ata</button>

    <hr />
    <p><a href="http://www.yakupkalebasi.com" id="yami" title="test test">yakupkalebasi.com</a></p>
    <button id="btn4">Link değerini değiştir.</button>
$("#btn1").click(function () {
    $("#test1").text("Neylesin Mahmut");
});
$("#btn2").click(function () {
    $("#test2").html("<b>Neylesin Mahmut</b>");
});
$("#btn3").click(function () {
    $("#test3").val("Neylesin Mahmut");
});
$("btn4").click(function () {
    $("#yami").attr({
        "href": "http://www.yakupkalebasi.com/jquery",
        "title": "jQuery"
    });
});

 

Categories: jQuery Tags:

jQuery – Get()

Pazar, 18 Eki 2015 yorum yok
<p id="test">vermeyince <b>mabut</b> neylesin kel <b>mahmut</b></p>

<button id="btn1">Yazıyı Göster</button>
<button id="btn2">Yazının HTML içeriğini göster</button>

<hr />
<p>Adınız: <input type="text" id="text3" value="Yakup"></p>

<button id="btn3">Değer Göster</button>

<hr />
<p><a href="http://www.yakupkalebasi.com" id="yami">yakupkalebasi.com</a></p>

<button id="btn4">Değer Göster</button>

 

$("#btn1").click(function () {
    alert("Text: " + $("#test").text());
});
$("#btn2").click(function () {
    alert("HTML: " + $("#test").html());
});
$("#btn3").click(function () {
    alert("Value: " + $("#text3").val());
});
$("#btn4").click(function () {
    alert($("#yami").attr("href"));
});

 

Categories: jQuery Tags:

JQuery each() Methodu

Pazar, 18 Eki 2015 yorum yok
<button>Listedeki elemanları göster</button>

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Soda</li>
</ul>
$("button").click(function(){
        $("li").each(function(){
            alert($(this).text())
        });
    });

 

Categories: jQuery Tags:

JQuery Bulma Fonksiyonları – Finding

Pazar, 18 Eki 2015 yorum yok

.add() : Seçili olan nesneye yeni bir özellik ekler.

<div class='yazi'>Yakup KALEBAŞI</div>

Yukarıdaki yazdi div' e color rengini eklemek istersek

$('div').css('color','red');
$('.yazi').css('color','red');

Her iki satırda div 'in rengini kırmızı yapacaktır.

.children() : Seçilen nesnenin içerisindeki alt nesnelere erişmeye yarar.

<ul>
    <li>
        Araçlar
        <ul id="seviye1_1">
            <li>Otobüs</li>
            <li>Taksi</li>
            <li>Kamyon</li>
        </ul>
    </li>
    <li>
        Meslekler
        <ul id="seviye1_2">
            <li>Avukat</li>
            <li>Doktor</li>
            <li>Öğretmen</li>
        </ul>
    </li>
</ul>
$('ul#seviye1_2').children().css('background-color', 'yellow');

.closest() : Girilen ifade ile seçici arasındaki en yakın blok nesneleri seçer.

<div id="level2">
    <span>Level 2</span>
    <div id="level1">
        <span>Level 1</span>
        <div id="level0">
            <div id="main">
                <span>Main</span>
            </div>
        </div>
    </div>
</div>
$('#main').closest('#level1').css('color', 'red');

.contents(): Belirtilen seçiciye göre verilen ifadenin aranan noktasına manüplasyon yapar.

<div><em>Merhaba Kullanıcı.....</em></div>

<button>"em" tag 'nın içeriğini bul ve "b" tagı arasına al</button><br>
$("button").click(function () {
                $("div").contents().filter("em").wrap("<b/>");
            });

.find() : Belirtilen seçicinin içerisindeki nesneyi seçmeye yarar.

<ul>
    Arabalar
    <li>
        BMW
        <span>M5</span>
        <strong>Spor</strong>
        <span>Harika</span>
    </li>
</ul>
$("ul").find("span").css({ "color": "red", "border": "2px solid red" });

.next() :  Bir nesneden sonraki nesyeyi seçer.

<ul>
    Aile
    <li>Anne</li>
    <li>Baba</li>
    <li class="cocuklari">cocuklarin dan sonra torun gelir.</li>
    <li>İlk torunum</li>
    <li>İkinci torunumuz</li>
</ul>   
$("li.cocuklari").next().css({ "color": "red", "border": "2px solid red" });

.parent() : Belirtilen nesnenin üstündeki nesneye geçilir.

<div>
    <p>iç paragraf</p>
</div>  
<div id="div1">
    dış paragraf
</div>
$("p").parent().css('background', 'red');

 

Categories: jQuery Tags:

JQuery Seçiciler – Attribute (Öznitelik)

Perşembe, 15 Eki 2015 yorum yok

JQuery ile Öznitelikleri nasıl seçebileceğimizi örnekli olarak inceleyelim.

<a lang="en" href="#">English</a>
<a lang="tr" href="#">Türkçe</a>

Sayfamız da bulunan lang=”tr” olan değeri seçmek istersem yani "a" değerinin bir özniteliği olan "lang" değerini istiyorsam, bunu jquery ile

$('a[lang|="tr"]')

kullanarak yaparım. Hatta CSS ile bir tanımlama da eklemek istersem

$('a[lang|="tr"]').css('border','3px red');

şeklinde yapabilirim.


<input type="text" name="iletisim" />
<input type="text" name="ilet" />
<input type="text" name="sim" />
<input type="text" name="gorsel" />
Method Açıklama
$('input[name]'); Nesne özelliği olan input ları seçer
$('input[name=”iletisim”]'); Nesne özelliği iletisim olan linkleri seçer
$('input[name^=”ilet”]'); Nesne özelliği ilet olan linkleri seçer
$('input[name$=”sim”]'); Nesne özelliği sim ile biten linkleri seçer
$('input[name!=”iletisim”]'); Nesne özelliği iletisim olmayan linkleri seçer
$('input[name*=”et”]'); Nesne özelliği içerisinde et ifadesi geçen linkleri seçer

 

 

 

 

 

 

 

 

Form Seçiciler:

button => $('input:button');
submit => #('input:submit');

Categories: jQuery Tags: , ,

jQuery Seçiciler (Selectors)

Perşembe, 15 Eki 2015 yorum yok

Web sayfasında bulunan nesnelerin temelde üç ortak özelliği vardır.

  1. Bir etike sahiptirler (tag)
  2. Nesnelerin stilleri olabilir (class)
  3. Her nesneyi diğerinden ayıran bir kimliği vardır. (Id)

Nesneyi seçmenin üç farklı yolu vardır.

Tag: $("a") sayfadaki bütün "a" etiketli nesneleri seçer.
Class: $(".okul") sayfadaki "okul" stiline sahip nesneleri seçer.
ID: $("#alt") sayfadaki "alt" id'sine sahip nesneleri seçer.

Categories: jQuery Tags: