Aklımda Kalası Kelimeler

* давайте работать вместе
* Zarf ve Mazruf, Zerafet(xHoyratlık) ile aynı kökten(za-ra-fe) gelir
* Bedesten
* Suç subuta ermiştir - Suç sabit olmuştur
JQUERY etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
JQUERY etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

25 Nisan 2013 Perşembe

jQuery üzerinden observer pattern oluşturulması

$ içinde tanımlı olan ve jQuery nesnelerine sarılan on, off, trigger metotları vardır. trigger Metodu bir tetikleyicidir ve hangi olayın tetiklenmesini istiyorsak, ilgili değişkenleri ikinci parametrede vererek çalıştırırız.


on Metodu bir olayın tetiklenmesi halinde çalışır. Birinci parametre hangi event durumunda çalışacağını, ikinci parametre ise hangi fonksiyonun çalışacağını gösterir.


off Metodu ise daha önce bir olaya eklenmiş bir metodun kaldırılması esasına dayanır.


Yukarıdaki bu metotların çalışabilmesi için önce hangi nesneye kilitlediğinizi seçmelisiniz ve bu nesne tabii ki jQuery örneği olmalı. Mesela her div'e tıklandığında zapa zupa olsun: $('div').on('click',zapaZupaFonksiyonunuCagir());
Eğer bir tıklama olmadan programatik olarak çağırmak isterseniz $('div').trigger('click',['extra parametreler']); ile çağırabilirsiniz olayları.

Şimdi biliyoruzki jQuery nesneleri on,off,trigger metotlarına sahiplerken $ buna sahip değil. Bunu sağlamak için bir jQuery nesnesi yaratalım:
var o = $({});
Bu nesneden o.trigger() diyerek metot çağırmakla o['trigger']() diyerek metot çağırmak arasında bir fark yoktur. Neticede javascript nesnesinin bir özelliğini çağırıyoruz ve fonksiyonlarda bu nesnelerin bir propertysi gibidirler.


Peki 'on' metodunun içeriği zaten jQuery içinde tanımlanmış ve sadece nesnelere bağlanabiliyorsa biz jQuery örneğimiz için on fonksiyonunun adını değiştirebilir miyiz?
o['hebeleOlsun'] = function(){ o.on.apply(o, arguments); }; burası azıcık karışık gelebilir. Baş taraf çok basit. hebeleOlsun diye bir özellik ekliyoruz "o" nesnemize. Bu nesneye anonymous bir function atıyoruz. Bu durumda o['hebeleOlsun']() ya da o.hebeleOlsun() çağrıları bu anonymous fonksiyona çağrı yapacak ve tüm parametrelerde bu metot içinde arguments dendiğinde elde edilebilecek. Şimdi sırada apply var. apply da bir metot çağrısı ama kime yapılıyor? Bir başka metotan yapılabiliyor ki burada bizim "on" metodumuzun üstünden yapıldığını farketmişsinizdir. Peki parametrelerin anlamı ne? Birinci parametre bu fonksiyon içinde this diyerek elde edebileceğimiz değişken olacak. Ki; biz burada o nesnesini gönderdik. Böylece apply ile çağırdığımız on fonksiyonu içinde artık this = o olmuştur. ON fonksiyonunun içine diğer diğer parametreleride arguments ile gönderiyoruz.

Peki biz jQuery içinden özelleştirilmiş bir olay oluşturma, bu olaya abone olma ve aboneliği silmek konusununu nasıl yazabiliriz:
<script>
        var o = $({});

        jQuery['yayinYap'] = function () {
            o.trigger.apply(o, arguments);
        };

        jQuery['uyeOl'] = function () {
            o['on'].apply(o, arguments);
        };

        jQuery['uyeOlma'] = function () {
            o['off'].apply(o, arguments);
        };

        $.yayinYap('onBasimKasindi',['bu bir event parametresi','bu da digeri',2,3,{oz:'el',li:'ck'}]);

        $.uyeOl('onBasimKasindi',function(e){ console.log('Başı kaşınan birisi var'); console.log(e); $.uyeOlma('onBasimKasindi','**'); });

Bunun pratik halleride var ama bu şeklini anladığınızda diğerleri daha anlamlı gelecektir.

Geç oldu, ben gider...

22 Ağustos 2011 Pazartesi

Okunacaklar

