爲什麼我的無文字jquery UI按鈕不是方形的？

我做一個jQuery的UI中的以下主題fullCalendar：爲什麼我的無文字jquery UI按鈕不是方形的？

var overlay = $('<div />'); 
    overlay.addClass(event.status); 
    if(overlay.hasClass('pending')) { 
     primaryIcon = 'ui-icon-check'; 
    } else { 
     primaryIcon = 'ui-icon-cancel'; 
    } 
    overlay.button({ icons: { 
     primary: primaryIcon }, 
     text:false 
    }); 

    overlay.css({ 
    'cursor': 'pointer', 
    'float': 'right' 

    });

但我的按鈕看起來像這樣 - http://cl.ly/2H1j3Z3i3G34271O2E2w

我也試過這樣做沒有按鈕和設置」的.ui狀態默認.ui-icon「，但沒有顯示背景。任何人都知道可能會造成這種情況？

我想按鈕是方形像第一個圖標here：

來源

2011-08-23 codecowboy

您可能需要基本的CSS，http://jqueryui.com/themes/base/jquery.ui.button。 css – Matt

謝謝，我試過了 - 沒有任何區別。 – codecowboy

我不能說，這是一個真正的CSS問題，很可能不是一個jQuery的問題。 jquery使用css來處理所有的主題，所以如果你遺漏了一些東西，那麼它看起來不太合適，但是javascript仍然可以工作，儘管它看起來不像它。 – Matt

我想你只需要添加一個另外的風格，width:auto：

overlay.css({ 
    'cursor': 'pointer', 
    'float': 'right', 
    'width': 'auto' 
});

見例如：http://jsfiddle.net/william/Lu3GS/1/。

看着你的代碼，你並不需要那些實際的按鈕。如果是這種情況，您可以考慮使用內聯圖標：http://jsfiddle.net/2U5TN/1/。

來源

2011-08-24 12:05:21

我最終將按鈕的寬度和高度設置爲相等，並且我還將字體大小設置爲零（以使圖標圖像位於按鈕的中心）。 CSS代碼是：

#your_button_id { 
    position: relative; 
    font-size: 0; 
    width: 23px; 
    height: 23px; 
}

你的情況，那就是：

overlay.css({ 
    'cursor': 'pointer', 
    'float': 'right', 
    'width': '23px', 
    'height': '23px', 
    'font-size': '0' 
});

來源

2015-09-01 19:18:25

爲什麼我的無文字jquery UI按鈕不是方形的？

回答

相關問題