وحید نصیری وحید نصیری
نظرات مطالب
جایگزین کردن jQuery با JavaScript خالص - قسمت دوم - کار با Attributes
یک نکته‌ی تکمیلی: انتساب اطلاعات به المان‌ها

استاندارد W3C HTML5، برای تعریف ویژگی‌های سفارشی، استفاده‌ی از ویژگی‌های -data را توصیه می‌کند.
  <table>
    <thead>
      <tr>
        <th>Address</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Address 1</td>
        <td>10,000,000</td>
      </tr>
      <tr>
        <td>Address 2</td>
        <td>100,000</td>
      </tr>
    </tbody>
  </table>
برای مثال جدول فوق را درنظر بگیرید. در برنامه‌های کاربردی گاهی از اوقات نیاز است تا بتوان ردیفی را از بانک اطلاعاتی حذف کرد. در این حالت می‌توان به هر tr یک ویژگی data-original-idx را نیز نسبت داد تا مشخص باشد id واقعی آن کدام است و سپس بر اساس آن عدد، کار حذف را انجام داد و یا روش استانداردی برای تعریف آدرس تصویری در حالت بزرگنمایی آن وجود ندارد. برای اینکار می‌توان این اطلاعات سفارشی را برای مثال توسط ویژگی فرضی data-zoom-url به آن انتساب داد:
<img src="default.png"
   data-zoom-url="default-zoomed.png"
   alt="default image">


خواندن و به روز رسانی ویژگی‌های -data توسط jQuery 

 <video src="my-video.mp4" data-scene-offsets="9,22,38">
در این مثال می‌خواهیم مقدار ویژگی سفارشی data-scene-offsets را توسط jQuery بخوانیم:
  var offsets = $('VIDEO').data('sceneOffsets');
در اینجا از متد data و نام پس از -data به صورت camel-case استفاده می‌شود.
روش به روز رسانی آن نیز به صورت زیر است:
 $('VIDEO').data('sceneOffsets', '1,2,3');
البته باید دقت داشت زمانیکه از این روش استفاده می‌شود، مقدار ویژگی data-scene-offsets در document تغییری نمی‌کند. بلکه جی‌کوئری آن‌را در یک JavaScript data store ذخیره خواهد کرد. در این حالت تعریف المان در صفحه با اطلاعات جدید آن هماهنگ نیست و همچنین این تغییرات را صرفا از طریق jQuery می‌توان خواند.


خواندن و به روز رسانی ویژگی‌های -data توسط جاوا اسکریپت خالص

در مطلب جاری، روش خواندن اطلاعات از ویژگی‌ها را بررسی کردیم. در اینجا نیز می‌توان همانند قبل عمل کرد:
 var offsets = document.getElementsByTagName('VIDEO')[0].getAttribute('data-scene-offsets');
و برای تغییر آن از متد استاندارد setAttribute کمک می‌گیریم:
 document.getElementsByTagName('VIDEO')[0].setAttribute('data-scene-offsets', '1,2,3');
مزیت این روش نسبت به متد data جی‌کوئری این است که در این حالت تعریف المان در صفحه همواره با داده‌های تغییر یافته‌ی آن هماهنگ خواهد بود و همچنین داده‌های تغییر یافته‌ی در اینجا توسط هر نوع کد جاوا اسکریپتی قابل دسترسی است.


کار با داده‌های انتساب داده شده‌ی به المان‌ها از طریق ویژگی‌های جدید ECMAScript 2015

در استاندارد ECMAScript 2015، به اینترفیس HTMLElement، خاصیت جدید dataset نیز اضافه شده‌است؛ از نوع DOMStringMap، که آن نیز جزئی از استاندارد HTML 5 است. هر خاصیتی که به dataset اضافه شود، به صورت یک ویژگی -data در آن المان ظاهر خواهد شد.
در این حالت برای خواندن ویژگی data-scene-offsets می‌توان به صورت زیر عمل کرد:
 var offsets = document.querySelector('VIDEO').dataset.sceneOffsets;
که در اینجا نیز همانند متد data جی‌کوئری باید نام ویژگی را camel-case ذکر کرد.
و اینبار روش به روز رسانی اطلاعات این ویژگی سفارشی به صورت زیر است:
 document.querySelector('VIDEO').dataset.sceneOffsets = '1,2,3';
همچنین چون dataset یک خاصیت جاوا اسکریپتی است، حذف اطلاعات از آن، مانند حذف هر خاصیت دیگر جاوا اسکریپتی است:
 delete document.querySelector('VIDEO').dataset.sceneOffsets;
‫۶ سال و ۲ ماه قبل، دوشنبه ۱۵ مرداد ۱۳۹۷، ساعت ۱۳:۲۵
س محمدرضا برنتی س محمدرضا برنتی
اشتراک‌ها
پلاگین jquery-svg

