پویا امینی پویا امینی
مطالب
jQuery Tips #1
چگونگی تغییر سایز فونت  صفحه با استفاده از jQuery

کد زیر را در نظر بگیرید
 $(function () {
            // اندازه واقعی فونت
            var originalFontSize = $('#test').css('font-size');
            $(".resetFont").click(function () {
                $('#test').css('font-size', originalFontSize);
            });
            // افزایش اندازه فونت
            $(".increaseFont").click(function () {
                var currentFontSize = $('#test').css('font-size');
                var currentFontSizeNum = parseFloat(currentFontSize);
                var newFontSize = currentFontSizeNum + 5;
                $('#test').css('font-size', newFontSize);
                return false;
            });
            // کاهش اندازه فونت
            $(".decreaseFont").click(function () {
                var currentFontSize = $('#test').css('font-size');
                var currentFontSizeNum = parseFloat(currentFontSize);
                var newFontSize = currentFontSizeNum - 5;
                $('#test').css('font-size', newFontSize);
                return false;
            });
        });

  و کد HTML زیر را
 <div id="test">
        jQuery Tips By Mohsen Bahrzadeh
    </div>
    <a href="#">decreaseFont</a>
    <a href="#">Increase</a>
    <a href="#">resetFont</a>
 در این کد ابتدا اندازه فونت را درون متغیر originalFontSize ذخیره و سپس 3 متد تعریف کرده‌ایم، که اولین متد اندازه فونت را به اندازه فونت اولیه بر می‌گرداند و در متد دوم می‌خواهیم اندازه فونت تگی با ID=test را افزایش دهیم.
برای این کار ابتدا اندازه جاری تگ را گرفته و درون متغیر currentFontSize قرار داده سپس مقدار متغیر currentFontSize را به Float تبدیل کرده و 5 واحد به آن اضافه  کرده ایم و سپس عدد بدست آمده را به عنوان اندازه فونت جدید در نظر گرفته ایم. برای متد سوم دقیقاً همین اتفاق می‌افتد فقط به جای + از - استفاده شده است

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

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

ASP. Net

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

PHP

سی شارپ

عمومی دات نت

ویندوز
(ایکاش بجای تمام این‌کارها یک سیستم ساده‌تر توسعه‌ی پلاگین برای آن طراحی می‌کردند ... یا به عبارتی یکی از مهم‌ترین دلیل‌های اقبال مردم به فایرفاکس را به صورت بسیار کم رنگی دارد)


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

متفرقه
‫۱۵ سال و ۱۰ ماه قبل، پنجشنبه ۱۰ بهمن ۱۳۸۷، ساعت ۰۳:۴۵
احمد احمدی احمد احمدی
مطالب
آموزش فایرباگ - #8 - Script Panel
تب Script در FireBug مخصوص دیباگ کردن کدهای JavaScript است. امکاناتی که در این قسمت گنجانده شده بسیار کاربردی بوده و همچنین در بیشتر قسمت‌ها با ابزارهای خطایابی دیگر مشابه است. برای مثال اگر با Visual Studio کار کرده باشید، با نحوه‌ی ایجاد Break Point ، قسمت‌های Watch,Stack و ... آشنا خواهید بود.

این پنل هم مشابه پنل‌های دیگر فایرباگ دارای یک بخش با عنوان Options Menu هست که با راست کلیک کردن بروی عناون یا کلیک بروی مثلث کنار عنوان پنل قابل دسترسی است. تنظیماتی که در اینجا قابل تعیین است عبارتند از:


  • Enabled/Disabled : برای فعال/غیرفعال کردن پنل است. فعال بودن این قسمت ممکن است موجب کاهش سرعت بارگزاری صفحات شود.
  • Track Throw/Catch : در صورت فعال بودن این گزینه، در صورت رویدادن خطا در بلاک try/catch ، دیباگر در آن نقطه از برنامه متوقف شده و کنترل برنامه به شما داده می‌شود. (البته بنده موفق بررسی کامل این قابلیت نشدم. ظاهرا ورژن‌های آخری باگ دارند. مثل غیرفعال شدن کامل همین پنل، "Debugger not activated"! اگر کسی موفقیتی در کار با این مورد داشت، سپاسگذار میشوم اطلاع بدهد.)
  • Show Break Notifications : در صورت فعال بودن این گزینه، هنگام توقف کدی در صفحه، اطلاعاتی در مورد علت توقف آن در بالای پنل ارائه خواهد شد.
توجه داشته باشید که ممکن است در ورژن‌های مختلف، تعداد این گزینه‌ها بیشتر یا کمتر باشد.


 Panel Toolbar