http://encosia.com/why-do-aspnet-ajax-page-methods-have-to-be-static/
http://www.sitepoint.com/ajax-jquery/
http://www.west-wind.com/presentations/jquery/jquerypart2.aspx


First Ajax Steps with jQuery
One of the most obvious client side features of any Javascript client library is the ability to make AJAX calls to the server. jQuery includes a host of Ajax functions that make it easy to retrieve content from a Url starting with the low level and do-everything $.ajax() function plus a number of others that are simpler and more focused to specific tasks. Here’s a list of some of the functions available:

$.ajax(opt)
This the low level Ajax function with many, many options that lets you create just about any kind of Ajax request. If you need full control over requests or you want to create a generic component that calls back to the server (like the WCF/ASMX client proxy I’ll discuss later) you’ll want to use this function. For now check out the documentation on the multitude of options available.

$(sel).load(url,data,callback)
The .load() function is the only Ajax function that works off a jQuery selector. It calls a URL on the server and loads the result as content into selected element(s). It’s a very quick and easy way to load Html fragments and inject them into the document if your result is HTML. An optional callback can be provided to be notified with the server result text when the callback completes which is useful if you want to visually adjust the retrieved content – like applying an effect to visually cue the user to an update. Note this function is heavily overloaded: If no URL is specified .load() acts as a load event handler that fires when an element has loaded its data (ie. an image or script).

$.get(url,callback),$.post(url,data,callback)
These functions are simple helpers that provide basic get and post operations to the server. You specify a URL and a callback which is called with the HTTP response from the server. $.post() also allows you to pass either formatted POST buffer string or an object the properties of which are turned into POST encoded key value pairs.

$.getJSON(url,data,callback)
Similar to $.post(), but expects the result to be JSON which is automatically deserialized into a Javascript value and passed to the callback as a parameter. While this function is handy for simple JSON results there are two things to watch out for: Dates are not parsed since there’s no date literal in Javascript, so whatever the server returns will be used (typically a string). $.getJSON() also doesn’t support JSON POST data – only POST encoded variables. This function is useful for simple JSON results returned from arbitrary services, but not usable for calling WCF or ASMX ASP.NET services since they expect JSON POST input. More on this later in the article.

.getJSON() also supports cross domain JSONP callbacks. If you specify a query string parameter of callback=? you can force the result to be routed to the callback you specify in the parameter list.

$.getScript(url,callback)
This function loads script code from the server and executes it once downloaded if no callback is specified. If specified the optional handler is fired instead and passed the Javascript, plus the current ajax request. This can be useful for JSONP cross domain callbacks where you have no control over the parameters used.

Global Ajax Events
There also a number of global Ajax events that you can take advantage of all of which take callbacks as parameters: ajaxCallback(), ajaxError(), ajaxSend(), ajaxStart(),ajaxStop(),ajaxSuccess(). These are useful for setting up global handlers that can centrally manage Ajax requests. You’re not likely to need these much unless you build components that need to know status of requests.

IEnumerable IEnumerator


http://stackoverflow.com/questions/619564/what-is-the-difference-between-ienumerator-and-ienumerable
http://codebetter.com/davidhayden/2005/03/08/implementing-ienumerable-and-ienumerator-on-your-custom-objects/
http://stackoverflow.com/questions/2635818/ienumerable-ienumerator
http://stackoverflow.com/questions/4844660/differences-between-iqueryable-list-ienumerator
http://stackoverflow.com/search?q=List+to+IEnumerator

24 Ekim 2010 Pazar

Başladığım ama şimdilik yarım bırakacağım yıldızlı puanlama

Aslında devam edeceğimden aşırı şüpheliyim çünkü bu işi zaten plugin olarak yapmış olduklarını duyunca uzatmadım ama diğerlerinden mantık birazcık fazla. Ondan bahsedip kodu yapıştırıp çekileyim.


Alt alta 3 div ve bu alttaki iki divinde içlerinde div'lere sarılmış a lar var.
En üstteki divde sağa sola geldikçe yeni puan verildiği için 3. kattaki divin width değeri değişecek böylece mesela 10 üzerinden 7.78 gibi puanlarda verilebilecek. (İDİ)



Konuyla ilgili en saf haliyle eklenti ise :
  1. http://plugins.learningjquery.com/half-star-rating/
  2. http://orkans-tmp.22web.net/star_rating/index.html#main-menu=5
  3. http://www.fyneworks.com/jquery/star-rating/



