将标题栏文本放在 jqGrid 中居中，同时保持打开/关闭按钮的位置？

发布于 2024-09-06 00:42:14 字数 556 浏览 5 评论 0原文

我想将标题栏文本放在 jqGrid 上居中，而不弄乱打开/关闭图像。但我只能让文本和打开/关闭按钮图像居中。我将不胜感激有关如何使文本居中同时保持锚图像定位的一些提示。

这是 Chrome 的检查器显示的标记：

<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>

谢谢

原文

I would like to center the titlebar text on a jqGrid without messing up the open/close image. But I've only been able to get both the text and open/close button-image centered. I would be grateful for some tips on how to get the text centered while keeping the anchor-image positioned.

Here's the markup that Chrome's Inspector shows:

<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>

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鱼窥荷 2024-09-13 00:42:14

尝试使用以下方法

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方法继续工作； 2）如果页面上有多个jqGrid，则可以正确工作：

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”是网格的元素的id。 jqGrid (jQuery("#list")[0]) 的 DOM 元素通过 grid 属性进行扩展，该属性具有三个重要 jqGrid 组件 (>cDiv - 标题，hDiv - 表格标题和 bDiv - 表格主体）。我们使用.grid.cDiv以最快速的方式获取标题（网格标题）的DOM元素。然后我们给出标题的 span 元素并覆盖 "ui-jqgrid-title" 类的 "float: left" 样式，这可能是让你成为最大的问题。最后我们将父 div 元素的附加样式设置为 "text-align: center" 来完成所有工作。

Try with following

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

or with

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

UPDATED: I should a little fix my solution to 1) allow setCaption method continue working; 2) to work correct if one have more as one jqGrid on a page:

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

In the code "list" is the id of <table> element of the grid. DOM element of jqGrid (jQuery("#list")[0]) is expanded with grid property which has as a properties DOM elements of three important jqGrid components (cDiv - caption, hDiv - table headers and bDiv - table body). We use .grid.cDiv to get DOM element of the caption (grid header) in the most quick way. Then we give a span element of the caption and overwrite "float: left" style of the "ui-jqgrid-title" class which probably made you the most problem. At the end we set additional style of the parent div element to "text-align: center" to finish all work.