نواری است که ابزارهای پنل بروی آن قرار دارند و به ترتیب عبارنتد از:
  • Break On Next : این دکمه که مشابه آن در اکثر پنل‌ها وجود دارد، هنگام اجرای یک دستور JavaScript آن را متوقف کرده و شما می‌توانید به بررسی آن بپردازید.
  • Script Type Menu : با انتخاب یکی از چهار گزینه موجود می‌توانید نتیجه اسکریپت‌های اضافه شده به صفحه که در قسمت Script Location Menu نمایش داده شده اند را فیلتر کنید. (متاسفانه این گزینه هم مشابه گزینه Track Throw/Catch برای بنده، ورژن 1.11.4 نتیجه ای نداشته است.)
  • Script Location Menu : در این قسمت اسکریپت هایی که در صفحه وجود دارند نمایش داده می‌شوند. مشابه پنل HTML می‌توانید هنگام بازبودن این لیست، با تایپ کردن نتایج را فیلتر کنید.
    همچنین با راست کلیک کردن بروی این قسمت می‌توانید آیتم یا فایل انتخاب شده را در ادیتور مورد نظر باز کنید، در پنل DOM بررسی کنید، فایل را در یک تب جدید باز کنید، آدرس فایل را در حافظه موقت کپی کنید.
  • Execution Control Buttons : این دکمه‌ها زمانی که دیباگر به یک Break Point برسد یا به دلیل فعال بودن دکمه‌های Break On ... متوقف شود، فعال می‌شوند و با کمک آن‌ها می‌توانید عملیات خطایابی را ادامه دهید.
    در جدول زیر این دکمه‌ها و توضیحات تکمیلی هریک را مشاهده می‌کنید:

     نوعدکمه
    		Shortcut
    		توضیحات
    اجرای مجدد

    		Shift + F18
    		Stack فعلی را مجدد اجرا می‌کند.
    (Stack: لیستی از توابع به ترتیبی که با فراخوانی آنها تابع جاری فراخونی شده است. در مقاله بعدی توضیحات بیشتری ارائه خواهد شد.)
    ادامه

    		F8
    		اجرای برنامه را (تا Break Point بعدی) ادامه می‌دهد.
    وارد شدن

    		F11
    		در صورت رسیدن به یک تابع، با زدن این دکمه دیباگر وارد بنده‌ی آن تابع می‌شود.
    رد شدن

    		F10
    		اجرای برنامه را در سطح (Scope) فعلی ادامه می‌دهد.
    مشابه قبلی وارد تابع نمی‌شود.
    خارج شدن

    		Shift + F11
    		کنترل به تابعی که تابع جاری را فراخوانی کرده است بازمیگردد.
    روشی سودمند زمانی که هنگام خطایابی وارد کدهای jQuery یا مثل آن می‌شوید :)
بعد از Script Location Menu قسمتی وجود دارد که وضعیت فعلی Stack را نشان می‌دهد و با کلیک بروی هرکدام، به کد آن قسمت هدایت می‌شوید. ( البته اگر فایرباگ شما در این قسمت باگ نداشته باشد! )

Context Menu
تنها قابلیت جدیدی که در این منو وجود دارد، Run To This Line است. هنگامی که پنل در حالت دیباگ است، با راست کلیک کردن بروی خط مورد نظر و انتخاب گزینه‌ی Run to This Line می‌توانید خطوط میانی را رد کرده و به خط مورد نظر بروید. البته خطوطی که رد می‌شوند ، اجرا می‌شوند.
این کار معادل این است که درخط مورد نظر یک Break Point اضافه کنید و دکمه‌ی F8 را بزنید.



 Breakpoints
توسط Break Point‌ها می‌توانید خطوطی از برنامه را برای خطایابی مشخص کنید. زمانی که دیباگر به نقطه‌ی مورد نظر برسد متوقف شده و می‌توانید به بررسی برنامه بپردازید. می‌توانید با بردن موس بروی متغییرها مقدار آن هارا بررسی کنید یا با کمک قسمت‌های Watch و Stack در پنل جانبی اطلاعات بیشتری در مورد اجرای برنامه در نقطه‌ی جاری بدست آورید.(در مورد پنل‌های جانبی در قسمت بعدی توضیح خواهم داد.) همچنین با کمک دکمه هایی که در جدول فوق توضیح داده شده اند روند اجرای برنامه را خط به خط ادامه دهید.
برای ایجاد یک Break Point، بروی شماره‌ی خط مورد نظر کلیک کنید. نقطه ای قرمز رنگ نمایش داده خواهد شد. البته دقت کنید که همه‌ی خطوط برنامه اجرا نمی‌شوند و نمی‌توانید در آن خطوط از این امکان بهره ببرید. شماره‌ی خطوط فعال با رنگ سبز مشخص شده اند.

