Scribd Logo
Importer

Bienvenue sur Scribd !

  • Jquery: Editable Combo Box: Reference

    Transféré par

    Ajay Dixit
    29 vues5 pages
    This document discusses using jQuery plugins to add functionality to HTML elements. It summarizes how to use an editable combo box plugin to allow editing, adding, and removing items from an HTML select element. It also demonstrates detecting double clicks on a DIV by toggling the element's CSS class, and using the tablesorter plugin to sort the columns of an ASP.NET GridView.

    Description originale:

    Titre original

    TipsNtricks

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    This document discusses using jQuery plugins to add functionality to HTML elements. It summarizes how to use an editable combo box plugin to allow editing, adding, and removing items from an HTML select element. It also demonstrates detecting double clicks on a DIV by toggling the element's CSS class, and using the tablesorter plugin to sort the columns of an ASP.NET GridView.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    29 vues5 pages

    Jquery: Editable Combo Box: Reference

    Transféré par

    Ajay Dixit
    This document discusses using jQuery plugins to add functionality to HTML elements. It summarizes how to use an editable combo box plugin to allow editing, adding, and removing items from an HTML select element. It also demonstrates detecting double clicks on a DIV by toggling the element's CSS class, and using the tablesorter plugin to sort the columns of an ASP.NET GridView.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    Reference: http://www.devcurry.

    com/search/label/jQuery

    jQuery: Editable Combo Box


    I stumbled across a cool jQuery plugin that allows you to have editable combo box (HTML Select element). Using this plug-in, you can add, remove and edit items from the list. Although the plug-in demos have clear instructions on how to setup the plug-in, for the sake of a complete post, heres how to use this plug-in in your applications: Step 1: Download the Plug-in and save it as jquery.eComboBox.min.js. Reference the plugin in your page as shown below:

    Step 2: Declare an HTML Select/ Combo Box on the page

    Step 3: Call the eComboBox method on the select element

    and thats it. Now load the page and select an element. Start typing in the box and the element will be edited. Hit Enter to save.

    Similarly to add a new element, select {NEW ELEMENT} and start typing the element name. Hit Enter to save. To Delete, select the element and hit delete on your keyboard. There are a couple of options you can use to prevent editing, deleting or adding new elements too. Explore them here with a Live Demo

    jQuery: Detect Double Click in a Div


    Heres a very simple piece of code that shows how to detect double click in a DIV element. In order to detect a single click, double click and other mouse events, jQuery has a set of Mouse events that you can use. In this example, we will toggle the border color and size of a DIV when it is double clicked <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Detect Double Click (from DevCurry.com)</title> <style type="text/css"> div{ border: 1px solid black; height:100px; width:200px; } .alt { border: 4px solid red; } </style> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.2.min.js"> </script> <script type="text/javascript"> $(function () { $('#divOne').dblclick(function () { $(this).toggleClass('alt'); }); }); </script> </head> <body> <div id="divOne"> </div> </body> </html> As you can see, we are using toggleClass to toggle the CSS class of the DIV whenever the user double clicks it. To detect a double click, we are using the in-built jQuery mouse event .dblclick(). Similarly you can attach this event to any HTML element.

    Sort the ASP.NET GridView Columns using jQuery TableSorter plugin


    Continuing my ASP.NET GridView Tips and Tricks series, this post shows how to use a jQuery plugin to sort ASP.NET GridView columns that are bound to custom classes. Create an ASP.NET website and add a GridView to it. Here I am assuming that we have an Employee class and the GridView is bound to this custom class. See an example here if you are not familiar with binding a GridView to custom classes. Now download the tablesorter plugin from tablesorter.com and keep it in a Scripts folder. I have also added the jQuery script file but you can always use the jQuery script from the CDN. The tablesorter plugin requires the THEAD and TBODY tags to work on. The ASP.NET GridView by default, does not generate the <thead>, <tbody> and <tfoot> tags but it does provide a few properties specifically designed for accessibility. Use the following code to make it generate these accessibility tags protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); if (gvCustom.Rows.Count > 0) { //To render header in accessible format gvCustom.UseAccessibleHeader = true; //Add the <thead> element gvCustom.HeaderRow.TableSection = TableRowSection.TableHeader; //Add the <tfoot> element gvCustom.FooterRow.TableSection = TableRowSection.TableFooter; if (gvCustom.TopPagerRow != null) { gvCustom.TopPagerRow.TableSection = TableRowSection.TableHeader; } if (gvCustom.BottomPagerRow != null) { gvCustom.BottomPagerRow.TableSection = TableRowSection.TableFooter; } } } Thats it. Now add the following code to call the tablesorter plugin on the GridView.

    Note: If paging is enabled on the GridView, only the current page will be sorted. Hence turn paging off if you have to use this plugin. This plugin works well for Grids with lesser amount of rows.

    You should now be able to click the header of any column and sort it. See a Live Demo here. Note: If you want to sort using an Image, check my article ASP.NET GridView Sorting with Image

    Vous aimerez peut-être aussi