افزونه rtlColResizable جهت تغییر سایز ستونهای جدولهای راست به چپ HTML
نویسنده: مهدی سعیدی فر
تاریخ: ۱۳۹۳/۰۴/۲۰ ۱۱:۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
(function ($, undefined) {
$.fn.extend({
'rtlColResizable': function (options) {
var defaults = {
//Default values for the plugin's options here
};
options = $.extend(defaults, options);
var isMouseButtonPressed;
var $resizingElement = undefined;
var resizingElementStartWidth;
var mouseCursorStartX;
var isCursorInResizingPosition;
var addResizingCursorStyle = function ($element) {
$element.css({
'cursor': 'col-resize',
'user-select': 'none',
'-o-user-select': 'none',
'-ms-user-select': 'none',
'-moz-user-select': 'none',
'-khtml-user-select': 'none',
'-webkit-user-select': 'none',
});
};
var removeResizingCursorStyle = function ($element) {
$element.css({
'cursor': 'default',
'user-select': 'text',
'-o-user-select': 'text',
'-ms-user-select': 'text',
'-moz-user-select': 'text',
'-khtml-user-select': 'text',
'-webkit-user-select': 'text',
});
};
var canResize = function (e) {
return (e.offsetX || e.clientX - $(e.target).offset().left) < 10;
};
return this.each(function () {
var opts = options;
var tableColumns = $(this).find('th');
tableColumns.filter(':not(:last-child)').mousedown(function (e) {
$resizingElement = $(this);
isMouseButtonPressed = true;
mouseCursorStartX = e.pageX;
resizingElementStartWidth = $resizingElement.width();
});
tableColumns.mousemove(function (e) {
if (canResize(e)) {
addResizingCursorStyle($(e.target));
isCursorInResizingPosition = true;
} else if (!isMouseButtonPressed) {
removeResizingCursorStyle($(e.target));
isCursorInResizingPosition = false;
}
if (isCursorInResizingPosition && isMouseButtonPressed) {
$resizingElement.width(resizingElementStartWidth + (mouseCursorStartX - e.pageX));
}
});
$(document).mouseup(function () {
if (isMouseButtonPressed) {
removeResizingCursorStyle($resizingElement);
isMouseButtonPressed = false;
}
});
});
}
});
})(jQuery); <!DOCTYPE html>
<html>
<head>
<title>rtlColResizable Sample</title>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>ستون1</th> <!-- نام ستونها را حتما در این تگ باید تعریف کنید -->
<th>ستون2</th>
<th>ستون3</th>
</tr>
</thead>
<tr>
<td>داده مربوط به ستون 1</td>
<td>داده مربوط به ستون 2 </td>
<td>داده مربوط به ستون 3</td>
</tr>
</table>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.rtlColResizable.js"></script>
<script>
$('table#myTable').rtlColResizable();
</script>
</body>
</html>