jquery buttons icons for dialog
- by khinester
I have this code:
$(function() {
var mainButtons = [
{text: "Invite"
, 'class': 'invite-button'
, click: function() {
// get list of members
alert('Invite was clicked...');
}
} // end Invite button
, {text: "Options"
, 'class': 'options-button'
, click: function() {
alert('Options...');
}
} // end Options button
] // end mainButtons
, commentButtons = [
{text: "Clear"
, 'class': 'clear-button'
, click: function() {
$('#comment').val('').focus().select();
}
} // end Clear button
, {text: "Post comment"
, 'class': 'post-comment-button'
, click: function() {
alert('send comment...');
}
} // end Post comment
] // end commentButtons
$( "#form" ).dialog({
autoOpen: false
, height: 465
, width: 700
, modal: true
, position: ['center', 35]
, buttons: mainButtons
});
$( "#user-form" )
.button()
.click(function() {
$(this).effect("transfer",{ to: $("#form") }, 1500);
$( "#form" ).dialog( "open" );
$( ".invite-button" ).button({ icons: {primary:'ui-icon-person',secondary:'ui-icon-triangle-1-s'} });
$( ".options-button" ).button({ icons: {primary:'ui-icon-gear'} });
});
// Add comment...
$("#comment, .comment").click(function(){
$('#comment').focus().select();
$("#form").dialog({buttons: commentButtons});
$( ".post-comment-button" ).button({ icons: {primary:'ui-icon-comment'} });
$( ".clear-button" ).button({ icons: {primary:'ui-icon-refresh'} });
}); //Add comment
// Bind back the Invite, Options buttons
$(".files, .email, .event, .map").click(function(){
$("#form").dialog({buttons: mainButtons});
$( ".invite-button" ).button({ icons: {primary:'ui-icon-person',secondary:'ui-icon-triangle-1-s'} });
$( ".options-button" ).button({ icons: {primary:'ui-icon-gear'} });
});
// Tabs
$( "#tabs" ).tabs();
$( ".tabs-bottom .ui-tabs-nav, .ui-tabs-nav > *" )
.removeClass( "ui-widget-header" )
.addClass( "ui-corner-bottom" );
});
?
What is the right way to add the button icons? As in my code I had to add it two times, once:
$( "#user-form" )
.button()
.click(function() {
$(this).effect("transfer",{ to: $("#form") }, 1500);
$( "#form" ).dialog( "open" );
...
and
$(".files, .email, .event, .map").click(function(){ ...
Could this code be improved further? I don't seem to be able to get the "transfer" effect to work correctly in a modal. I added:
, close: function() { $(this).effect("transfer",{ to: $("#user-form") }, 1500); }
to the $( "#form" ).dialog({
How would you go about in getting the "transfer" to work nicely when you open and close the dialog box?
