代码之家 › 专栏 › 技术社区 › Tim

在jqGrid中居中标题栏文本,同时保持打开/关闭按钮的位置?

titlebar jqgrid jquery

1

Tim · 技术社区 · 16 年前

二者都 文本和打开/关闭按钮图像居中。如果你能给我一些提示,我将不胜感激在保持主播形象的同时 .

以下是Chrome Inspector显示的标记:

<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
   <a role="link" href="javascript:void(0)"
      class="ui-jqgrid-titlebar-close HeaderButton" style="right: 0px;">       
       <span class="ui-icon ui-icon-circle-triangle-n"></span>
   </a>
   <span class="ui-jqgrid-title">Titles</span>
 </div>

1 回复 | 直到 16 年前

1

3

Oleg 16 年前

尝试以下内容

jQuery(".ui-jqgrid-title").replaceWith('<div style="text-align: center;"><span>' +
        jQuery(".ui-jqgrid-title").text() + '</span></div>');

或与

jQuery(".ui-jqgrid-title").replaceWith(
    '<div style="text-align: center; padding: .3em .2em .2em .3em;"><span>' +
    jQuery(".ui-jqgrid-title").text() + '</span></div>');

:我应该稍微修改一下我的解决方案,使其1)允许 setCaption

var captionDiv = jQuery("#list")[0].grid.cDiv;
var titleSpan = jQuery(".ui-jqgrid-title",captionDiv);
titleSpan.css ("float", "none");
titleSpan.parent().css ("text-align", "center");

在代码“list”中是 <table> jQuery("#list")[0] )扩展为 grid cDiv -标题, hDiv -表格标题和 bDiv -表体)。我们使用 .grid.cDiv 以最快速的方式获取标题(网格标题)的DOM元素。然后我们给一个 span "float: left" 设计风格 "ui-jqgrid-title" 这可能是你遇到的最大问题。最后我们设置了父级的附加样式 div 元素到 "text-align: center" 完成所有的工作。