<style type="text/css">
.divPuanAtutucuGri, .divPuanAtutucuSari, .divPuanAtutucuMavi
{
position: absolute;
}
.divPuanAtutucuSari
{
z-index: 3;
width: 130px;
overflow: hidden;
}
.divPuanAtutucuSari div,.divPuanAtutucuMavi div
{
width: 220px;
}
.divPuanAtutucuMavi
{
z-index: 2;
}
.divPuanAtutucuGri
{
z-index: 1;
}
.divPuanAtutucuGri a, .divPuanAtutucuSari a, .divPuanAtutucuMavi a
{
background: url('images/sprites/yildizlar.png') repeat-x scroll 0 0 #FFFFFF;
height: 20px;
width: 20px;
display: block;
text-indent: -9997px;
float: left;
}
.divPuanAtutucuGri a, .divPuanAtutucuSari a, .divPuanAtutucuMavi a
{
background-position: 0 -40px;
}
.divPuanAtutucuSari a
{
background-position: 0 -60px;
}
.divPuanAtutucuMavi a
{
background-position: 0 -80px;
}
</style>
<script type="text/javascript">
$(function () {
$(".divPuanlama").hover(
function () {
$(".divPuanAtutucuSari").hide();

}, function () {
$(".divPuanAtutucuSari").show();
});

$(".divPuanlama").mousemove(
function (event) {
$("#clientX").html("Left:" + $(this).offset().left + " -- clientX:" + event.clientX);
$("#clientY").html("Top:" + $(this).offset().top + " -- clientY:" + event.clientY);
var x = event.clientX - $(this).offset().left;
$(".divPuanlamaAtutucuMavi div").css("width:" + x+"px");
});
});
</script>

<div class="divPuanlama" style="position: relative; height: 22px; border: 1px solid red;
width: 220px;">
<div class="divPuanAtutucuSari">
<div>
<a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a></div>
</div>
<div class="divPuanAtutucuMavi">
<div>
<a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a></div>
</div>
<div class="divPuanAtutucuGri">
<a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a>
</div>
</div>

22 Ekim 2010 Cuma

En basit haliyle javascript slideshow






<!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>
<title>Untitled Page</title>
<style type="text/css">
#divCerceve
{
background-color:#e2e2e2;
z-index:-8;
overflow:hidden;
position:relative;
height:302px;
width:452px;
}
.divAna
{
width: 450px;
height: 300px;
overflow: hidden;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
background-color:transparent;
z-index: 0;
}
.divSol
{
width: 200px;
height: 250px;
overflow: hidden;
padding: 5px;
border: 1px solid green;
float: left;
margin: 5px;
}
.divSag
{
width: 200px;
height: 250px;
overflow: hidden;
padding: 5px;
border: 1px solid aqua;
float: left;
margin: 5px;
background-color:White;
}
</style>
<style type="text/css">
#divVideoNavigasyon
{
}
#divVideoNavigasyon li
{
padding: 2px 0 0 0px;
float: left;
background: url("1.png") no-repeat scroll -6px -51px transparent;
font-size: 0.938em;
height: 20px;
margin: 0 5px;
text-align: center;
width: 17px;
color: white;
cursor: pointer;
list-style-type: none;
}
#divVideoNavigasyon .prev
{
background-position: -15px -373px;
width: 0px;
}
#divVideoNavigasyon .next
{
background-position: -15px -346px;
background-position: -15px -346px;
width: 0px;
}