امکان مفید دیگری که همراه با این قابلیت ارائه شده است (که در محیط‌های دیگر هم وجود دارد)، عبارت شرطی است. به این صورت که ضمن قرار دادن Break Point در یک نقطه از برنامه، می‌توانید یک شرط هم برای توقف برنامه تعیین کنید.
فرض کنید یک حلقه دارید که 300 بار تکرار می‌شود و مثلا در اجرای 250ام آن مشکلی وجود دارد. در این حالت می‌توانید از این قابلیت استفاده کنید و شرط توقف را i == 250 قرار بدهید.
برای تعیین یک شرط برای یک Break Point، بروی خط مورد نظر راست کلیک کنید و شرط را در قسمت مشخص شده وارد کنید.


امکان مفید دیگری که وجود دارد، Break Point خودکار است. اگر از مقالات قبلی دکمه‌ی Break On All Errors در پنل Console و Break On Mutate در پنل HTML را بخاطر داشته باشید می‌دانید که در هر یک هنگام اجرای یک رخداد مورد نظر، دیباگر در خطی که موجب آن رخداد شده است متوقف شده و می‌توانید کنترل برنامه را بدست بگیرید. در این حالت نیازی به ایجاد Break Point نیست و FireBug بصورت خودکار این کار را انجام می‌دهد.


 Search
این بخش در همه پنل‌ها وجود دارد با این تفاوت که در پنل Script و CSS دو گزینه‌ی Multiple Files و Use Regular Expression وجود دارد که به ترتیب امکان جستجو در فایل‌های js و css اضافه شده به صفحه هستند. قابلیت دیگری هم که فقط در پنل Script وجود دارد، پرش به یک خط در برنامه است به این صورت که با وارد کردن # و یک عدد به عنوان شماره‌ی خط، همان خط نمایش داده می‌شود.


در قسمت بعدی پنل جانبی که شامل سه بخش Watch، Stack و Breakpoints است را بررسی خواهیم کرد.
‫۱۱ سال و ۴ ماه قبل، جمعه ۳۱ خرداد ۱۳۹۲، ساعت ۰۲:۳۰
علی یگانه مقدم علی یگانه مقدم
مطالب
استفاده از کتابخانه جی کوئری در الکترون
از آنجا که الکترون از مفاهیم وب در دسکتاپ به خوبی پشتیبانی می‌کند، پس به راحتی می‌توان از کتابخانه‌های تحت وب و جاوااسکرپیتی چون جی کوئری و آنگولار و ... استفاده کرد. پروژه‌ای داریم که در آن، حین باز شدن صفحه، به کاربر پیام خوش آمد گویی نشان داده می‌شود:
<!DOCTYPE html>
<html>
  <head>

    <script src="./jquery.min.js"></script>
 <meta charset="utf-8">
    <title></title>
    <script>
$(document).ready(()=>
{
   alert("Welcome");
});
    </script>
  </head>
  <body>
  </body>
</html>
برنامه را اجرا می‌کنیم و در کمال تعجب می‌بینیم که پیامی نمایش داده نمی‌شود. برای اینکه بتوانیم اشکال آن را پیدا کنیم بهتر است ابزارهای سودمند توسعه و دیباگینگ کرومیوم را فراخوانی کنیم. برای باز کردن این پنجره، بعد از ایجاد شیء پنجره (فرضا نام متغیر win باشد) عبارت زیر را می‌نویسیم:
  win.openDevTools();
برنامه را بار دیگر اجرا کنید. در سمت راست برنامه یک پنجره جدید باز می‌شود تا بتوانید از طریق آن به دیباگینگ Render Process بپردازید. اگر اینبار به پنجره کنسول نگاهی بیندازید متوجه می‌شوید که خطای داده شده به دلیل عدم شناخت $ بوده است؛ در صورتی که همه چیز به طور صحیح قرار گرفته است و در یک صفحه وب عادی خیلی راحت اجرا می‌شود، پس مشکل از کجاست؟


module و module.exports
در اکثر کتابخانه‌های جاوااسکریپتی شما با عبارت require زیاد مواجه شده‌اید و این امکان از طریق شیءایی به نام module.exports امکان پذیر شده است. شما با کدی مشابه زیر:
exports.sayHelloInEnglish=()=>
{
  console.log("hello");
}
exports.sayHelloInPersian=()=>
{
  console.log('salam');
}
می‌توانید کتابخانه خود را به این شکل در الکترون صدا بزنید:
const test=require("./test.js");
test.sayHelloInPersian();
test.sayHelloInEnglish();
همانطور که می‌بینید شیء module.exports از این طریق می‌تواند در دسترس دیگران قرار بگیرد. حالا جی کوئری و هر کتابخانه مشابهی که کدی شبیه به کد زیر را داشته باشد می‌تواند به چنین مشکلی دچار شود:
if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

