Response title
This is preview!
jquery buttons icons for dialog
in Using jQuery UI
•
8 years ago
i have this code, http://jsfiddle.net/eDqvw/
- $(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?
any advice much appreciated.
1