نحوهی مدیریت سشنها در PHP
href را به # و ویژگی data-ajax-url را به href اصلی تنظیم کنید. در کدهای اصلی، ابتدا مقدار ویژگی data-ajax-url بررسی میشود و سپس در صورت عدم یافتن مقداری برای آن، از مقدار href استفاده خواهد شد.
- از سال 2014، گوگل شروع به پردازش جاوا اسکریپت موجود در صفحات وب هم کردهاست. بنابراین مشکلی با این نوع برنامهها ندارد.
بهینهسازی سایت برای شبکههای اجتماعی
نمایش دو جدول در یک صفحه
بررسی سیستم جدید گرید بوت استرپ 3
چهار اندازه متفاوت سیستم گرید بوت استرپ 3
الف) صفحات نمایش بسیار کوچک یا xs، مانند موبایلها (کمتر از 768 پیکسل)
ب) صفحات نمایش کوچک یا sm مانند تبلتها (بیشتر از 768 پیکسل و کمتر از 992 پیکسل)
ج) صفحات نمایش با اندازه متوسط یا md مانند سیستمهای دسکتاپ (بیشتر از 992 پیکسل و کمتر از 1200 پیکسل)
د) صفحات نمایش با اندازه بزرگ یا lg مانند سیستمهای خاص دسکتاپ (بیشتر از 1200 پیکسل)
نحوه تنظیم این چهار اندازه را در تصویر ذیل مشاهده میکنید:
با کدهای کامل زیر:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Website</title> <link href="Content/css/bootstrap-rtl.css" rel="stylesheet"> <link href="Content/css/custom.css" rel="stylesheet"> <style> body { padding: 0 16px; } .container { padding: 0 1em; } h4 { margin-top: 1.5em; } .row { margin-bottom: 1.5em; } .row .row { margin-top: 0.8em; margin-bottom: 0; } [class*="col-"] { padding: 1em 0; background-color: rgba(255,195,13,.3); border: 1px solid rgba(255,195,13,.4); } </style> <!--[if lt IE 9]> <script src="Scripts/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>master example grid</h1> <div class="row"> <div class="col-lg-4 col-md-1 col-sm-5 col-xs-5"> <span class="visible-lg">.col-lg-4</span> <span class="visible-md">.col-md-1</span> <span class="visible-sm">.col-sm-5</span> <span class="visible-xs">.col-xs-5</span> </div> <div class="col-lg-4 col-md-5 col-sm-1 col-xs-6"> <span class="visible-lg">.col-lg-4</span> <span class="visible-md">.col-md-5</span> <span class="visible-sm">.col-sm-1</span> <span class="visible-xs">.col-xs-6</span> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-1"> <span class="visible-lg">.col-lg-4</span> <span class="visible-md">.col-md-6</span> <span class="visible-sm">.col-sm-6</span> <span class="visible-xs">.col-xs-1</span> </div> </div> <!-- end row --> <h2>xs Grid</h2> <div class="row"> <div class="col-xs-5"> <p>.col-xs-5</p> </div> <div class="col-xs-6"> <p>.col-xs-6</p> </div> <div class="col-xs-1"> <p>.col-xs-1</p> </div> </div> <!-- end row --> <h2>sm Grid</h2> <div class="row"> <div class="col-sm-5"> <p>.col-sm-5</p> </div> <div class="col-sm-1"> <p>.col-sm-1</p> </div> <div class="col-sm-6"> <p>.col-sm-6</p> </div> </div> <!-- end row --> <h2>md Grid</h2> <div class="row"> <div class="col-md-1"> <p>.col-md-1</p> </div> <div class="col-md-5"> <p>.col-md-5</p> </div> <div class="col-md-6"> <p>.col-md-6</p> </div> </div> <!-- end row --> <h2>lg Grid</h2> <div class="row"> <div class="col-lg-4"> <p>.col-lg-4</p> </div> <div class="col-lg-4"> <p>.col-lg-4</p> </div> <div class="col-lg-4"> <p>.col-lg-4</p> </div> </div> <!-- end row --> </div> <!-- /container --> <script src="Scripts/jquery-1.10.2.min.js"></script> <script src="Scripts/bootstrap-rtl.js"></script> </body> </html>
در این حین که عرض مرورگر را تغییر میدهید، به سطر اول، بیش از بقیه توجه کنید. این سطر طوری طراحی شده است که در اندازههای مختلف صفحه، اطلاعات متفاوتی را نمایش میدهد. همچنین سلولهای گریدهای پایین صفحه به صورت عمودی بر روی هم قرار خواهند گرفت.
- در این مثال هر ردیف 12 ستونی، با یک div دارای کلاس row شروع میشود.
- اکنون بر اساس اندازه دستگاهی که قرار است سیستم را مطابق آن طراحی یا بهینه سازی کنیم، میتوان از چهار اندازه یاد شده استفاده کرد. ستونهای col-xs به معنای extra small یا بسیار کوچک هستند. ستونهای دارای کلاس col-sm دارای اندازه کوچک یا small میباشند. ستونهای col-md برای حالت medium devices طراحی شدهاند و col-lg برای حالت large devices و صفحات عریض کاربرد دارند.
بنابراین در بوت استرپ 3 بر اساس اندازه غالب صفحه مرورگر کاربران برنامه میتوان سیستم گرید را بهینه سازی کرد.
- اعدادی که پس از نامهای یاد شده میآیند، جمعشان باید 12 بشود. برای مثال در سطر آخر، سه col-lg-4 داریم و در سطرهای دیگر نیز به همین ترتیب، جمع اعداد ستونها، عدد 12 را تشکیل میدهند.
- اگر نیاز است اطلاعاتی جهت اندازه خاصی نمایش داده شود، مانند سطر اول، از کلاسهایی مانند visible-lg میتوان استفاده کرد.
- style ابتدای مثال نیز صرفا برای رنگی نمایش دادن این سیستم گرید و ارائه توضیحات واضحتری در مورد آن تعریف شدهاند.
نکات تکمیلی سیستم گریدهای بوت استرپ 3
1) ترکیب اندازههای مختلف گریدها با هم
فرض کنید یک ردیف را با چهار ستون col-md-3 طراحی کردهاید. اندازهی صفحه که اندکی کوچکتر شود، تمام این ستونها تبدیل به 4 ردیف خواهند شد و شاید در این حالت بجای داشتن یک سیستم تک ستونی چهار ردیفه، سیستمی 2 ردیفه با 2 ستون، مطلوب کار ما باشد و به این ترتیب قسمت عمدهای از صفحه خالی باقی نماند.
<div class="row"> <div class="col-md-3 col-xs-6"> </div> <div class="col-md-3 col-xs-6"> </div> <div class="col-md-3 col-xs-6"> </div> <div class="col-md-3 col-xs-6"> </div> </div>
در مثال فوق، اگر اندازه صفحه برای حالت md مناسب باشد، 4 ستونه نمایش داده میشود. اگر اندازه اندکی کوچکتر گردد، 2 ستونه میشود؛ بجای تک ستونه صرف حالت col-md.
2) استفاده از div محصور کننده container
<div class="container"> </div>
3) ایجاد فاصله بین ستونها
اگر علاقمند باشید تا بین ستونهای یک گرید فاصله ایجاد کنید، باید از offset استفاده کرد. یک مثال:
<div class="container"> <h4 class="alert alert-info">ایجاد فاصله بین ستونها</h4> <div class="row"> <div class="col-lg-3 col-sm-4"> col-lg-3 col-sm-4 </div> <div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1"> col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1 </div> </div> <!-- end row --> </div> <!-- /container -->
اگر در حالت معمولی، دو ستون با تعاریف col-lg-3 و col-lg-9 تعریف شدهاند، میتوان از ستون دوم یک واحد کم کرد و یک واحد به آفست آن افزود تا از ستون کناری فاصله بگیرد. آفست از سمت چپ ستون عمل میکند و اگر از نسخه RTL استفاده میکنید، از سمت راست.
علت اینکه در اینجا هم از col-lg استفاده شده و هم از col-sm، در قسمت 1 توضیح داده شد. میخواهیم این ردیف حتی در بازه sm نیز دو ستونی نمایش داده شود.
4) تعیین ترتیب ستونها
تعیین ترتیب ستونها نیز یکی دیگر از قابلیتهای جدید گرید بوت استرپ 3 است. مثلا در مثال 3 فوق، با کاهش عرض مرورگر، بالاخره زمانی فرا میرسد که تمام ستونها در قالب یک ردیف نمایش داده خواهند شد. در این حالت اگر ستون سمت راست را منو و ستون سمت چپ را محتوای صفحه فرض کنیم، شاید علاقمند باشیم که بجای اینکه ابتدا منو نمایش داده شود و سپس در ردیف زیرین، محتوای صفحه، این ترتیب معکوس گردد. برای این منظور میتوان از push و pull استفاده کرد:
<div class="container"> <h4 class="alert alert-info">تغییر ترتیب ستونها در اندازههای مختلف صفحه</h4> <div class="row"> <div class="col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4"> col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4 </div> <div class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8"> col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8 </div> </div> <!-- end row --> </div> <!-- /container -->
در اینجا در div اول به ازای هر کدام از حالتهای sm و lg مدنظر، یک push اضافه شده است و در div دوم یک pull.
push سبب میشود تا div اول به سمت راست صفحه هدایت گردد و pull باعث خواهد شد تا div دوم به سمت چپ رانده شود (برای آزمایش این مساله یکبار push مربوط به div اول را حذف کنید و نتیجه را در مروگر بررسی کنید و سپس یکبار pull اضافه شده به div دوم را به صورت موقت حذف نمائید).
5) ایجاد ردیفهای تو در تو
یکی از امکانات پیش فرض گریدهای بوت استرپ، امکان قرار دادن کل محتوای یک ردیف داخل ردیف یا ستونی دیگر است. برای مثال محتوایی در ستون دوم نمایش داده میشود و قصد داریم دقیقا در ذیل آن یک ردیف 4 ستونه داشته باشیم. در این حالت تنها کافی است این ردیف را داخل ستون دوم ایجاد کنیم.
6) قابلیتی به نام جامبوترون!
حتما بسیاری از سایتها را دیدهاید که در ابتدای صفحه اول خود، قسمت عمدهای را در بالای صفحه به نمایش یک عکس بزرگ با چند سطر متن داخل آن اختصاص دادهاند. به این کار در بوت استرپ، جامبوترون میگویند. برای تدارک آن نیز باید از یک ردیف 12 ستونی کامل بدون ستون استفاده کرد. یعنی فقط یک row باید ذکر شود. اما بجای row میتوان از کلاس مخصوص دیگری استفاده کرد:
<div class="container"> <h4 class="alert alert-info">جامبوترون!</h4> <div class="jumbotron"> jumbotron <br> jumbotron <br> jumbotron <br> </div> <!-- end row --> </div> <!-- /container -->
در اینجا اگر تصویری را نیز قرار دادید، با استفاده از کلاسهای pull-left یا pull-right میتوان موقعیت تصویر را نیز تغییر داد.
فایلهای نهایی این قسمت را از اینجا نیز میتوانید دریافت کنید:
bs3-sample02.zip
روی گزینهی Next کلیک کنید و در پنجرهای که باز میشود در قسمت Address نشانی وبسایتی که در بخش پیشین تولید کردیم و ممکن است شما در IIS افزوده باشید؛ قرار دهید و روی دکمهی GO بفشارید تا سرویس در کادر پایین افزوده شود. سپس در قسمت Namespace نامی مناسب برای فراخوانی سرویس وارد کنید آنگاه دکمهی OK را بفشارید.
از پنجرهی بازشده روی دکمهی Finish کلیک کنید. پس از مکثی کوتاه سرویس به همراه دو موجودیت آن درون Data Sources دیده خواهد شد. از آنطرف در Solution Explorer نیز در پوشهی Service References سرویس تعریفشده ارجاع داده خواهد گرفت.
از Data Sources روی tblNews کلیک کنید سپس آنرا کشیده و به روی فرم رها کنید. خواهید دید که یک DataGridView شامل همهی ویژگیهای موجودیت tblNews و یک Binding Navigator که با موجودیت tblNews در پیوند است و یک منبع داده به نام tblNewsBindingSource به صورت خودکار در فرم افزوده خواهد شد.
چیدمان فرم، رنگها، اندازهها و فونت را آنگونه که میپسندید تنظیم کنید. سپس ستونهایی که به آنها نیازی ندارید حذف یا پنهان کرده و عنوان ستونهای مانده را ویرایش کنید. کلیدهای افزودن، حذف و ذخیره را روی Navigator ایجاد کنید و بقیهی کلیدها را اگر به آن نیازی ندارید حذف کنید. البته میتوانید بنا به سلیقهی کاریتان یک Panel برای اینکار اختصاص دهید. در اینجا یک فرم ساده در نظر گرفته شده است:
اکنون نوبت به کدنویسی است. سورس فرم را بازکنید و نخست سرویس را به این صورت در جای مناسب تعریف کنید:
MyNewsService.MyNewsServiceClient MyNews = new MyNewsService.MyNewsServiceClient();
یک تابع کوچک برای تبدیل تاریخ میلادی به شمسی بنویسید سپس رویداد Load فرم را به این صورت بنویسید:
string MiladiToShamsi(DateTime MyDate) { System.Globalization.PersianCalendar pers = new System.Globalization.PersianCalendar(); return string.Format("{0}/{1}/{2}", pers.GetYear(MyDate), pers.GetMonth(MyDate).ToString("D2"), pers.GetDayOfMonth(MyDate).ToString("D2")); } private void Form1_Load(object sender, EventArgs e) { tblNewsBindingSource.DataSource = MyNews.GetAllNews().Select(p => new {p.tblNewsId, p.tblCategory.CatName, p.Title, p.Description, RegDate= MiladiToShamsi( p.RegDate) }); }
پیش از اجرای پروژه از Solution Explorer روی نام راه حل راستکلیک کنید و گزینهی Properties را انتخاب کنید. در پنجرهی بازشده تنظیمات زیر را انجام دهید:
این کار باعث میشود که به طور همزمان پروژهی وبسایت و ویندوز اجرا شود. اکنون پروژه را اجرا کنید. اگر با پیغام خطا روبهرو شدید؛ تگ Connection String را از App.Config پروژه WCF Library به Web.Config پروژه وبسایت کپی کنید. در این صورت پروژه به راحتی اجرا خواهد شد.
در بخش پسین پیرامون افزودن، ویرایش و حذف و برخی توضیحات برای توسعهی کار خواهم نوشت.