کد بالا بررسی می‌کند که آیا  module.export وجود دارد یا خیر. اگر وجود داشته باشد، در اختیار آن قرار می‌گیرد و اگر نداشته باشد در اختیار شیء window قرار می‌گیرد. پس کاری که جی کوئری اینجا انجام می‌دهد این است که توابع آن در اختیار شیء window نیست و در اختیار exports است. به همین علت ما باید شیء جی کوئری را از طریق آن دریافت کنیم. پس کد زیر را قبل از کدهای جی کوئری می‌نویسیم:
<script src="./jquery.min.js"></script>
<script>
window.$=window.jQuery=module.exports;
</script>
یا
window.$ = window.jQuery = require('./jquery.min.js');
حالا دیگر جی کوئری به راحتی اجرا خواهد شد.
‫۸ سال و ۵ ماه قبل، شنبه ۸ خرداد ۱۳۹۵، ساعت ۰۶:۱۰
دادگر دادگر
مطالب
چگونه نرم افزارهای تحت وب سریعتری داشته باشیم؟ قسمت چهارم
قسمت سوم 

12.استفاده از validation سمت کاربر
برای جلوگیری از ارسال و دریافت‌های متناوب اطلاعات به سرور، از validation سمت کاربر استفاده نمایید. فرم‌های html 5 قابلیت‌های چک کردن نوع ورودی‌ها را به صورت خودکار دارد ولی ازاتکای به آن پرهیز کنید چون ممکن است یا کاربران برنامه شما از مرورگری استفاده کنند که از html5 پشتیبانی نکند و یا پشتیبانی کاملی از آن نداشته باشند. برای حل این مشکل می‌توانید از کتابخانه هایی مانند JQuery و ابزارهایی مانند JQuery Validation استفاده کنید. البته در MVC استفاده وسیعی از JQuery Validation شده که می‌تواند مورد استفاده قرار گیرد.
فراموش نکنید می‌توانید از ابزارهایی مانند Regex برای چک کردن سختی کلمات عبور و... نیز در JavaScript بهره برداری نمایید. البته دقت کنید که حتما پیامی مرتبط با خطای به وقوع پیوسته در اختیار کاربر قراردهید تا بتواند آن را بر طرف کند در غیر این صورت بنده مسئولیتی راجع به از دست دادن کاربرانتان و یا عصبانیت کارفرما بر عهده نمی‌گیرم!

13.استفاده از validation سمت سرور
حتما به خود می‌گویید نویسنده دچار چندگانگی شخصیت شده است! ولی چنین نیست. این مطلب بیشتر از اینکه در رابطه با ایجاد سرعت بیشتر باشد مربوط به امنیت است. چون validation سمت کاربر به سادگی قابل دور زدن می‌باشد. اگر شما تنها validation را سمت کاربر انجام دهید و سمت سرور از آن چشم پوشی کنید، به سرعت تمام برنامه شما هک می‌شود. لطفا دقت کنید که امنیت را فدای هیچ چیز نکنید. این یک نکته کلیدی است. البته سوای اینکه این یک نکته امنیتی است، validation سمت سرور باعث می‌شود شما بخشی از درخواست‌ها را قبل از انجام process زیاد از گردونه خارج کنید و از ارسال اطلاعات اضافی به بانک و ایجاد سربار اضافی جلوگیری کنید.

14.چک کردن script‌های مورد استفاده سمت کاربر
استفاده از master page‌ها بسیار سرعت کار را زیاد می‌کنند. بیشتر دوستان script‌های سمت کاربر خود را در master page قرار می‌دهند تا در تمامی صفحات لود شوند. این موضوع از طرفی سرعت برنامه نویسی را زیاد می‌کند ولی از طرف دیگر به دلیل اینکه باعث می‌شود فایل‌های script در تمامی صفحات بارگذاری شوند، باعث هدر رفت منابع شبکه شما (و کاربرانتان)، ایجاد سربار حافظه و cpu در سمت کاربر و در نتیجه سرعت پایین‌تر برنامه شما خواهد شد. سخت گیری در این موضوع می‌تواند این باشد که حتی شما function اضافی هم در سمت کاربر نداشته باشید.
برخی ناظران پروژه به این موضوعات دقت زیادی می‌کنند. در پروژه ای که به عنوان ناظر بودم مجری همین کار را انجام داده بود و به دلیل نیاز مبرم کارفرما به سرعت برنامه، این بخش از نظر اینجانب مردود اعلام شده و مجری مجبور به نوشتن دوباره کدهای آن گردید.
‫۱۱ سال و ۳ ماه قبل، شنبه ۱۲ مرداد ۱۳۹۲، ساعت ۱۹:۳۵
وحید نصیری وحید نصیری
مطالب
تعیین اعتبار یک checkBoxList با کمک jQuery

