Tip dialog jQuery plugin

Question

How would you write this jQuery code cleaner and better? I'm a beginner.

$.extend({
misTip : function($tipSettings) {
 $tip = $tipSettings.tip ? $tipSettings.tip : '';
 $closeTime = $tipSettings.closeTime ? $tipSettings.closeTime : 1500;
 $refresh = $tipSettings.refresh;
 delete $tipSettings.msg;
 delete $tipSettings.closeTime;
 delete $tipSettings.refresh;
 //dialog ui tip
 var tpl = '';
 tpl += '<div style="padding:5px 20px">';
 tpl += '<p style="font-size:14px;padding-top:10px;"><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><span class="ajaxMsg">' + $tip + '</span></p>';
 tpl += '</div>';
 var $defaultTipSettings = {
 title : 'notice',
 slow : 'slide',
 width : 320,
 open : function (event, ui) {
 $(this).bind("keypress",function(event){
 $(this).dialog('close');
 });
 $dialog = $(this);
 setTimeout(function(){
 $dialog.dialog('close');
 if ($refresh) {
 _refresh();
 }
 }, $closeTime);
 }
 }
 var $tipSettings = $.extend($defaultTipSettings, $tipSettings);
 $(tpl).dialog($tipSettings);
}
});

Answer 1

You are using several global variables in the code, which should be local.

You are prefixing variable names with $ for no apparent reason, that only makes the code harder to read.

You can use the || operator instead of the conditional operator to check for missing values.

You are using the variable _refresh in the code, I assume that it should be the variable that you defined instead.

$.extend({
 misTip : function(tipSettings) {
 var tip = tipSettings.tip || '';
 var closeTime = tipSettings.closeTime || 1500;
 var refresh = tipSettings.refresh;
 delete tipSettings.msg;
 delete tipSettings.closeTime;
 delete tipSettings.refresh;
 //dialog ui tip
 var tpl =
 '<div style="padding:5px 20px">' +
 '<p style="font-size:14px;padding-top:10px;"><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><span class="ajaxMsg">' + tip + '</span></p>' +
 '</div>';
 var defaultTipSettings = {
 title : 'notice',
 slow : 'slide',
 width : 320,
 open : function (event, ui) {
 $(this).bind("keypress",function(){
 $(this).dialog('close');
 });
 var dialog = $(this);
 setTimeout(function(){
 dialog.dialog('close');
 if (refresh) {
 refresh();
 }
 }, closeTime);
 }
 }
 var settings = $.extend(defaultTipSettings, tipSettings);
 $(tpl).dialog(settings);
 }
});