#divVideoNavigasyon li.selected
{
background-position: -6px -83px;
color: black;
width: 18px;
}
#divVideoNavigasyon li.pause
{
background-position: -6px -424px;
margin-left: 15px;
}
#divVideoNavigasyon li.play
{
background-position: -6px -444px;
margin-left: 15px;
display: none;
}
.hiddenText
{
text-indent: -9999px;
}
</style>
<script type="text/javascript" src="1_jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.tmpl.js"></script>
</head>
<body>
<script type="text/html" id="tmpl">
<div class="divAna" id="div_${videoId}">
<div class="divSol">
<img src="${imgSrc}" />
</div>
<div class="divSag">
<h2> </h2>
<h3>${baslik}</h3>
<span class="spnOzet">${ozet}</span>
</div>
</div>
</script>
<div id="divCerceve">
<h2 style="z-index: 3; position: absolute; top: 20px; left: 230px;">
En Son Eklenenler
</h2>
<div id="divVideoNavigasyon" style="z-index: 3; position: absolute; top: 200px; left: 180px;">
<ul class="nav dl_navigation">
<li class="prev"></li>
<li class="">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
<li class="">6</li>
<li class="pause"></li>
<li class="play"></li>
<li class="next"></li>
</ul>
</div>
</div>
<script type="text/javascript">
var arr = [{ "videoId": 104, "baslik": "Bu 1 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://hof.povray.org/images/bigthumb/guardian.jpg" },
{ "videoId": 202, "baslik": "Bu 2 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://www.dynamicdrive.com/dynamicindex4/lightbox2/flower.jpg" },
{ "videoId": 301, "baslik": "Bu 3 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://hof.povray.org/images/bigthumb/pebbles.jpg" },
{ "videoId": 407, "baslik": "Bu 4 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://c.asstatic.com/images/Noormahl-9875-Fantastic-Images-fantastic-pics4177-ppt-powerpoint-118_88.jpg" },
{ "videoId": 505, "baslik": "Bu 5 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://img185.imageshack.us/img185/8862/slim6pn6.jpg" },
{ "videoId": 706, "baslik": "Bu 6 nol baslik olsun", "ozet": "bu da başlığın içeriği özetimiz olsun", "imgSrc": "http://img98.imageshack.us/img98/6842/girl4nn8.jpg" }
];
$("#tmpl").tmpl(arr).appendTo("#divCerceve");
</script>

<script type="text/javascript">
var liRakamlar = $("#divVideoNavigasyon ul").find("li[class!='prev'][class!='next'][class!='pause'][class!='play']");
var iCrnt = arr.length - 1;
var iNxt = 0;
var iPrv = 0;
var dur = false;

function nextPhoto(pNo) {
if (!(dur == false ^ pNo == undefined)) {
f_Sonraki(pNo);

$("#divVideoNavigasyon ul").find("li.selected").removeClass("selected");
$(liRakamlar).eq(iCrnt).addClass("selected"); ;

$("#div_" + arr[iNxt].videoId).fadeIn('slow');
$("#div_" + arr[iPrv].videoId).fadeOut('slow', function () {
$(this).hide();
});
}
}

function f_Sonraki(pNo) {
if (pNo != undefined) {
iPrv = iCrnt;
iCrnt = iNxt = pNo;
} else {
if (iCrnt == arr.length - 1) {
iPrv = arr.length - 1;
iCrnt = iNxt = 0;
} else {
iPrv = iCrnt;
iNxt = ++iCrnt;
}
}
}

function f_Pause(liItem) {
dur = true;
$("#divVideoNavigasyon ul").find("li.play").show();
$("#divVideoNavigasyon ul").find("li.pause").hide();
}

function f_Play(liItem) {
dur = false;
$("#divVideoNavigasyon ul").find("li.pause").show();
$("#divVideoNavigasyon ul").find("li.play").hide();
}




$(function () {
$(liRakamlar).each(function (idx, li) {
// VideoId bilgisini title içine yazalım (gösterilecek dive ulaşmada kullanacağız).
$(li).attr("id", "li_" + arr[idx].videoId);
$(li).attr("title", arr[idx].videoId);
$("#div_" + arr[idx].videoId).hide();

// x inci videoyu görmek için LI lerin
// üzerine gelirsek slideshow dursun,
// üzerindem çıkarsak slideshow devam etsin
$(li).hover(function () { dur = true; }, function () { dur = false; });


// LI ye tıkladığımızda o video ön izlemesi görünsün.
$(li).click(function () {
dur = true;

$("#divVideoNavigasyon ul").find("li.selected").removeClass("selected");
$(this).addClass("selected");

nextPhoto(idx);
});
});

$("#divVideoNavigasyon ul").find("li.pause").click(f_Pause);
$("#divVideoNavigasyon ul").find("li.play").click(f_Play);
setInterval(function () { nextPhoto(); }, 2000);
});

</script>
</body>
</html>











19 Ekim 2010 Salı

Javascript'te üst elementi bulma

Bunu yazdıktan sonra öğrendim ki $(this).parents(".divEbeveynElement") aynı işi yapıyormuş :)