checkBoxList جزو کنترل‌هایی در ASP.Net است که نمی‌توان RequiredFieldValidator استاندارد را بر آن اعمال کرد. به عبارتی اگر نیاز بود حداقل یک آیتم چک باکس لیست حتما توسط کاربر انتخاب شود، راه حل آماده‌ای برای آن وجود ندارد. پیاده سازی این‌کار با استفاده از jQuery به سادگی میسر است که در ادامه آن‌را مرور خواهیم کرد.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CheckBoxListValidator._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <script src="jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
       //<![CDATA[
       function CheckItems(sender, args) {
           //Get the total nuumber of selected CheckBoxes
           var num = jQuery("table#<%=CheckBoxList1.ClientID%> input:checked").length;
           args.IsValid = num > 0;
       }
       //]]>
   </script>
</head>
<body>
   <form id="form1" runat="server">
   <div>
       <asp:CheckBoxList ID="CheckBoxList1" runat="server">
           <asp:ListItem>item1</asp:ListItem>
           <asp:ListItem>item2</asp:ListItem>
       </asp:CheckBoxList>
       <asp:CustomValidator ClientValidationFunction="CheckItems" ID="ValidateIt"
           runat="server" ErrorMessage="(*)"> </asp:CustomValidator>
       <asp:Button ID="Button1" runat="server" />
   </div>
   </form>
</body>
</html>

توضیحات:
یک CustomValidator استاندارد را به فرم اضافه کرده‌ایم تا توسط تابعی که به ClientValidationFunction آن معرفی می‌شود، کار اعتبار سنجی سمت کاربر را انجام دهد. این تابع یا همان CheckItems مثال فوق، امضای استاندارد و آشنایی دارد. اگر تعیین اعتبار صورت گرفته باشد، باید args.IsValid در آن به true تنظیم شود یا بر عکس.
اصل قضیه هم، همین یک سطر کد زیر است:

var num = jQuery("table#<%=CheckBoxList1.ClientID%> input:checked").length;
کار این سطر که از جی‌کوئری استفاده می‌کند، پیدا کردن جدولی است که ID آن مساوی آی دی سمت کلاینت چک باکس لیست ما است (ASP.Net یک چک باکس لیست را به صورت یک جدول حاوی چک باکس‌ها رندر می‌کند). سپس در همان ناحیه مشغول به جستجوی چک باکس‌هایی می‌شود که تیک خورده‌اند. نهایتا تعداد آن‌ها را بر می‌گرداند.

‫۱۵ سال و ۳ ماه قبل، دوشنبه ۱۹ مرداد ۱۳۸۸، ساعت ۲۰:۳۸
وحید نصیری وحید نصیری
مطالب
نمایش خودکار آیکون لینک‌های سایت‌های خارجی با استفاده از jQuery

اگر دقت کرده باشید در کنار هر لینک خارجی (هر لینک ختم شده به خارج از سایت) در این وبلاگ، آیکون آن سایت هم به صورت خودکار نمایش داده می‌شود. از نظر من جالب بوده (خصوصا جهت مشخص کردن وجود یک لینک در میان انبوهی متن، یا برای نمایش لیستی از لینک‌ها)، نظر شما رو نمی‌دونم!
این‌کار در ادامه‌ی مطلبی است که در مورد نوشتن اسکریپت‌های گریس مانکی چندی قبل منتشر کردم. البته بهبود یافته‌ی آن است. برای ایجاد یک چنین قابلیتی در سایت فقط کافی است چند سطر اسکریپت زیر را به هدر سایت خود اضافه کنید.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript' />
<script type="text/javascript">
   $(document).ready(function(){
       $("a").each(function(){
           var $a = $(this);
           var href = $a.attr("href");
           // see if the link is external 
           if (href && href.match(/^http/))
               if (!href.match(document.domain)) {
                   var domain = href.replace(/<\S[^><]*>/g, "").split('/')[2];
                   var image = '<img src="http://' + domain +
                   '/favicon.ico" width="0" ' +
                   ' onload="this.width=16;this.height=16;this.style.paddingLeft=\'3px\';this.style.paddingRight=\'1px\';" ' +
                   ' style="border:0" ' +
                   ' onerror="this.src=\'http://vahid.nasiri.googlepages.com/weblink.gif\';" />';
                   $(this).prepend(image);
               }
       });
   });
