CODEWITHSUNDEEP
jqueryjquery-ui
AndreaNobili
AndreaNobili

Reputation: 42957

How to insert a JQuery icon button inside a page? (Some doubts)

I am pretty new in Jquery and I have the following doubt related about how to insert an icon button inside a page.

I found this example: http://jqueryui.com/button/#icons

So I think that if I want to insert an icon button I have to do something like this:

<button>Button with icon only</button>

and into the ... section I have to put something like it:

$(function() {
    $( "button:first" ).button({
      icons: {
        primary: "ui-icon-locked"
      },
      text: false
    })
});

Is it correct?

From what can I understand it seems to me that this "script" is used to set the icon to my button.

What exactly do this line:

$( "button:first" ).button(

I think that it is used to associate the previous script to the proper tag in my HTML code. In this case the first button in the HTML. Is it right or am I missing something?

It it is correct, can I associate the script using an html id or class?

for example if I have something like this

<button id="myButton">Button with icon only</button>

can I associate the script to the button having myButton as ID?

Tnx

Upvotes: 0

Views: 101

Answers (1)

prakashrajansakthivel
prakashrajansakthivel

Reputation: 2032

I have used sometext you have typed .

1) "So I think that if I want to insert an icon button I have to do something like this:

> <button>Button with icon only</button>

and into the ... section I have

to put something like it:

$(function() { $( "button:first" ).button({ icons: { primary: "ui-icon-locked" }, text: false }) });"

Yes , if you want to insert a Iconbutton ,you need insert the button tag.

2)$( "button:first" ).button(

This exactly means what you have asked.It is pointing to the first button in the script.just works like the selector in the css

3)can I associate the script to the button having myButton as ID?

yes, you can do it.after all jquery needs a selector an ID so as a CSS class will definitely work that way.

just to keep it simple i have linked a fiddle below:

http://jsfiddle.net/LLBQu/8/

Note:I haven't created that fiddle i have just customized as per your questions.

Upvotes: 1

Related Questions