// verilen child elemen için iz ile belirtilen
// kriterdeki elementi geri döner.
// f_parentBul(this,".divDuzenle");
// f_parentBul($("#divElement"),"div");
function f_parentBul(child, iz) {
//debugger;
if (iz != undefined || iz != "") {
do {
var parent = $(child).parent();
if ($(parent) == null) {
return null;
} else {
if ($(parent).is(iz)) {
return $(parent);
} else {
for (var i = 0; i < $(parent).length; i++) {
return f_parentBul($(parent)[i], iz);
}
}
}
} while (bDevam);
} else {
throw "Kontrol kriterini girmediniz.";
}
}

23 Eylül 2010 Perşembe

JQuery ile SELECT elementine neler yapabiliriz


// Add options to the end of a select
$("#myselect").append("");
$("#myselect").append("");

// Add options to the start of a select
$("#myselect").prepend("");

// Replace all the options with new options
$("#myselect").html("");

// Replace items at a certain index
$("#myselect option:eq(1)").replaceWith("");
$("#myselect option:eq(2)").replaceWith("");

// Set the element at index 2 to be selected
$("#myselect option:eq(2)").attr("selected", "selected");

// Set the selected element by text
$("#myselect").val("Some oranges").attr("selected", "selected");

// Set the selected element by value
$("#myselect").val("2");

// Remove an item at a particular index
$("#myselect option:eq(0)").remove();

// Remove first item
$("#myselect option:first").remove();

// Remove last item
$("#myselect option:last").remove();

// Get the text of the selected item
alert($("#myselect option:selected").text());

// Get the value of the selected item
alert($("#myselect option:selected").val());

// Get the index of the selected item
alert($("#myselect option").index($("#myselect option:selected")));

// Alternative way to get the selected item
alert($("#myselect option:selected").prevAll().size());

// Insert an item in after a particular position
$("#myselect option:eq(0)").after("");

// Insert an item in before a particular position
$("#myselect option:eq(3)").before("");

// Getting values when item is selected
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});

9 Mart 2010 Salı

ASP.NET Checkbox tan Text değerini JQuery ile okumak


$('input:checkbox').each(function() {

if (this.checked) {

alert($("label[for='" + $(this).context.id + "']")[0].innerHTML);
resim = $("label[for='" + $(this).context.id + "']")[0].innerHTML;
}

tumResimler += resim;
});

JQuery .each

Ref: http://api.jquery.com/jQuery.each/


$.each($("#divBulunanResimler div"), function(index, div) {
alert($(div).html());
$(div).attr.hide();
});

$.each([52, 97], function(index, value) {
alert(index + ': ' + value);
});


var map = {
'flammable': 'inflammable',
'duh': 'no duh'
};
$.each(map, function(key, value) {
alert(key + ': ' + value);
});

16 Ocak 2010 Cumartesi

JQuery ve ASP.NET web servisi ile JSON veriyi parsetmek


public class HavaDurumu
{
public string Min;
public string Max;
public string Name;
public string Image;
}

[WebMethod]
public HavaDurumu f_HavaDurumuJson(string _sSehirler)
{
// TR873,TR2342 gibi bir string gelecek.
string[] _ArrSehirler = _sSehirler.Split(new[] { ',' });

string sSehirSonucu = "";
string name = "", min = "", max = "", image_code = "";

// Settings içinde havaDurumu = http://www.bugun.com.tr/files/hava.xml olmalı
XmlTextReader xmlReader = new XmlTextReader(Properties.Settings.Default.havaDurumu);
XmlDocument xmlDocument = new XmlDocument();
xmlDocument.Load(xmlReader);
XmlNode topNode = xmlDocument.DocumentElement;

foreach (string sehir in _ArrSehirler)
{
XmlNode hava = topNode.SelectSingleNode("record[code='" + sehir + "']");

name = hava.ChildNodes[1].InnerText;
min = hava.ChildNodes[4].InnerText;
max = hava.ChildNodes[5].InnerText;
image_code = hava.ChildNodes[6].InnerText;
sSehirSonucu += "{name:'" + name + "', min:" + min + ", max:" + max + ", image_code:'" + image_code + "'},";
}

return new HavaDurumu()
{
Name = name,
Image = image_code,
Min = min,
Max = max
};
}



function f_HavaDurumuJson(_sehir) {
alert("sehir sorgu: " + _sehir);
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: 'WS/wsGenel.asmx/f_HavaDurumuJson',
data: "{_sSehirler:'" + _sehir + "'}",
dataType: "json",
success: function(data) {

alert(data.d.Name);
alert(data.d.Min);
alert(data.d.Max);
alert(data.d.Image);

$.each(data.d, function(ozellik, deger) {
alert(ozellik + " - " + deger);
});
}
});
}