</script>

توضیحاتی در مورد جزئیات برنامه نویسی آن:
با استفاده از jQuery ، زمانیکه document ما ready شد ( document.ready )، تمام لینک‌های موجود در صفحه را پیدا می‌کنیم (یک به یک). سپس مقدار href آن‌ها را می‌خوانیم (ببینید با jQuery انجام این نوع کارها چقدر ساده شده است). اکنون روی لینک دریافت شده باید پردازش صورت گیرد و نام دومین آن جدا شود (اگر ختم به خارج از سایت بود). سپس بر اساس این دومین ، یک تگ img منتهی به آیکون آن سایت طراحی و نمایش داده خواهد شد (به قبل از لینک اضافه می‌شود).
عموما هر پروژه‌ای هر چند کوچک و به ظاهر کم اهمیت، نکات خاصی را به همراه دارد.
برای مثال، در ابتدای کار width=0 در نظر گرفته نشد. مشکلی را که ایجاد کرد این بود که یک سایت ممکن است اصلا favicon.ico نداشته باشد. فایرفاکس محترم اصلا به روی مبارک هم نخواهد آورد و شما متوجه نخواهید شد که در صفحه کمبود تصویری وجود دارد. اما در IE حتما جای خالی آیکون و تصویر به نحوه واضحی گوشزد می‌شود. بنابراین در ابتدای کار قرار نیست چیزی را نمایش دهیم (width=0). سپس در رخ‌داد onload تگ img، اگر تصویر واقعا وجود داشت و بارگذاری شد، طول و عرض آن‌را 16 در 16 قرار خواهیم داد (این مورد هم لازم است. چون بعضی از سایت‌ها اندازه‌های بسیار بزرگی را برای آیکون خود در نظر می‌گیرند که اصلا مقصود ما را برآورده نخواهند کرد).
این مورد (عدم نمایش تصاویری که وجود ندارند) مشکلی را که در ادامه ایجاد خواهد کرد، عدم یکنواختی در سایت است. یک سری از لینک‌های خارجی آیکون دارند و یک سری خیر. نکته جالبی که در مورد تگ img وجود دارد رخ‌داد onerror آن است. اگر مرورگر نتواند تصویر مورد نظر را پیدا یا بارگذاری کند، این روال رخ‌داد‌ گردان فراخوانی می‌شود. همینجا از موقعیت استفاده شده و src تصویر جاری به یک آیکون مشخص و از قبل تعیین شده تنظیم می‌شود.

‫۱۵ سال و ۱۱ ماه قبل، جمعه ۲۰ دی ۱۳۸۷، ساعت ۰۴:۴۰
بهنام محمدی بهنام محمدی
مطالب
فراخوانی یک تابع بعد از اتمام Render در AngularJS
در این مقاله در خصوص موضوعی صحبت خواهم کرد که شاید مشکل اکثر برنامه نویسان باشد؛ مخصوصا در استفاده از پلاگین‌های jQuery در پروژه‌های AngularJS.
مطمئنا برای شما هم پیش آمده که نیاز داشته باشید تابعی را بعد از اتمام Render در AngularJS صدا بزنید یا متوجه اتمام Render بشوید.
سوال اول: چرا این بحث مطرح هست؟
وقتی شما از AngularJS در پروژه‌ای استفاده می‌کنید و سبک کاری شما Model Based یا بهتر بگویم MVVM می‌باشد، عملیات Binding در View، توسط AngularJS انجام می‌شود و AngularJS توسط Watcher‌ها تغییرات را در View اعمال می‌کند.
سوال دو: مشکل کجاست؟
مشکل اینجاست که چه موقعی Binding یا Render تمام می‌شود؟ فرض کنید شما یک لیست دارید و می‌خواهید در View نمایش دهید. مسلما از ng-repeat استفاده می‌کنید و AngularJS از مدلی که مشخص شده است موارد را خوانده و در View نمایش می‌دهد. فرض کنید همه‌ی این موارد باید توسط jQuery UI دارای قابلیت Draggable بشوند. اما چه موقعی تابع مربوطه را صدا بزنیم؟ از کجا مطمئن شویم که element‌های لیست شهر‌ها در View موجود هستند؟ کد زیر را نگاه کنید.
<div class="city" ng-repeat="item in items">
     {{item.title}}
