2012-04-20 18 views
3

我目前在我的應用程序中使用了REDMOND主題,並且只需要將THEMEROLLER主題用於qtip2工具提示。由於我已經將工具提示定義爲小部件,因此應該使用它們。我不能決定如何在我的JavaScript文件中添加themeroller css文件。在qtip2中使用themeroller主題

請幫忙。

在頭部分的CSS文件是:

<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.19.custom.css" /> 
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.min.css" /> 
<link rel="stylesheet" type="text/css" href="css/wms11.css" /> 

在我的js文件的末尾JavaScript文件是:

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script> 
<script src="js/jquery.qtip.min.js" type="text/javascript"></script> 
<script src="js/wms11.js" type="text/javascript"></script> 

我qtip2聲明:

$(this).qtip({ 
    content: { 
    text: function(api) { 
     return(return_array[POPUP_HTML_STR]); 
    }, 
    title: { 
     text: function(api) { 
      return(qtip_title); 
     } 
    } 
    }, 
    position: { 
    viewport: $(window) 
    }, 
    style: { 
    classes: 'ui-widget ui-tooltip-rounded ui-tooltip-shadow ui-tooltip-dark', 
    widget: true, 
    tip: 'top center', 
    width: 220, 
    height: 200, 
    padding: 5, 
    background: 'black', 
    textAlign: 'left', 
    border: { 
     width: 7, 
     radius: 5, 
     color: '#A2D959' 
    }, 
    tip: 'top center', 
    }, 
    show: { 
    ready: true 
    } 
}); 
+0

你解決了你的問題嗎?如果沒有,請給我提供更多信息,因爲我沒有得到你的問題:) – Neysor 2012-05-08 18:54:24

回答

2

如P6345uk所述,您應該設置style.def = false以刪除qTip2的任何自定義樣式。爲我工作。

$('.selector').qtip({ 
    content: 'I won\'t be styled by the pages Themeroller styles', 
    style: { 
     widget: true, // Use the jQuery UI widget classes 
     def: false // Remove the default styling (usually a good idea, see below) 
    } 
})