Tahmin ediyorum 3 hafta sonra kaldığım yerden yazılarıma devam edeceğim. Bir proje için yazının tamamını gör olayını yaptım, bugünde bu olayı eklenti haline getireyim hemde jQuery e nasıl eklenti yazılıyor bunu bir göreyim diyerek more eklentisini yazdım :) (Hayatımın en garip duygulu günlerinden birini geçiriyorum, bu sebepten dolayı cümlelerde anormallikler olabilir, kodlarda da, sonra uğrar düzeltirim.)

Eklenti şu işi yapıyor; diyelim uzunca bir yazı var ve siz bunun ilk 100 karakterini göstermek istiyorsunuz, 100 karakterden sonra çıkan bir düğmeylede yazının tamamını gösteriyorsunuz. Yada kendi belirlediğiniz bir ayraçla bu işlemi yapabiliyorsunuz. Bu arada eğer özellik açıksa ki varsayılan olarak açık, html etiketlerini kaldırıyor, devam et düğmesine basıncada yazının orjinal halini getiriyor.  Örneklere bakarak demek istediğimi daha iyi anlayabilirsiniz.

$(document).ready(function () {
  $(".more").more();
  $(".more").more({text:' ..more',textClass:'moreLink',character:50,splitChar:'{devam}'});
});

Eklentinin git adresi: https://github.com/apoStyLEE/jQuery-More-plugin

Örnek: http://95.0.146.135/jqueryMore/

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 ?

www.jquerydot.net sitesi de benim. Bundan dolayı oradan arakladığımı felan düşünmeyin :) Zaten burada ki yazıyı google translate ile çevirirsenin oradaki yazının aynısının olduğunu farkedeceksiniz :)

    <script type="text/javascript">
        $(function() {
            $('input#search').quicksearch('table#gradient-style tbody tr', {'loader': 'span.loading'});
        });
    </script>
Search <input type="text" name="search" id="search" /><span class="loading">Loading..</span>

        <table id="gradient-style" summary="Meeting Results">
            <thead>
    	        <tr>
        	        <th scope="col">Company Name</th>
                    <th scope="col">Contact Name</th>
                    <th scope="col">Contact Title</th>
                    <th scope="col">Address</th>
                </tr>
            </thead>
            <tfoot>
    	        <tr>
        	        <td colspan="4">Total <strong><asp:Literal runat="server" ID="ltrTotalRecord" /></strong> records</td>
                </tr>
            </tfoot>
            <tbody>
                <asp:Repeater runat="server" ID="rpCustomers">
                    <ItemTemplate>
    	                <tr>
        	                <td><%#Eval("companyname") %></td>
                            <td><%#Eval("contactname") %></td>
                            <td><%#Eval("contacttitle") %></td>
                            <td><%#Eval("address") %></td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </tbody>
        </table>

Default.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        rpCustomers.DataSource = db.DTGetir("Select * from customers");
        rpCustomers.DataBind();
        ltrTotalRecord.Text = rpCustomers.Items.Count.ToString();
    }

Buradan örneği indirebilir, buradan da çalışan örneğine bakabilirsiniz.

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.

İndirdiğiniz dosyalar arasında db.cs adında bir class bulunuyor, her nekadar çoğu kısmını kaldırıp şuanki projeye eklesemde ilerleyen günlerde tamamını sizlerle paylaşacağım.

fotoEtiket adındaki tablomuz ve sembolik kullanıcı tablomuz.

    CREATE TABLE [dbo].[fotoEtiket](
	    [id] [int] IDENTITY(1,1) NOT NULL,
	    [fotoId] [int] NULL,
	    [kullaniciId] [int] NULL,
	    [etiket] [nvarchar](50) COLLATE Turkish_CI_AS NULL,
	    [sag] [nvarchar](10) COLLATE Turkish_CI_AS NULL,
	    [ust] [nvarchar](50) COLLATE Turkish_CI_AS NULL,
	    [eklenmezamani] [datetime] NULL

    CREATE TABLE [dbo].[kullanici](
	    [id] [int] NOT NULL,
	    [kullaniciAdi] [nvarchar](50) COLLATE Turkish_CI_AS NULL,

Betiğin çalışır halini buradan indirebilirsiniz.

jQuery çatısının çok tercih edilme sebeplerinin başında, bolca dökümanın ve eklentisinin olması geliyor. Son zamanlar da birazdan sıralayacağım eklentileri çok kullanır oldum. Sebebide işlerini gayet başarılı bir şekilde yapmaları, kullanımlarının son derece basit olması ve boyutlarının makul seviyede olması.

1. Easy Slider: Eklentinin sayfasına buradan ulaşabilirsiniz. Günümüz sayfalarında görmeye alıştığımız, sağa sola kayan ve içerisinde fotoğraf yada yazıların sergilendiği panellere slider diyoruz. Easy slider adının hakkını sonuna kadar veriyor, kullanımı, kişiselleştirmesi son derece basir bir eklenti. Numaralandırma, sürekli döngü, yatay dikey konumlandırma, vb.. bir çok özelliğe sahip.
2. InnerFade: Eklentinin sayfasına buradan ulaşabilirsiniz. Bu eklenti gerçekten çok işlevsel, birden fazla şekilde kullanmak mümkün. Yeni içeriği yazı olarak duyurma (newsticker), görselleri slayt şeklinde gösterebilme gibi..
3. tipsy: Eklentinin sayfasına buradan ulaşabilirsiniz. İpucu aracı (tooltip) lazım olduğunda vazgeçemediğim bir eklenti. Kullanımı son derece basit olması gerektiği kadar özelliği olan bir eklenti. Çok jan janlı değil ama etkili bir ipucu aracı. Form elementlerinde de kullanılabiliyor olması bana göre ekstra bir avantaj.