<div>
و در Controller
$scope.items=[
     {title:'اردبیل'},
     {title:'تهران'},
     {title:'تبریز'},
     {title:'مشهد'},
     {title:'اصفهان'}
];
ما فرض می‌کنیم بعد از اینکه شهر‌ها در View به صورت لیست نمایش داده شدند، کاربر باید بتواند شهر‌ها را Drag کند و مکان آنها را با ماوس جابجا کند. برای این کار ما از تابع jQuery UI زیر استفاده می‌کنیم:
$('.city').draggable();

سوال سوم: خوب مشکل کجاست؟
مشکل اینجاست که ما چه موقعی این تابع را صدا بزنیم تا مطمئن شویم که elementهای کلاس city در View موجود هستند و نسبت به تغییر لیست شهر که ممکن هست در طول اجرا این شهر‌ها کم یا زیاد شوند چه موقعی تابع jQuery UI را صدا بزنیم؟

سوال چهارم: راه حل چیست؟
در این چند سالی که من با AngularJS کار می‌کنم، از یک روش خیلی ساده استفاده میکنم و با همین روش از همه‌ی پلاگین‌های غیر AngularJS بدون تبدیل کردن این پلاگین‌ها به معادل AngularJS و یا گشتن چند ساعتی در اینترنت برای پیدا کردن پلاگین مشابه و منطبق با AngularJS که خیلی از مواقع هم پیدا نمی‌شوند، راحت شده‌ام. کد زیر را مشاهده کنید.
app.directive('ngFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$eval(attr.ngFinishRender);
                }, 0);
            }
        }
    }
});
این کد یک Directive جدید را در پروژه‌ی AngularJS شما تعریف می‌کند که توسط AngularJS قابل پردازش هست. این Directive را در View اضافه می‌کنم و کد View بالایی به کد زیر تغییر می‌کند:
<div class="city" ng-repeat="item in items" ng-finish-render="init()">
     {{item.title}}
<div>
اما این Directive چه عملی را انجام می‌دهد؟ این Directive توسط AngularJS پردازش شده و تابع init را که در مقدار ng-finish-render نوشته شده است، بعد از اتمام ng-repeat اجرا می‌کند. خوب تابع init را در controller می‌نویسیم؛ به کد زیر دقت کنید. 
$scope.items=[
     {title:'اردبیل'},
     {title:'تهران'},
     {title:'تبریز'},
     {title:'مشهد'},
     {title:'اصفهان'}
];

$scope.init=function(){
     $('.city').draggable();
}
شما به همین راحتی می‌توانید از همه‌ی پلاگین‌های غیر AngularJS استفاده کنید و متوجه اتمام Render در View شوید.
‫۸ سال و ۱۱ ماه قبل، دوشنبه ۹ آذر ۱۳۹۴، ساعت ۱۵:۳۵
وحید نصیری وحید نصیری
مطالب
نمایش یک پیغام به کاربر در ASP.Net

عموما در برنامه‌های وب مرسوم است که پیغام به کاربر را در همان لابلای html صفحه نمایش می‌دهند. مثلا یک برچسب و سپس تنظیم متن آن در کد برنامه به صورت پویا.
با استفاده از پلاگین‌های jQuery این‌کار را به صورت شکیل‌تری می‌توان انجام داد. برای مثال:


پلاگین کم حجمی برای این منظور موجود است به نام jQuery Notice (یکی از چند ده نمونه موجود)
<script type="text/javascript">
$(document).ready(function()
{
jQuery.noticeAdd({
  text: 'پیغامی به کاربر',
  stay: false
 });
});
</script>
کمی این پلاگین را اصلاح کردم تا مشکل عدم نمایش آن هنگام اسکرول طولانی صفحه در IE حل شود (به صورت پیش فرض با فایرفاکس مشکلی ندارد). برای مثال این div را در نظر بگیرید:
<div id="myElement" style="position: absolute">This stays at the top</div>
قصد داریم مکان آن‌را در بالای صفحه ثابت کنیم (حتی با یک اسکرول طولانی مانند تصویر فوق، باز هم همان بالا باقی بماند و قابل مشاهده باشد).
با استفاده از jQuery این‌کار به صورت زیر قابل انجام است:
<script type="text/javascript">
$(document).ready(function()
{
$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});
});
</script>
زمانیکه scroll ایی در window جاری صورت ‌گیرد، div ایی با id مساوی myElement یافت شده و سپس مقدار top آن تنظیم شده و در بالای صفحه نمایش داده می‌شود.

ولی این روش جهت نمایش پیغامی پویا به کاربر مشکل دارد.
نیاز است به ازای هر پیغام پویا یکبار به نحوی این اسکریپت به صفحه تزریق شود که روش انجام کار در ASP.Net به صورت زیر می‌تواند باشد:

