کیارش سلیمان زاده کیارش سلیمان زاده
مطالب
ساخت Arrow در CSS - قسمت اول
تو این مطلب میخوام روش ساخت arrow رو با css آموزش بدم.حتما تا بحال modal box‌ها و خیلی دیگه از افزونه‌های jQuery رو دیدید، حتی bootstrap هم از این ویژگی برای ساخت arrow در tooltip و popover هاش استفاده میکنه.اینجا

به تصویر زیر نگاه کنید:

به طور خلاصه کل کار برای ساخت arrow کلاسی به صورت زیر هستش:

ابتدا خاصیت border برای یک مقدار اولیه با رنگ transparent مقدارهی شده و سپس مقدار border-top-color با ccc# مقداردهی شده و حتما عرض و طول باید با 0 مقداردهی بشن تا کادر اضافی حذف بشه،به این صورت:
.arrow{
    width:0;
    height:0;
    border:10px solid transparent;
    border-top-color:#ccc;
}
قرار دادن Arrorw در کادرها!
مقدمات:
-حالا که دونستیم Arrow‌ها چطور ایجاد میشن،این سوال پیش میاد که چطور از این Arrorw‌ها در ساخت tooltip‌ها میشه استفاده کرد؟
CSS به ما این اجازه رو میده که با استفاده از خاصیت content محتوا ایجاد کنیم،البته نه هر محتوایی!،و چیزی که جالبه میتونیم دقیقا مثل یه عنصر باهاش رفتار کنیم و بهش استایل مورد نظر بدیم.
-خاصیت content رو فقط میشه با انتخابگرهای after و before به کار برد.

***نکته‌ی بسیار بسیار  بسیار  مهم و حیاتی در طراحی:***
اگه به خاصیت position عنصری مقدار relative داده بشه و در داخل این عنصر،عنصری(فرزند) با خاصیت position برابر absolute ایجاد کنیم،عنصر پدر به عنوان مبدا مختصات برای عنصر فرزند عمل میکنه.(این نکته خیلی از جاها حلال مشکلات برای من بوده!)

خب حالا بریم سر موضوع اصلی،ابتدا استایل زیر رو به container مورد نظر میدیم:
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
کاملا واضحه و نیاز به توضیح اضافی نداره،فقط به relative بودن عنصر دقت کنید.
حالا استایل پایه رو برای ایجاد Arrow برای این container ایجاد می‌کنیم:
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
}
در اینجا توجه به دو نکته ضروریه:
1-ما فقط یک space به عنوان محتوا به این استایل دادیم،در واقع همینم کافیه چون ما فقط میخوایم یه بهانه داشته باشیم که با استایل دادن بهش به هدف برسیم،اگه content رو اصلا قید نکنیم،هر استایلی که ایجا بشه نادیده گرفته میشه چون نمیشه هوا رو رنگ آمیزی کرد!

2-ما خاصیت position این عنصر رو به absolute ست کردیم،پس میتونیم این عنصر رو نسبت به container جابجا کنیم.

حالا به عنصر استایل Arrow رو میدیم:
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;

border: 10px solid transparent;
border-top-color: #333;
}
نکته‌ی دیگه ای که تو اینجا باید بهش توجه داشت اینه که پهنای Arrow توسط border مشخص میشه،که در اینجا 20px هستش!بله 20px،درواقع 10px مربوط یک گوشه‌ی شیبدار Arrorw و 10px مربوط به گوشه‌ی دیگه میشه.
حالا که Arrow رو ایجاد کردیم و بعد از عنصر اصلی قرار دادیم،میخوایم یکم جابجاش کنیم تا به نتیجه مورد نظر برسیم:
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;

border: 10px solid transparent;
border-top-color: #333;

top: 100%;
left: 10px;
}
همونطور که میبینید خاصیت top به %100 که باعث میشه در پایینترین نقطه‌ی عنصر اصلی(مبدا!) قرار بگیره،و خاصیت left برابر 10px ست شده که از عنصر اصلی 10px به سمت راست حرکت کردیم(فاصله از چپ 10px) و Arrow رو در این نقطه نقاشی کردیم!

نتیجه نهایی تا اینجای کار
‫۱۱ سال و ۱۲ ماه قبل، شنبه ۲۷ آبان ۱۳۹۱، ساعت ۲۲:۵۰
م کریمی م کریمی
نظرات اشتراک‌ها
بررسی Immutable Collections
ممنونم ازتون، امیدوارم کاربردی بوده باشه. 
‫۱ سال و ۵ ماه قبل، شنبه ۲ اردیبهشت ۱۴۰۲، ساعت ۰۳:۲۲
سروش ترک زاده سروش ترک زاده
نظرات مطالب
NoSQL ؟
موافقم، هیچ چیز مثل یک مثال کاربردی یادگرفتنی نیست...
‫۱۲ سال و ۴ ماه قبل، دوشنبه ۱۲ تیر ۱۳۹۱، ساعت ۰۰:۰۶
وحید نصیری وحید نصیری
مطالب
نمایش یک پیغام به کاربر در 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>

‫۱۵ سال و ۶ ماه قبل، شنبه ۱۶ خرداد ۱۳۸۸، ساعت ۰۲:۲۵