Show Anchor as a Button using JQuery UI

Explore the Top Microsoft SQLServer Technical/ Interview Questions here: http://XploreSqlServer.blogspot.com/

   

Explore the Top Microsoft C# Technical/ Interview Questions here: http://XploreCSharpDotNet.blogspot.com

Explore the Top Microsoft Blazor Technical/ Interview Questions here: https://XploreBlazor.blogspot.com/

1. Add reference to jQuery UI javascript file and CSS file along with JQuery javascript file:

<

script src="jquery-1.8.2.js" type="text/javascript"></script>

<

link href= "ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<

script src="ui/1.9.0/jquery-ui.js" type="text/javascript"></script>


Download the recent version of jQuery and jQuery UI javascript files and themes from here:

jQuery: http://jquery.com/download/
jQuery UI: http://jqueryui.com/download/


2. Add the following script block:

<

script type="text/javascript">

        $(function () {

          $("#lnkSave").button();

        });

</

script>

The above script would show the following anchor tag

<a id="lnkSave" > Save </a>

look like this button :

The color and font of the button is based on the theme downloaded.

3. Specify the parameter value to button() method in case an icon needs to be displayed along with  text:

<

script type="text/javascript">

　

$(function () {

          $("#lnkSave").button({ icons: { primary: 'ui-icon-check'} });

 });

</

script>

The above script would show the anchor as a button with a check mark icon:

Refer jquery-ui.css for the list of supported icons.

Explore the Top Microsoft SQLServer Technical/ Interview Questions here: http://XploreSqlServer.blogspot.com/

   

Explore the Top Microsoft C# Technical/ Interview Questions here: http://XploreCSharpDotNet.blogspot.com