using System;
using System.Web.UI;
using System.Web;

 public class CAddJqueryNotice
 {
     /// <summary>
     /// نمایش یک پیغام بر اساس پلاگین نوتیس
     /// </summary>
     /// <param name="title">عنوان</param>
     /// <param name="msg">پیغام</param>
     /// <param name="rtl">راست به چپ؟</param>
     /// <param name="duration">مدت زمان نمایش</param>
     /// <param name="autoHide">به صورت خودکار بسته شود؟</param>
     public static void Show(string title, string msg, bool rtl, int duration, bool autoHide)
     {
         string scriptBlock
             = string.Format(@"<script type=""text/javascript"">
                                 $(document).ready(function() {{
                                     jQuery.noticeAdd({{
                                         text: '<b>{0}</b><br/><div align=left dir={1}>{2}</div>',
                                         stay: {3},
                                         stayTime: {4}
                                     }});
                                 }});         
                             </script>",
                           title,
                           (rtl ? "rtl" : "ltr"),
                           msg,
                           (autoHide ? "false" : "true"),
                           duration);

         if (HttpContext.Current == null || HttpContext.Current.Handler == null) return;
         Page page = HttpContext.Current.Handler as Page;
         if (page != null)
             page.ClientScript.RegisterStartupScript(
                 page.GetType(),
                 "script" + new Guid().ToString("N"),
                 scriptBlock,
                 false);
     }

 }
از آنجائیکه در یک کلاس دیگر خارج از صفحه اصلی مشغول به کار هستیم، دسترسی مستقیم به شیء Page و سپس متد ClientScript.RegisterStartupScript آن جهت تزریق اسکریپت خود به صفحه نداریم. اما با استفاده از HttpContext.Current.Handler می‌توان به این مقصود رسید و مشکل حل می‌شود.

برای آزمایش آن یک دکمه را در صفحه قرار داده و در روال رخ‌داد گردان کلیک آن کد زیر را اضافه کنید:
CAddJqueryNotice.Show( "لطفا دوباره سعی کنید", "مشکلی رخ داده است", true, 2000, true);

بدیهی است قبل از استفاده از کد فوق، باید چند سطر زیر را به هدر master page سایت خود اضافه کنید:
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<link href="jquery.notice.css" type="text/css" media="screen" rel="stylesheet" />
<script src="jquery.notice.js" type="text/javascript"></script>

‫۱۵ سال و ۶ ماه قبل، شنبه ۱۶ خرداد ۱۳۸۸، ساعت ۰۲:۲۵
وحید نصیری وحید نصیری
بازخوردهای دوره
ارتباطات بلادرنگ و SignalR
- کار ما در اینجا پشتیبانی مقالات سایت‌های دیگر نیست. ضمنا در قسمت اول، یک مبحث کاملا خارج از موضوع را نباید ارسال کنید. در ذیل هر مطلب عنوان شده برای این نوع موارد مرتبط به دوره، لطفا به قسمت پرسش و پاسخ دوره مراجعه کنید.
- من از جزئیات کار شما اطلاعی ندارم. نه خطایی را عنوان کردید و نه پروژه‌ای برای دیباگ پیوست شده. ایشان عنوان کرده که اجرا می‌شود؛ یک فیلم هم پیوست کرده. ضمنا با jQuery Ajax کار کرده قسمتی را. یعنی یک سری پیشنیاز دیگر را هم باید به پروژه و صفحه اضافه کنید. در کل از راه دور و بدون دیدن کار شما نمی‌شود نظر داد (کل کار البته).
- در آن مقاله سایت ثالث، dependency_OnChange فقط زمانی رجیستر می‌شود که GetData یکبار فراخوانی شود. ضمنا این کد نشتی حافظه دارد. چون مدام دارد new OnChangeEventHandler را ایجاد می‌کند بدون اینکه فکری برای حذف موارد ثبت شده کند. همچنین JobInfoRepository را در سطح یک Web API Controller وهله سازی کرده. یعنی این وهله به ازای هر درخواست رسیده یکبار ایجاد می‌شود (ونه اینکه یکبار ایجاد شده و بارها استفاده شود) و به این ترتیب یکبار دیگر نیز OnChangeEventHandler رجیستر خواهد شد. خلاصه اینکه روش مناسبی نبوده و توصیه نمی‌شود.

مطلبت حذف شد. تکرار کنی خودت هم حذف می‌شی. شک نداشته باش.
‫۱۰ سال و ۱۲ ماه قبل، شنبه ۴ آبان ۱۳۹۲، ساعت ۱۹:۰۸