Thursday, June 28, 2012

Asp.net jQuery UI Simple Button Example


The jQuery UI library provides us option to decorate the button control, and add additional features to the Button control using jQuery

Let us start with a simple example, let us place a simple Asp.Net Button on a page and apply the jQuery button effect to the control.


Here is an example.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>jQuery Button</title>
    <link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
    <script type="text/javascript"
src="JavaScript/jquery-1.7.2.js">
    </script>
    <script type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js">
    </script>
    <script type="text/javascript" 
            language="javascript">
            $(document).ready(function() 
            {
                $('#cmdjQueryButton').button();
        });
    </script>
</head>
<body>
    <form id="frmButton" runat="server">
    <div>
        <asp:Button
id="cmdNormalButton"
runat="server"
Text="Normal Button" />  
        <asp:Button
id="cmdjQueryButton"
runat="server"
Text="jQuery Button" />   
    </div>
    </form>
</body>
</html>

Run the application, you can see the difference between the normal button and the jQuery button as follows.



Related Post





Search Flipkart Products:
Flipkart.com

No comments: