Ne garip bir isim oldu yav, göster – gizle :) Neyse jQuery ile basit bir menü örneği. Önizlemesine buradan bakabilirsiniz.
<script type="text/javascript">
$(document).ready(function(){
$(".panel span").click(function(){
var t = $(this);
if(t.text() =="Göster")
{
t.text("Gizle");
}
else
{
t.text("Göster");
}
$(".panel .menu").toggle('fast');
});
});
</script>
quickSearch tablo içinde ki veriler içerisinde arama yapmamıza olanak sağlayan bir jquery eklentisi. Eklentinin ana sayfasına buradan ulaşabilirsiniz. Eklenti gayet hızlı çalışıyor ve arama işinde de gayet başarılı. Buradan içerisinde çok kayıt bulunan bir tabloda ki performansını görebilirsiniz. İnsan neden böyle bir eklentiye ihtiyaç duyar gibisinden bir soru gelebilir. Alınan raporlarda, ürün listelerinde vb.. yerlerde formu post edip, veritabanına istek göndermek bu tarz bir eklenti varken gereksiz olur, üstelik sayfa yeniden yüklenmeyeceğinden ayrıca bir performans kazanımı söz konusu oluyor. Şöyle de bir durum var 10bin 100bin kayıt olan yerlerde böyle bir çözüm söz konusu olamaz. Eklentinin çaışma mantığı gayet basit, nihayetinde biz veritabanından gelen veriyi tablomuza dolduruyoruz. Eklenti tablo içerisinde ki verilerden bizim kriterlerimize uygun olan olanları gösteriyor, diğerlerini ise gizliyor. Birde unutmadan eklenti sadece table içerisinde arama yapmıyor, liste elemanları içerisinde de arama yapabiliyor, bu bilgilere eklentinin sayfasından ulaşabilirsiniz. Örneğim de kullandığım tablo şablonunu buradan aldım, illa bu tarz bir şablon kullanacaksınız diye bir şartta yok, istediğiniz tasarıma kolayca entegre edebilirsiniz. İlerleyen günlerde yine jquery eklentisiyle, tablo içerisinde arama, sıralama ve sayfalama işlemlerinin kolayca yapılmasına olanak tanıyan başka bir eklentiye bakacağız. Bu eklentiler sayesinde gridView den bir nebzede olsa uzaklaşmış olacağız, zaten bu tarz şeyler varken kim gridview kullanır ki ? Okumaya devam et quickSearch ile tablo içinde arama
Facebook’ un fotoğrafları etiketleme (tag) lama mekanızmasını bilmeyen yoktur herhalde. Geçen gün lazım oldu ara tara bir türlü istediğim gibisini bulamadım. İsteğimize en yakın olan olan scripti gözüme kestirip facebook vari bir etiketleme mekanızması yapmaya çalıştım. (Scriptin (betik) orjinal halini bir türlü bulamadım, unutmazsam yarın eklerim.) Betiğe eklediğim özellikler; etiketleme sırasında arkadaşların listesi geliyor ve tıklayıp o kişiyi etiketleyebiliyorsunuz. Arkadaş listenizde arama yapabiliyorsunuz. Etiketleme işlemlerini veritbanına yazma ve okuma. Ufak tefek bir kaç ayar daha verdim. Betik kullanılacağı yere göre kolayca düzenlebilir. Bundan dolayı bir kullanıcı etiketlenmişse tekrar etiketlenemesin veya benzeri durumlar için hiç bir işlem yapmadım, heh unutmadan sql enjeksiyona önleminizi almadan direk kullanmayın. İsteyen istediği gibi düzenleyip kullanabilir, zaten görünce ne kadar basit bir şey olduğunu göreceksiniz.
Okumaya devam et jQuery ile FaceBook tarzı fotoğraf etiketleme
Sürekli site açılış
haberi verecek değilim :) Şimdi ki yazımda jQuery ve css ile basit bir yatay
açılır menünün nasıl yapılacağına göz atacağız. Başlangıç noktasında ul ve li
etiketlerinden bir hiyerarşi yaratıyoruz. Eğer kodumuza bakarsak yapıyı rahatlıkla anlayabiliriz, bir nevi ağaç yapısı.
<ul> <li><a href="">Deneme</a></li> <li><a href="">Deneme</a> <ul> <li><a href="">asdasd</a></li> <li><a href="">fasdfasdf</a></li> <li><a href="">asdfasdf</a></li> </ul> </li> <li><a href="">Deneme</a></li> <li><a href="">Deneme</a> <ul> <li><a href="">sdafasgdasdf</a></li> <li><a href="">sdgsadf</a></li> <li><a href="">sdfsdfasd</a></li> </ul> </li> <li><a href="">Deneme</a></li> </ul>
Sonrasında css ile birlikte biçimlendirmemizi yapıyoruz. Buradaki önemli olan nüans ikinci seviyedeki ul etiketlerini
display:none yaparak ilk etapta görünmemesini sağlamak sonrasında da
position:absolute ile pozisyonunu sabitliyoruz.
body{font-family:Verdana,Helvetica;font-size:11px;background-color:#333}
.menu{}
.menu ul{list-style:none;padding:0;margin:0}
.menu ul li{float:left;padding:5px;margin:2px;}
.menu ul li a{color:White;text-decoration:none;font-weight:bold;}
.menu ul li:hover{background-color:#5a5a5a}
.menu ul li ul{display:none;position:absolute;}
.menu ul li ul li{float:none;border-bottom:1px solid #ededed}
.menu ul li ul li:hover{border-bottom:1px solid #5a5a5a;background-color:Transparent}
En son işlem olarak da jQuery ile üzerine gelinen li nin altında bulunan ul nin görünmesini sağlamak. Neden bu ul görünmüyordu çünkü css de displayını none yapmıştık ;) Koda
baktığımızda gayet basit bir mantığın olduğunu göreceksiniz. Daha değişik açılma
efektleri için
jQuery’ nin efekt kategorisine göz atabilir ve rahatlıkla
uygulayabilirsiniz. Burada aklıma gelmişken projenize
jquery.js yi eklemeyi unutmayın ;)
$(document).ready(function() {
$("#menu1 ul li").hover(
function() {//mouse üzerindeyken çalışacak fonksiyonumuz. (mouseover)
$("ul", this).slideDown("fast");
},
function() {//mouse üzerinde değilken çalışacak fonksiyonumuz. (mousout)
$("ul", this).slideUp("fast");
});
});
Aşşağıda ki örneklerde menülerin farklı şekillerde nasıl çalıştığını görebilir ve kaynağı görüntüleyerek kodları alabilirsiniz. Bir yazının daha sonuna geldik, kalın sağlıcakla..
Hazırdan ne kadar kaçarsak yaptığımız işin kontrolüde bir okadar elimizde olur. Son zamanlarda elimden geldiği kadar hazır scriptlere bulaşmıyorum. Sebebide ekleme çıkarmalarda yada kişiselleştirmelerde yaşadığım problemler ve beraberinde çok büyük zaman kayıpları. Bu noktada jQuery dertlere deva oluyor desem sanırım abartmış olmam. Bu yazımda çoğu haber sitesinden aşikâr olduğumuz manşet mekanızmasından yapacağız. Kodları gördüğünüzde jQuery nin bize neler sunduğunu daha iyi anlayacaksınız. Kodlar gayet açık ve net, istediğiniz gibi istediğiniz yerini basitçe değiştirebilir, şekilden şekile sokabilirsiniz. Buyrun size jQuery manşet mekanızması;
Otomatik kod tanımlamayı garipsemeyin çünkü intelliSense kelimesinin Türkçe karşılığını bulamadım :) Kısaca intelliSense şu demek; kodu yazmaya başladığınızda otomatik olarak ilgili kodcuklar listeleyen, aynı zamanda fonksyionların açıklamalarını alacağı parametreleri görebildiğimiz, işimizi hızlandırmaktan başka bir şeye yaramayan bir özellik. Bu işlemi jQuery içinde yapabiliyoruz, yani $(document) noktaya bastığımızda ilgili fonksiyonlar geliyor. Bunun için http://code.jquery.com/jquery-1.2.6-vsdoc.js adresindeki vsdoc dosyasını indiriyoruz. Sonrasında http://docs.jquery.com/Downloading_jQuery#Current_Release adresinden en son jQuery dosyasını indiriyoruz. Yapmamız gereken tek şey indirdiğimiz jquery-1.2.6-vsdoc.js dosyasının adını, indirdiğimiz jQuery dosyası adı -vsdoc şeklinde düzenliyoruz. Garip bir cümle oldu bende farkındayım, resimlerden bakarsak daha iyi anlayabiliriz.
Artık önümüzde jQuery yazmak için hiç bir engel kalmadı. Başka bir yazıda görüşmek üzere..
Bilmeyenler için jQuery bir javascript çatısıdır. (framework). Bilidiğiniz üzere web ortamında kullanıcı tarafında yapmamız gereken aksiyonları javascript ile yapabiliyoruz. Web 2.0 ile birlikte kullanıcı tarafındaki özellikler bir hayli arttı ve önem kazandı. Bu olayın şüphesiz öncüleri Facebook ve Google gibi isimler oldu. Hayatımıza giren yeni özelleklerden bazıları şu şekilde; sayfa yeniden yüklenmeden sunucu taraflı işlemler yapabilme (ajax), sekme (tab), aramalarda otomatik tamamlama (auto complete) gibi.. Asp.Net geliştiricilerinin bildiği üzere Ajax Control Kit ile yukarda bahsettiğim işleri çok basit bir şekilde projelerimize uygulayabiliyoruz. Böyle bir imkan varken neden jQuery kullanalım dimi ? Bunun bir çok sebebi bulunuyor, isterseniz bunlara bir göz atalım.
jQuery dünyasına ilk adımı atmak biraz zor gelebilir fakat içine girdiğinizde kullanması ve kodlanması oldukça kolay bir çatı olduğunu göreceksiniz. Yaptığınız işten bir okadar daha zevk alacağınızın garantisinide ben veriyorum. Şimdilik benden bu kadar ilerleyen günlerde tekrar görüşmek üzere, hoşçakalın..
Bilmeyenler için autocomplete nedir onu söyleyeyim, bir textbox’ a kelime girmeye başlıyorsunuz ve o ana kadar girilmiş olan karakterleri veritabanında arayıp alt tarafta açılan listede, ilgili kayıtları kullanıcıya sunan bir sistem. Google buna güzel bir örnek teşkil ediyor. Bu işlem için Ajax Control Toolkit içinde bulunan AutoComplete nesnesiyle de işimizi görebiliyoruz. Fakat ajax control araçlarıyla projemize bir şey eklediğimizde arka planda bir kod ve dosyada beraberinde projemize eklenmiş oluyor, bu durum büyük projelerde problemler çıkartabilir. Hemde zaman zaman tarayıcıdan tarayıcıya antin kuntin problemleride beraberinde getiriyor. Aklıma gelmişken, oldukçada yavaş çalışıyor. Kısacası kullanması basit fakat performansı çok kötü bir yöntem. Uzun zamandır projelerimde jQuery kullanıyorum ve en ufak bir problem dahi yaşamadım. Master sayfama jQuery’ i ekliyorum ve tüm projede istediğim herşeyi rahatlıkla yapabiliyorum. Farklı durumlar içinse bir sürü eklentisi bulunuyor. AutoComplete‘ de bunlardan biri. Eklentinin sayfasına buradan ulaşabilir, demosuna buradan bakabilirsiniz. Anlatacağım örnekte direk veritabanından arama yapacağız. Daha fazla uzatmadan kodlarımıza bakalım. İlk önce gerekli dosyaları indirip, projemize ekliyoruz.
http://jquery.bassistance.de/autocomplete/lib/jquery.js
http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js
http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css
Sonrasında aşşağıdaki gibi kodumuzu yazıyoruz.
Default.aspx sayfamız
<script type="text/javascript">
$(document).ready(function() {
$("input#<%=txtKelime.ClientID %>").autocomplete('Ara.aspx').result(function(event, item) {
$("#<%=txtGizliAlan.ClientID %>").val(item.toString().split(",")[1]);
});
});
</script>
<form runat="server" id="form1">
<asp:textbox id="txtKelime" runat="server" />
<asp:textbox id="txtGizliAlan" runat="server" style="display:none" />
</form>
Yukarıdaki kodda txtGizliAlan olarak gördüğümüz alan, seçtiğimiz kaydın id değerinin saklandığı alanımız. Yani ilgili kaydın id sini veritabanına yazacaksak burayı kullanıyoruz.
Ara.aspx sayfamız
protected void page_load(object sender, EventArgs e) {
string strKelime = Request.QueryString["q"];// burada gelen değeri sql enjeksiyondan korunmak için kontrol etmeyi unutmayın !
DataTable dt = veritabani.DataTableGetir("Select * from tabloAdi where aranacakAlan like '%" + strKelime + "%'");
foreach (DataRow dr in dt.Rows)
{
Response.Write(dr["alanAdi"].ToString() + "|" + dr["id"].ToString() + Environment.NewLine);
}
}
İşte bu kadar kolay ! Artık bizimde bir Autocomplete mekanızmamız var.
Bir projem de kullanmak üzere jQuery ile basit bir anket uygulaması yapmıştım. İşlevini gerektiği gibi yerine getiriyordu fakat dedim ki azcık da göze hitap etsin. Aramaya oyuldum ve bu iş için uygun mekanizmayı aramaya başladım fakat bir türlü istediğim gibi bir şey bulamadım. Madem dedim öyle kendim yapayım ve yapmışken de sizlerle aylaşayım. 4-5 satır kodla işi bağladım, çok da hoşuma gitti.
Düzenleme: Şenol Örencik arkadaşımın söylediği gibi bir şey yapmaya çalıştım. Barlar geldikten sonra sonuçlar beliriyor.
jQuery kodları. Olayın tamamı için demo sayfasının kaynak kodlarını görüntüleyebilirsiniz.
<script type="text/javascript">
$(document).ready(
function(){
$("#anket div span").fadeTo('fast',0.1);
$("#anket div").each(function(){
var deger = $(this).text();
$(this).css({width: "0%"}).animate({width: deger}, 3000,
function(){
$("#anket div span").fadeTo(1000,1);
});
});
}
);
</script>
Bazı şeyler hep gözünüzün önündedir fakat aradığınızda bir türlü bulamazsınız, geçenlerde çok aramama rağmen bir türlü istediğim şekilde açılır menü (drop down menu) bulamadım. Dedim madem yok kendim yapmaya çalışayım, çat pat jQuery bilgimle kendimce bir menü yaptım, umarım işinize yarar. Çok basit jQuery ve css kodlarından oluşan bu menünün görüşünü istediğiniz gibi değiştirebilirsiniz. Dosyaların içerisinde .psd dosyası da bulunuyor.
Sıralamadan kastım, kategori sıralama olabilir, eklenti sıralama olabilir, yazı sıralama olabilir vb.. Normalde sıralama işlemlerini yapabilmek için epeyce kod yazmaktan ziyade kullanıcının nasıl en rahat şekilde kullanabileceğinin hesabını kitabını sıklıkla yapıyoruz. Sağolsun jQuery‘ nin Ui (kullanıcı arayüzü (user interface)) imdadımıza yetişiyor. Önce sıralama (sortable) fonksiyonunu kullanıyoruz, daha sonra veriyi serileştiriyoruz (serialize) sonrada ajax ile postalıyoruz.Hemen kodlarımıza bakalım. Öncelikle bu iki dosyayı Jquery Ui indirelim ve sayfamıza ekleyelim.Veritabanımızdaki kategoriler tablomuz.
CREATE TABLE [kategoriler] ( [id] int IDENTITY(1, 1) NOT NULL, [kategoriadi] nvarchar(50) NULL, [sira] int NULL, PRIMARY KEY CLUSTERED ([id]) ) ON [PRIMARY] GO
sirala.aspx sayfamızın içeriği
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 10px;
}
#icerik ul{
margin:0;width:300px
}
#icerik ul li {
list-style: none;
margin: 0 0 4px 0;
padding: 5px;
background-color:#007dd5;
color:#fff;
}
#icerik li:hover{
cursor:move;
}
.yeniyer{border:2px dotted #860101}
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#icerik ul").sortable({
placeholder: 'yeniyer',
opacity: 0.6,
cursor: 'move',
update: function() {
var order = $(this).sortable("serialize");
$.post("kaydet.aspx", order);
}
});
});
});
</script>
<div id="icerik">
<ul>
<asp:Literal runat="server" ID="liste"></asp:Literal>
</ul>
</div>
Sirala.aspx.cs sayfamızın içeriği
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
listeDoldur();
}
}
protected void listeDoldur() {
DataTable dt = veritabani.DataTableGetir("select * from kategoriler order by sira asc");
foreach (DataRow dr in dt.Rows)
{
liste.Text += "
<li id="\"sira_"">" + dr["kategoriadi"].ToString() + "</li>
";
}
}
kaydet.aspx.cs sayfamızın içeriği, yani sıralama işlemlerini veritabanına yazan sayfamız.
protected void Page_Load(object sender, EventArgs e)
{
string gelen = Request.Form.ToString().Replace("%5b%5d", "[]").Replace("sira[]=", "");
char[] ayrac = new char[] { '&' };
string[] gelenler = gelen.Split(ayrac);
int i = 1;
foreach (string veri in gelenler)
{
veritabani.guncelle("Update kategoriler set sira='" + i + "' where id=" + veri + " ");
i++;
}
}
Örneğin tamamını indirmek için tıklayın. Çalışan örneğe buradan bakabilirsiniz.
Nedenini bilmiyorum ama başlığı seçerken epeyce zorlandım, neyse ki bir tane buldum :) Konumuza dönelim, GridView kontrolünde verileri listeletirken ilgili satırın altında ilişkili diğer kayıtları göstermemiz gerekebiliyor. Bu sayede kullanıcıya çok işlevsel bir listeleme yapabiliyoruz. Bu işlem için genelde kullanılan yöntem; tüm verilerin tümünün çekilip sonra javascript kullanarak göster-gizle şeklinde gösterilmesi. Bu yöntemde ciddi anlamda performans sıkıntısı yaşarız çünkü 40 tane kaydımız olsa ve bu kayıtlara ait 5′ er de alt kayıt olsa ilk seferde toplam 200 kayıt listelemiş oluyoruz. Anlatacağım yöntemde bu işi jQuery Ajax ile birlikte verimli ve efektif bir şekilde çözeceğiz. (Bugün çok değişik bir gün sanırım havalardan kaynaklanıyor, anlatım bozukluğu varsa kusuruma bakmayın) Mekanızmamız iki adet .aspx sayfasından oluşuyor. Birincisi normal kayıtlarımızı listelettiğimiz GridGenislet.aspx diğeri ise üzerine tıklayınca açılacak olan kısmın bilgilerini getiren Genisle.aspx GridGenislet.aspx sayfamızın ilgili kodlarına bakalım. Burada jQuery ile açılıp kapanma işlemi sırasında oluşacak efekt işini ve Genisle.aspx sayfamıza Ajax ile ilgili kayıtların gelmesini sağlayacak fonksiyonumuzu yazıyoruz. Sonrada Tümünü Göster ve Tümünü Gizle olayını ekledim. Sırf jQuery i biraz daha algılayabilmek adına :)
$(document).ready(function(){
$('a#tgizle').click( tumunuGizle );
$('a#tgoster').click( tumunuGoster );
});
function tumunuGizle(){
$('div.genisleyenDiv').slideUp();
}
function tumunuGoster(){
$("div.genisleyenDiv").each(function()
{
goster($(this).attr('id'));
});
}
//can damarımız burdaki fonksyion, genisle.aspx e id bilgisini gönderip sayfamızda gösteriyoruz.
function goster(divId)
{
$('div#'+divId).toggle('slow');
$('div#'+divId).load('Genisle.aspx?Id='+divId);
}
GridGenislet.aspx.cs sayfamızın ilgili kodlarına bakalım.
DataTable dt = veritabani.DataTableGetir("Select top 10 id,baslik,icerik,tarih from yazilar");
GridView1.DataSource = dt;
GridView1.DataBind();
for (int i = 0; i < GridView1.Rows.Count; i++)
{
//burada hersatırın onclick özelliğine goster fonksiyonumuzu atıyoruz ve ilgili id yi yazdırıyoruz.
GridView1.Rows[i].Cells[0].Attributes.Add("onclick", "goster('" + dt.Rows[i][0].ToString() + "')");
}
Genisle.aspx sayfamızda ise gelen id değerini alıp sql cümlemizdeki yerine koyuyor ve listeletiyoruz. Burdaki yöntemde ben GridView üzerine anlatmaya çalışıyorum, mantığı anlarsanız çoğu yerde bu mekanizmayı kullanabilirsiniz.
Sadece dilimin döndüğünce mantığı anlatmaya çalıştım, eğer isteyen olursa çalışır kodları da paylaşabilirim. Çalışan örneği görmek için tıklayın. Zaman problemim nedeniyle css ile süsleyemedim, istendiği taktirde çok şık bir görünüm verilebilir. Herkese güzel günler diliyor ve konuyu burada noktalıyorum.