[英]Vertical text inside table headers using a JavaScript-based SVG library
我使用jqGrid包含許多包含布爾信息的列,這些列在表格中顯示為復選框(請參閱http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm作為示例)。 為了更緊湊地顯示信息,我使用垂直列標題。 它運行良好,適用於所有瀏覽器的jqGrid(請參閱我在jqGrid論壇中與Tony Tomov的討論http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/ ),但在IE中垂直文字模糊,看起來不夠好(打開IE上面的鏈接,你會看到我的意思)。 我被問到用戶為什么文本顯示得如此奇怪。 所以我正在考慮使用基於JavaScript的SVG庫,如SVG Web ( http://code.google.com/p/svgweb/ )或Raphaël ( http://raphaeljs.com/ )。 SVG非常強大,很難找到一個好的例子。 我只需要顯示垂直文本(-90 grad,自下而上)並盡可能使用而無需在絕對定位模式下工作。
所以再一次我的問題:我需要有可能在表頭的<td>
元素內顯示垂直文本( -90 grad rotation )。 我想使用基於JavaScript的SVG庫,如SVG Web或Raphaël 。 解決方案必須支持IE6 。 有沒有人有一個很好的參考例子可以幫助我做到這一點? 如果有人發布了問題的完整解決方案,我會很高興。
確切地說,這是我目前的解決方案:我定義
.rotate
{
-webkit-transform: rotate(-90deg); /* Safari 3.1+, Chrome */
-moz-transform: rotate(-90deg); /* Firefox 3.5+ */
-o-transform: rotate(-90deg); /* Opera starting with 10.50 */
/* Internet Explorer: */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */;
}
定義RotateCheckboxColumnHeaders
函數
var RotateCheckboxColumnHeaders = function (grid, headerHeight) {
// we use grid as context (if one have more as one table on tnhe page)
var trHead = $("thead:first tr", grid.hdiv);
var cm = grid.getGridParam("colModel");
$("thead:first tr th").height(headerHeight);
headerHeight = $("thead:first tr th").height();
for (var iCol = 0; iCol < cm.length; iCol++) {
var cmi = cm[iCol];
if (cmi.formatter === 'checkbox') {
// we must set width of column header div BEFOR adding class "rotate" to
// prevent text cutting based on the current column width
var headDiv = $("th:eq(" + iCol + ") div", trHead);
headDiv.width(headerHeight).addClass("rotate");
if (!$.browser.msie) {
if ($.browser.mozilla) {
headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7);
}
else {
headDiv.css("left", (cmi.width - headerHeight) / 2);
}
}
else {
var ieVer = jQuery.browser.version.substr(0, 3);
// Internet Explorer
if (ieVer !== "6.0" && ieVer !== "7.0") {
headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2);
$("span", headDiv).css("left", 0);
}
else {
headDiv.css("left", 3);
}
}
}
}
};
並包括一個像RotateCheckboxColumnHeaders(grid, 110);
類的調用RotateCheckboxColumnHeaders(grid, 110);
創建jqGrid后。
這是一個有效的jsfiddle。 它應該在IE 6中工作,我只使用jquery和raphael js。 我為raphael繪圖區域和文本制作了靜態大小,但你可以做一些數學計算動態大小:
如果你包含jquery和raphael,代碼看起來像這樣:
$(document).ready(function(){
var font = {font: '12px Helvetica, Arial'};
var fill = {fill: "hsb(120deg, .5, 1)"}
$('tr th div').each(function (index, div){
R = Raphael($(div).attr('id'), 20, 100);
R.text(4, 50, $(div).find('span').text())
.attr(font)
.attr(fill)
.rotate(-90, true);
$(div).find('span').hide();
});
});
HTML看起來像這樣:
<table>
<thead>
<tr>
<th><div id="columnOne"><span>heading one</span></div></th>
<th><div id="columnTwo"><span>heading two</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
哦,我用這個作為我的例子: http : //raphaeljs.com/text-rotation.html
Canvas文本轉換示例
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../canvas.text.js"></script>
<script type="text/javascript" src="../faces/dejavu_sans-normal-normal.js"></script>
<script type="text/javascript" src="../faces/dejavu_sans-bold-normal.js"></script>
</head>
<body>
<canvas width="500" height="300" id="test-canvas" style="font-size: 16px;"></canvas>
<script type="text/javascript">
function initCanvas(canvas) {
if (window.G_vmlCanvasManager && window.attachEvent && !window.opera) {
canvas = window.G_vmlCanvasManager.initElement(canvas);
}
return canvas;
}
window.onload = function() {
var canvas = initCanvas(document.getElementById("test-canvas")),
ctx = canvas.getContext('2d');
ctx.strokeStyle = "rgba(255,0,0,1)";
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.lineWidth = 1;
ctx.font = "20pt Verdana, sans-serif";
ctx.strokeStyle = "#000";
ctx.rotate(Math.PI / 2);
ctx.fillText('Vertical', 0, 0);
ctx.restore();
}
</script>
</body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.