How to use custom button instead of jquery ui buttons?

Question

How to implement the custom image instead of jquery dialog buttons ? There is standard buttons are there but i have designed new buttons using photoshop with extesion of .png. So i would like to use .png button instead of jquery dialog button.

I hope there is options through css , but if you give me small example, it will be very help to me.

jQuery("#dialog-form").dialog ({ 
 autoOpen: false,
  height: 600,
  width: 700,
  modal: true,
  resizable: false,
  draggable: false, 
  buttons : {
    "Search" : function() { // dialog button need to be customize.

yeyene · Accepted Answer · 2013-07-10 05:59:12Z

4

Try this one? DEMO http://jsfiddle.net/yeyene/GnpQ8/2/

Create a custom close button.

$(document).ready(function(){
    $("#dialog-model").dialog({
        create: function (event, ui) {
            $('.ui-dialog-titlebar').css({'background':'none','border':'none'});
            $(".ui-dialog-titlebar").html('<a href="#" role="button"><span class="myCloseIcon">close</span></a>');
            $("#dialog-model").css({ 'font-family': 'Helvetica', 'padding': '0', 'font-size': '12px' });
        },
        width: 250,
        height: 150,       
        modal: true,
        resizable: false
    });

    $("span.myCloseIcon").click(function() {
        $( "#dialog-model" ).dialog( "close" );
    });
});

answered Jul 10, 2013 at 5:59

yeyene

7,4001 gold badge24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ray · Accepted Answer · 2013-07-10 04:41:50Z

0

.button-class { Background; url('yourimage.png');

}

answered Jul 10, 2013 at 4:41

Ray

8841 gold badge6 silver badges23 bronze badges

1 Comment

user2444474 Over a year ago

I have 4 buttons inside jquery dialog , so this button class going to be reflect which button ? how to specify the each button ?

Ganesh Rengarajan · Accepted Answer · 2013-07-10 04:48:40Z

0

Remove the below code from your page DEMO

   <script src="js/development-bundle/ui/jquery.ui.button.js">
   <script>
    $(function() {
    $( "input[type=submit], a,button" )
    .button()       
                });
   </script>

and then use your customized button like normal css

edited Jul 10, 2013 at 4:48

answered Jul 10, 2013 at 4:34

Ganesh Rengarajan

2,00613 silver badges26 bronze badges

5 Comments

user2444474 Over a year ago

I'm using jquery button like buttons : { "search" : function() { }..updated in question section.

Ganesh Rengarajan Over a year ago

u mean popup window button

Ganesh Rengarajan Over a year ago

<input value="Hello" type="button" id="popup" class="classname"> put your css class name here

Ganesh Rengarajan Over a year ago

Like that u can add your image .classname { border: none; background: url('/forms/demo.png') no-repeat top left; padding: 2px 8px; }

user2444474 Over a year ago

No buddy , I asking with in dialog box there is search button - this need to be customize.not open dialog link.

Collectives™ on Stack Overflow

How to use custom button instead of jquery ui buttons?

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related