f_HavaDurumuJson('TR2342');





Bir sınıfın dizi tipinde dönen değerini almak



public class HavaDurumu
{
public string Min;
public string Max;
public string Name;
public string Image;
}

[WebMethod]
public HavaDurumu[] f_HavaDurumuJson(string _sSehirler)
{
// TR873,TR2342 gibi bir string gelecek.
string[] _ArrSehirler = _sSehirler.Split(new[] { ',' });
HavaDurumu[] sonuc = new HavaDurumu[_ArrSehirler.Length];

string sSehirSonucu = "";
string name = "", min = "", max = "", image_code = "";

// Settings içinde havaDurumu = http://www.bugun.com.tr/files/hava.xml olmalı
XmlTextReader xmlReader = new XmlTextReader(Properties.Settings.Default.havaDurumu);
XmlDocument xmlDocument = new XmlDocument();
xmlDocument.Load(xmlReader);
XmlNode topNode = xmlDocument.DocumentElement;

for (int i = 0; i < _ArrSehirler.Length; i++)
{
string sehir = _ArrSehirler[i];
XmlNode hava = topNode.SelectSingleNode("record[code='" + sehir + "']");

name = hava.ChildNodes[1].InnerText;
min = hava.ChildNodes[4].InnerText;
max = hava.ChildNodes[5].InnerText;
image_code = hava.ChildNodes[6].InnerText;
sSehirSonucu += "{name:'" + name + "', min:" + min + ", max:" + max + ", image_code:'" + image_code + "'},";
sonuc[i] = new HavaDurumu()
{
Name = name,
Image = image_code,
Min = min,
Max = max
};
}

return sonuc;
}



function f_HavaDurumuJson(_sehir) {
alert("sehir sorgu: " + _sehir);
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: 'WS/wsGenel.asmx/f_HavaDurumuJson',
data: "{_sSehirler:'" + _sehir + "'}",
dataType: "json",
success: function(data) {

alert("Dizinin uzunluğu: " + data.d.length);
alert("0. elemanın Name değeri: "+ data.d[0].Name);
$.each(data.d, function(i, eleman) {

alert(eleman.Name + " | " + eleman.Min + " | " + eleman.Max + " | " + eleman.Image);

$.each(eleman, function(key, value) {
alert(key + " - " + value);
});

});
}
});
}

f_HavaDurumuJson('TR2342,TR4801');


Kaynak:
http://www.eburhan.com/jquery-ve-json-islemleri/
http://prettycode.org/2009/04/07/using-jquery-with-aspnet-web-services-and-json/

JQuery Bağlantıları

JQuery ve ASP.NET
http://dotnetslackers.com/articles/ajax/using-jquery-with-asp-net.aspx

JQuery ile XML Pars işlemi
http://marcgrabanski.com/article/jquery-makes-parsing-xml-easy

3 mistakes to avoid when using jQuery with ASP.NET AJAX
http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/

jQuery – each
http://weboutbox.com/jquery-each/

Mastering JSON ( JavaScript Object Notation )
http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_)

http://www.xucia.com/strands-doc/example.html

http://jtemplates.tpython.com/

JQuery Events

Referans: asimsajjad.blogspot.com

http://docs.jquery.com/Events/live

Live (and Die) Event in Jquery(1.3)

Önce desteklenen OLAYlar (Events):

Event Type
Event Type
click
dbclick
mousedownmouseup
mousemovemouseover
mouseoutkeyup
keydownkeypress


Ve henüz desteklenmeyen OLAYLAR:
Event Type
Event Type
blur
focus
mouseenter
mouseleave
change
submit


Ve bir örnek:

function ff() {
$().ready(function() {
var intCounter = 1;
$("p").live("click", ParagraphClick);
$("#cmdBind").click(function() {
$("p").live("click", ParagraphClick);
});

$("#cmdUnbind").click(function() {
$("p").die("click", ParagraphClick);
});

function ParagraphClick() {
$(this).after("Paragraph Number:" + intCounter + "");
intCounter++;
}
});
}




JQUERY AJAX Events


http://docs.jquery.com/API/1.1/AJAX

Calling $.ajax

