自定义Google图表列过滤器

问题描述：

我一直在试图弄清楚如何自定义列过滤器与我自己的风格，但由于某种原因，谷歌已决定把呈现的HTML放在身体标签的底部，在换句话说：来自列过滤器的菜单连接到body标签底部的控件本身之外的DOM。他们为什么决定把它放在那里？这让我有些沮丧，因为这迫使我在每一个新的CSS规则后都放了很多!important;。自定义Google图表列过滤器

我也读过关于它的Google Docs如何调用ui.cssClass，但这并没有帮助我一点。有没有其他人设法解决这个问题？是否有可能为此创建自己的标记？

例子here你可以看到我的观点。

我会在下面放一些我的代码，这样你就可以清楚地知道这里发生了什么。

的JavaScript：

var columnFilterOptions = { 
    filterColumnLabel: 'colLabel', 
    ui: { 
     caption: "Compare", 
     label: false, 
     allowTyping: false, 
     allowMultiple: true, 
     allowNone: false, 
     selectedValuesLayout: 'below' 
    } 
};

HTML：

<div class="colFilter_div"></div>

CSS/LESS：

.charts-menu-button-disabled { 
    background: @grayLighter !important; 
    opacity: 0.5 !important; 
} 

.charts-menu-button-outer-box { 
    width: 100%; 
    border: 0 !important; 
} 

.charts-menu-button { 
    background: @grayLighter !important; 
    margin: 0 !important; 
    margin-bottom: @smallGutter !important; 
} 

.charts-menu-button-open { 
    background: @blueLight !important; 
} 

.charts-menu-button, 
.charts-menu-button-inner-box { 
    color: @grayDark !important; 
    width: 100%; 
    line-height: 55px; 
    border: 0 !important; 
    padding: 0 !important; 
} 

.charts-menu-button:before, 
.charts-menu-button-inner-box:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 60px; 
    height: 55px; 
    overflow: hidden; 
    background: @grayLight; 
    text-align: center; 
} 

.charts-menu-button-open:focus:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 17px; 
    right: 27px; 
    background: url(../../content/images/sprites.png); 
    width: 7px; 
    height: 19px; 
    background-position: -31px -90px; 
} 

.charts-menu-button:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 17px; 
    right: 27px; 
    background: url(../../content/images/sprites.png); 
    width: 7px; 
    height: 19px; 
    background-position: -16px -110px; 
} 

.charts-menu-button-caption { 
    .proxima-nova(); 
    padding-left: @smallGutter !important; 
    font-size: 1.1em; 
} 

.charts-menu-button-dropdown { 
    background: none !important; 
} 

.charts-menu, 
.charts-menu-vertical { 
    overflow: auto; 
    width: auto !important; 
    min-width: 11.19% !important; 
    margin: 0; 
    border: 0 !important; 
    background: @grayLighter !important; 
    border-top: 2px solid @green !important; 
    padding-right: @smallGutter !important; 
} 

.charts-menuitem-content { 
    width: 100%; 
    color: @grayDark !important; 
    .proxima-nova() !important; 
    font-size: 16px !important; 
    padding: 10px 0; 
    display: block; 
    border-top: 2px solid transparent; 
} 

.charts-menuitem-content:hover { 
    color: @blue !important; 
    border-top: 2px solid @blue; 
} 

.charts-menuitem-highlight { 
    background: none !important; 
    border: 0 !important; 
    border-width: 0 !important; 
    padding: 4px 0 4px 28px !important; 
} 
li.charts-container-horizontal { 
    padding: 10px !important; 
    border: 0 !important; 
    border-radius: 0 !important; 
    background: @grayLighter !important; 
    .charts-link-button { 
     .proxima-nova() !important; 
     font-size: 1.1em !important; 
     color: @grayDark !important; 
    } 
    .charts-control { 
     .proxima-nova(); 
    } 
}

你可以请创建jsfiddle？所以我可以修复它。 – 2014-12-01 16:47:33

@ManjunathSiddappa我做了，这是在问题！ – maverick 2014-12-02 08:08:08

答

您可以使用在ControlWrapper选项ui.cssClass，但你需要调用jQuery和像这样嵌入它：

$(".columnFilter_class .charts-menu-button-caption").css({"color":"red"});

这样做对我有用。

自定义Google图表列过滤器

相关推荐