استفاده از تگ Object یکی از بهترین روش‌ها برای بارگذاری تصاویر svg در صفحات HTML هست  و پلاگین jquery-svg ، پلاگینی کم حجم برای اعمال استایل‌های css و اسکریپت‌های jquery به فایل SVG بارگذاری شده توسط تگ Object است.

پلاگین jquery-svg
‫۸ سال و ۷ ماه قبل، شنبه ۲۹ اسفند ۱۳۹۴، ساعت ۰۴:۲۹
مهدی سعیدی فر مهدی سعیدی فر
مطالب
افزونه rtlColResizable جهت تغییر سایز ستون‌های جدول‌های راست به چپ HTML
برای تغییر سایز ستون‌های جداول HTML با استفاده از ماوس، افزونه‌های زیادی تدارک دیده شده است که از جمله مطرح‌ترین آن‌ها می‌توان به colResizable اشاره کرد. حتی اگر از DataGrid‌های مطرح وب هم استفاده کرده باشید، اکثر آن‌ها از تغییر سایز ستون‌ها توسط کاربر پشتیبانی می‌کنند. اما مشکل بزرگی که در همه‌ی آن‌ها مشترک است  این است که فقط از چیدمان‌های چپ به راست پشتیبانی می‌کنند و به محض اینکه شما ساختار راست به چپ را به جدول مورد نظر اعمال کنید، عملکرد تغییر سایز ستون‌ها با اشکال مواجه می‌شود.
به همین جهت برای تغییر سایز ستون‌ها توسط کاربر، افزونه ای برای jQuery تدارک دیدم که با جداول معمول HTML که همان table‌ها هستند سازگار است و به راحتی به هر جدولی می‌توان آن را اعمال کرد.
 
کدهای افزونه‌ی rtlColResizable: 
(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);
 
نحوه‌ی استفاده:
این افزونه با تگ Table در HTML سازگار است. فقط تنها موردی که باید رعایت شود این است که در هنگام تعریف ساختار جدول، باید استاندارد تعریف ستون‌ها یا همان Header‌ها را رعایت کنید و از تگ‌های thead و th استفاده کنید.
نمونه ای از نحوه‌ی استفاده از آن را در کدهای زیر می‌بینید:
<!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>
     
دریافت نمونه کدی از نحوه‌ی استفاده از این افزونه
 
‫۱۰ سال و ۴ ماه قبل، جمعه ۲۰ تیر ۱۳۹۳، ساعت ۱۵:۳۵
وحید نصیری وحید نصیری
مطالب
لینک‌های هفته‌ی آخر اسفند

وبلاگ‌ها ، سایت‌ها و مقالات ایرانی (داخل و خارج از ایران)

امنیت

Visual Studio

ASP. Net

طراحی و توسعه وب

PHP

اس‌کیوال سرور

سی شارپ

VB

عمومی دات نت

جاوا

ویندوز

مسایل اجتماعی و انسانی برنامه نویسی

SVN

متفرقه

‫۱۵ سال و ۹ ماه قبل، پنجشنبه ۲۲ اسفند ۱۳۸۷، ساعت ۰۴:۰۳
وحید نصیری وحید نصیری
مطالب
نمایش ای‌جکسی یک partial view در popover بوت استرپ 3
فرض کنید بخواهیم نمایش رای دهنده‌های یک مطلب را با popover بوت استرپ 3 نمایش دهیم:

Popover بوت استرپ برای کار با منابع remote طراحی نشده‌است و نیاز است توابع API آن‌را به همراه jQuery Ajax ترکیب کرد تا به تصویر فوق رسید.


مرحله‌ی اول: اکشن متدی که یک partial view را باز می‌گرداند

فرض کنید اکشن متدی که لیست کاربران رای داده‌ی به یک مطلب را باز می‌گرداند، چنین شکلی را دارد:
        public ActionResult RenderResults(string param1)
        {
            var users = new[]
            {
                new User{ Id = 1, Name = "Test 1", Rating = 3},
                new User{ Id = 2, Name = "Test 2", Rating = 4},
                new User{ Id = 3, Name = "Test 3", Rating = 5}
            };
            return PartialView("_RenderResults", model: users);
        }
در اینجا لیستی دریافت و سپس به partial view ارسال می‌شود. در ادامه این Partial view نیز به صورت ذیل اطلاعات را رندر می‌کند:
@using RemotePopOver.Models
@model IList<User>

<ul id="ratings1" data-title="Ratings" class="list-unstyled">
    @foreach (var user in Model)
    {
        <li>
            @user.Name
            <span class="badge pull-right">@user.Rating</span>
        </li>
    }
</ul>
در اینجا از یک ویژگی سفارشی data-* به نام data-title نیز استفاده کرده‌ایم. متنی که در آن قرار می‌گیرد، به صورت عنوان popover ظاهر خواهد شد.


مرحله‌ی دوم: دریافت اطلاعات partial view با استفاده از jQuery Ajax و سپس درج آن در یک popover

