Thursday, August 9

Differnt Types of Jquery ComboBox in Asp.net


Introduction

Hi i am shibashish mohanty going to show you how to use Jquery ComboBox.

Using the code

Here is My Source Code:- 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DropDownList.aspx.vb" Inherits="examples_DropDownList"%>

<!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 runat="server">
    <title></title>
    <script src="Js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Js/jquery.bgiframe.min.js" type="text/javascript"></script>
    <script src="Js/jquery.sexy-combo.js" type="text/javascript"></script>
   

    <link href="Css/sexy-combo.css" rel="stylesheet" type="text/css" />
    <link href="Css/sexy.css" rel="stylesheet" type="text/css" />
    <link href="Css/custom.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" >
          $(function () {

              $("#basic").sexyCombo();

              $.sexyCombo.deactivate("#basic");
              $("#activate").bind("click", function () {
                  $.sexyCombo.activate("#basic");
              });


              $("#multiple-combo").sexyCombo();

              var logEvent = function (msg) {
                  return;
                  var $eventLogger = $("#event-logger");
                  $eventLogger.html($eventLogger.html() + msg + "<br />");
              };


              $("#mixed").sexyCombo({
                  emptyText: "Choose a state",
                  autoFill: true,
                  skin: "custom"
              });




          });   
    </script>
    <style type="text/css">
        .style1
        {
            width: 55%;
        }
        .style2
        {
            width: 263px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <div id="event-logger" style="color: red;'"></div>
         &nbsp;<br />
        <table class="style1" bgcolor="#CCCCCC"
             style="border-left-style: double; border-left-color: #990000; border-right-style: double; border-right-color: #800000; border-top-style: solid; border-top-color: #003300; border-bottom-style: solid; border-bottom-color: #003300; margin-left: 364px;">
            <tr>
                <td class="style2">
                    Normal DropDownList with combo effect:</td>
                <td>
    <asp:DropDownList ID="basic" runat="server">
      
         <asp:ListItem value="SM">Shibashish Mohanty</asp:ListItem>
        <asp:ListItem value="IN">India</asp:ListItem>
        <asp:ListItem value="BR">Bhubaneswar</asp:ListItem>
        <asp:ListItem value="AR">Arkansas</asp:ListItem>
        <asp:ListItem value="CA">California</asp:ListItem>
        <asp:ListItem value="CO">Colorado</asp:ListItem>
        <asp:ListItem value="CT">Connecticut</asp:ListItem>

        <asp:ListItem value="DE">Delaware</asp:ListItem>
        <asp:ListItem value="FL">Florida</asp:ListItem>
        <asp:ListItem value="GA">Georgia</asp:ListItem>
        <asp:ListItem value="HI">Hawaii</asp:ListItem>
        <asp:ListItem value="ID">Idaho</asp:ListItem>
        <asp:ListItem value="IL">Illinois</asp:ListItem>
        <asp:ListItem value="IN">Indiana</asp:ListItem>
        <asp:ListItem value="IA">Iowa</asp:ListItem>
        <asp:ListItem value="KS">Kansas</asp:ListItem>

        <asp:ListItem value="KY">Kentucky</asp:ListItem>
        <asp:ListItem value="LA">Louisiana</asp:ListItem>
        <asp:ListItem value="ME">Maine</asp:ListItem>
        <asp:ListItem value="MD">Maryland</asp:ListItem>
        <asp:ListItem value="MA">Massachusetts</asp:ListItem>
        <asp:ListItem value="MI">Michigan</asp:ListItem>
        <asp:ListItem value="MN">Minnesota</asp:ListItem>
        <asp:ListItem value="MS">Mississippi</asp:ListItem>
        <asp:ListItem value="MO">Missouri</asp:ListItem>

        <asp:ListItem value="MT">Montana</asp:ListItem>
        <asp:ListItem value="NE">Nebraska</asp:ListItem>
        <asp:ListItem value="NV">Nevada</asp:ListItem>
        <asp:ListItem value="NH">New Hampshire</asp:ListItem>
        <asp:ListItem value="NJ">New Jersey</asp:ListItem>
        <asp:ListItem value="NM">New Mexico</asp:ListItem>
        <asp:ListItem value="NY">New York</asp:ListItem>
        <asp:ListItem value="NC">North Carolina</asp:ListItem>
        <asp:ListItem value="ND">North Dakota</asp:ListItem>

        <asp:ListItem value="OH">Ohio</asp:ListItem>
        <asp:ListItem value="OK">Oklahoma</asp:ListItem>
        <asp:ListItem value="OR">Orrisa</asp:ListItem>
        <asp:ListItem value="PA">Pennsylvania</asp:ListItem>
        <asp:ListItem value="RI">Rhode Island</asp:ListItem>
        <asp:ListItem value="SC">South Carolina</asp:ListItem>
        <asp:ListItem value="SD">South Dakota</asp:ListItem>
        <asp:ListItem value="TN">Tennessee</asp:ListItem>
        <asp:ListItem value="TX">Texas</asp:ListItem>

        <asp:ListItem value="UT">Utah</asp:ListItem>
        <asp:ListItem value="VT">Vermont</asp:ListItem>
        <asp:ListItem value="VA">Virginia</asp:ListItem>
        <asp:ListItem value="WA">Washington</asp:ListItem>
        <asp:ListItem value="WV">West Virginia</asp:ListItem>
        <asp:ListItem value="WI">Wisconsin</asp:ListItem>
        <asp:ListItem value="WY">Wyoming</asp:ListItem>

        </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    Multiple selection combo box:</td>
                <td>
         <select id="multiple-combo" name="multiple-combo" size="3" multiple="multiple">
         <option value="SM" selected>Shibashish Mohanty</option>
        <option value="IN" selected>India</option>
        <option value="OR">Orrisa</option>
        <option value="BR">Bhubaneswar</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>

        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>

        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>

        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>

        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>

        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
         </select></td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    Normal with Intelisence Dropdownlist:</td>
                <td>
        <asp:DropDownList ID="mixed" runat="server">
      
         <asp:ListItem value="AL">Alabama</asp:ListItem>
        <asp:ListItem value="AK">Alaska Alaska Alaska Alaska Alaska</asp:ListItem>
        <asp:ListItem value="AZ">Arizona</asp:ListItem>
        <asp:ListItem value="AR">Arkansas</asp:ListItem>
        <asp:ListItem value="CA">California</asp:ListItem>
        <asp:ListItem value="CO">Colorado</asp:ListItem>
        <asp:ListItem value="CT">Connecticut</asp:ListItem>

        <asp:ListItem value="DE">Delaware</asp:ListItem>
        <asp:ListItem value="FL">Florida</asp:ListItem>
        <asp:ListItem value="GA">Georgia</asp:ListItem>
        <asp:ListItem value="HI">Hawaii</asp:ListItem>
        <asp:ListItem value="ID">Idaho</asp:ListItem>
        <asp:ListItem value="IL">Illinois</asp:ListItem>
        <asp:ListItem value="IN">Indiana</asp:ListItem>
        <asp:ListItem value="IA">Iowa</asp:ListItem>
        <asp:ListItem value="KS">Kansas</asp:ListItem>

        <asp:ListItem value="KY">Kentucky</asp:ListItem>
        <asp:ListItem value="LA">Louisiana</asp:ListItem>
        <asp:ListItem value="ME">Maine</asp:ListItem>
        <asp:ListItem value="MD">Maryland</asp:ListItem>
        <asp:ListItem value="MA">Massachusetts</asp:ListItem>
        <asp:ListItem value="MI">Michigan</asp:ListItem>
        <asp:ListItem value="MN">Minnesota</asp:ListItem>
        <asp:ListItem value="MS">Mississippi</asp:ListItem>
        <asp:ListItem value="MO">Missouri</asp:ListItem>

        <asp:ListItem value="MT">Montana</asp:ListItem>
        <asp:ListItem value="NE">Nebraska</asp:ListItem>
        <asp:ListItem value="NV">Nevada</asp:ListItem>
        <asp:ListItem value="NH">New Hampshire</asp:ListItem>
        <asp:ListItem value="NJ">New Jersey</asp:ListItem>
        <asp:ListItem value="NM">New Mexico</asp:ListItem>
        <asp:ListItem value="NY">New York</asp:ListItem>
        <asp:ListItem value="NC">North Carolina</asp:ListItem>
        <asp:ListItem value="ND">North Dakota</asp:ListItem>

        <asp:ListItem value="OH">Ohio</asp:ListItem>
        <asp:ListItem value="OK">Oklahoma</asp:ListItem>
        <asp:ListItem value="OR">Oregon</asp:ListItem>
        <asp:ListItem value="PA">Pennsylvania</asp:ListItem>
        <asp:ListItem value="RI">Rhode Island</asp:ListItem>
        <asp:ListItem value="SM">Shibashish Mohanty</asp:ListItem>
        <asp:ListItem value="IN">India</asp:ListItem>
        <asp:ListItem value="TN">Tennessee</asp:ListItem>
        <asp:ListItem value="TX">Texas</asp:ListItem>

        <asp:ListItem value="UT">Utah</asp:ListItem>
        <asp:ListItem value="VT">Vermont</asp:ListItem>
        <asp:ListItem value="VA">Virginia</asp:ListItem>
        <asp:ListItem value="WA">Washington</asp:ListItem>
        <asp:ListItem value="WV">West Virginia</asp:ListItem>
        <asp:ListItem value="WI">Wisconsin</asp:ListItem>
        <asp:ListItem value="WY">Wyoming</asp:ListItem>

        </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Here i am going to explain it Briefly:-








Download source Code from my code project Article:-

Thanks Shibashish Mohanty

Posted by at
Labels: , , , , , , ,

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

Subscribe to: Post Comments (Atom)

.

.
ShibashishMnty
shibashish mohanty