$.ajax() takes one argument, an object of key/value pairs, that are used to initalize and handle the request, and returns the XMLHttpRequest object for post-processing (like manual aborting) if needed.

Options: Several options that control the behavior of $.ajax are available. They are specified as key/value pairs of the 'parameters' object passed to $.ajax:

* (String) url - The URL to request.

* (String) type - The type of request to make ("POST" or "GET"), default is "GET".

* (String) dataType - The type of data that you're expecting back from the server. If none is specified, jQuery will intelligently pass either responseXML or responseText to your success callback, based on the MIME type of the response. If "xml" is in the MIME type, jQuery will pass the responseXML to your callback, otherwise you'll get the responseText.

* (Boolean) ifModified - Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header.

* (Number) timeout - Set a local timeout for the request. This will override the global timeout, if one is set via $.ajaxTimeout. For example, you could use this property to give a single request a longer timeout than all other requests that you've set to time out in one second. See $.ajaxTimeout() for global timeouts.

* (Boolean) global - Whether to trigger global AJAX event handlers for this request. The default is true. Set to false to prevent the global handlers like ajaxStart or ajaxStop from being triggered.

* (Function) error - A function to be called if the request fails. The function gets passed three arguments: The XMLHttpRequest object, a string describing the type of error that occurred and an optional exception object, if one occured.

* (Function) success - A function to be called if the request succeeds. The function gets passed one argument: The data returned from the server, formatted according to the 'dataType' parameter.

* (Function) complete - A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The XMLHttpRequest object and a string describing the type of success of the request.

* (Object|String) data - Data to be sent to the server. It is converted to a query string, if not already a string. Is appended to the url for GET-requests. See processData option to prevent this automatic processing.

* (String) contentType - When sending data to the server, use this content-type. Default is "application/x-www-form-urlencoded", which is fine for most cases.

* (Boolean) processData - By default, data passed in to the 'data' option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send DOMDocuments or other non-processed data, set this option to false.

* (Boolean) async - By default, all requests are send asynchronous (set to true). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

* (Function) beforeSend - A pre-callback to modify the XMLHttpRequest object before it is sent. Use this to set custom headers in the request, for example. The XMLHttpRequest is passed as the only argument.

Return value: XMLHttpRequest


//Add hover capabilities
$('tbody > tr').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
});

27 Şubat 2009 Cuma

Birazda benden JQUERY

JQUERY
input tipi text olan elementleri 0. formda bulacak ve her birisi için dönecek.

function donFonksiyon() {
$.each($("input:text", document.forms[0]), function() {
alert(this.id);
}, null);
}


Select değişti seçili olanın text ve value sunu yazalım.

$("select").change(
function()
{
var SelectIdsi = this.id;
var selectedIndex = this.selectedIndex;
var seciliText = this.options[this.selectedIndex].text;
var seciliValue = this.value;
});

Select içinde bir option seçmek:

$('#select').selectOptions('secilecekOptionValue');


Seçili elementin değeri (bir kenarda dursun, Ref:JQUERY)

/* get the value from a dropdown select */
$('select#foo option:selected').val();

/* get the value from a checked checkbox */
$('input:checkbox:checked').val();

/* get the value from a set of radio */
$('input:radio[name=bar]:checked').val(); buttons



/* CheckBox ya da Radio seçiliyse değerini getir:
$("#rbCB:checked").val()

/* Radio seçilmiş mi?
$("#rbCB").is(":checked");

/* Using Name for selector */
$("input[@name='chkBox']").click(function(){
// your code here
});

/* Using ID for selector */
$("#chkBox").change(function(){
// your code here
});



Sayfanın Adresi: http://www.techiegyan.com/?p=112

Radio Button:

<input name="rdio" value="a" checked="checked" type="radio">
<input name="rdio" value="b" type="radio">
<input name="rdio" value="c" type="radio">

Handling change event for Radio buttons:
Click event can be handled similarly. ID can not be used here because Radio buttons are used for single selection from a group where all input fields of group should have same name.


$("input[@name='rdio']").change(function(){
if ($("input[@name='rdio']:checked").val() == 'a')
// Code for handling value 'a'
else if ($("input[@name='rdio']:checked").val() == 'b')
// Code for handling value 'b'
else
// Code for handling 'c'
});

Ayrıca eburhan.com da harika anlatımla JQUERY ziyafeti var duyrulur.