می‌خواهیم با حرکت ماوس بر روی دکمه‌ی سفارشی ذیل، یک popover ظاهر شده و محتوای خودش را از اکشن متد فوق تامین کند.
<span id="remotePopover1"
      aria-hidden="true"
      data-param1="test"
      data-popover-content-url="@Url.Action("RenderResults", "Home")"
      class="glyphicon glyphicon-info-sign btn btn-info"></span>
در این مثال، چند ویژگی سفارشی data-* دیگر را نیز تعریف کرده‌ایم تا نیازی به تعریف سراسری متغیرهای جاوا اسکریپتی نباشد. برای مثال data-param1 یک پارامتر دلخواه است و data-popover-content-url به آدرس اکشن متدی اشاره می‌کند که قرار است partial view مدنظر را رندر کند.
در ادامه نحوه‌ی استفاده‌ی از این ویژگی‌ها را در jQuery Ajax مشاهده می‌کنید:
@section Scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $('body').on('mouseenter', 'span[data-popover-content-url]', function () {
                var el = $(this);
                $.ajax({
                    type: "POST",
                    url: $(this).data("popover-content-url"),
                    data: JSON.stringify({ param1: $(this).data("param1") }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    // controller is returning a simple text, not json
                    complete: function (xhr, status) {
                        var data = xhr.responseText;
                        if (status === 'error' || !data) {
                            el.popover({
                                content: 'Error connecting server!',
                                trigger: 'focus',
                                html: true,
                                container: 'body',
                                placement: 'auto',
                                title: 'Error!'
                            }).popover('show');
                        }
                        else {
                            el.popover({
                                content: data,
                                trigger: 'focus',
                                html: true,
                                container: 'body',
                                placement: 'auto',
                                title: $('<html />').html(data).find('#ratings1:first').data('title')
                            }).popover('show');
                        }
                    }
                });
            }).on('mouseleave', 'span[data-popover-content-url]', function () {
                $(this).popover('hide');
            });
        });
    </script>
}
در این مثال تمام المان‌هایی که دارای data-popover-content-url هستند، تحت نظر قرار می‌گیرند. سپس اگر ماوس به محدوده‌ی آن‌ها وارد شد، مقدار ("this).data("popover-content-url)$ مساوی آدرسی است که قرار است اطلاعات را از سرور دریافت کند. به همین جهت از آن برای استفاده‌ی در متد ajax کمک گرفته شده‌است.
خروجی partial view به صورت json نیست. بنابراین باید اطلاعات نهایی آن‌را در callback ویژه‌ی complete دریافت کرد. مقدار data دریافتی، معادل اطلاعات رندر شده‌ی partial view است. به همین جهت آن‌را به خاصیت content متد popver ارسال می‌کنیم. همچنین چون خروجی patrtial view به همراه html است، نیاز است خاصیت html متد popover نیز به true تنظیم شود. در خاصیت title، نحوه‌ی دسترسی به مقدار data-title تنظیم شده‌ی در partial view را مشاهده می‌کنید.


کدهای کامل این مثال را از اینجا می‌توانید دریافت کنید:
RemotePopOver.zip
‫۸ سال و ۷ ماه قبل، دوشنبه ۱۷ اسفند ۱۳۹۴، ساعت ۰۳:۰۰
محسن درپرستی محسن درپرستی
بازخوردهای دوره
ارائه کاربری ساده‌تر انتخاب چندین آیتم از یک لیست به کمک افزونه TagIt در ASP.NET MVC
بسیار عالی .
بعد از خوندن مطلب ، اول فکر کردم که استفاده از jQuery UI ضروری نیست و فقط در صورتی که بخوایم امکان autoComplete رو فعال کنیم باید رفرنسی به اون بدیم اما بعد از حذف کردن متوجه شدم که اینطور نیست و کلا این plugin هم به jQuery و هم به jQuery UI وابسته است و بدون UI کار نمی‌کنه .


‫۱۱ سال و ۷ ماه قبل، سه‌شنبه ۱۳ فروردین ۱۳۹۲، ساعت ۱۵:۳۶
وحید نصیری وحید نصیری
مطالب
لینک‌های هفته سوم دی

وبلاگ‌ها ، سایت‌ها و مقالات ایرانی (داخل و خارج از ایران)

ASP. Net

  • ویدیویی درباره‌ی ASP.Net 4 (بهبودهای حاصل شده در web forms از جهت کار با اسکریپت‌ها خصوصا با تاکید بر jQuery و همچنین ذکر اینکه با آمدن ASP.Net MVC ، وب فرم‌ها کهنه نشده‌ و همچنان توسعه و بهبود داده خواهند شد)، یا مقاله‌ای در این مورد

طراحی و توسعه وب

PHP

اس‌کیوال سرور

سی شارپ

عمومی دات نت

مسایل اجتماعی و انسانی برنامه نویسی

متفرقه

‫۱۵ سال و ۱۱ ماه قبل، پنجشنبه ۱۹ دی ۱۳۸۷، ساعت ۰۳:۴۹