راهنمای جامع سلکتور ها در CSS
معرفی کتابخانه Loader برای بارگذاری JS و CSS
و از این فونتها http://awebfont.ir
صورت مساله
public class Product { public int Id { set; get; } public DateTime AddDate { set; get; } public string Name { set; get; } public decimal Price { set; get; } }
میخواهیم زمانیکه فرمهای پویای ویرایش یا افزودن رکوردها ظاهر شدند، در حین تکمیل نام، یک auto complete ظاهر شود:
در حین ورود تاریخ، یک date picker شمسی جهت سهولت ورود اطلاعات نمایش داده شود:
همچنین در قسمت ورود مبلغ و قیمت، به صورت خودکار حرف سه رقم جدا کننده هزارها، نمایش داده شوند تا کاربران در حین ورود مبالغ بالا دچار اشتباه نشوند.
پیشنیازها
- برای نمایش auto complete از همان امکانات توکار jQuery UI که به همراه jqGrid عرضه میشوند، استفاده خواهیم کرد.
- برای نمایش date picker شمسی از مطلب «PersianDatePicker یک DatePicker شمسی به زبان JavaScript که از تاریخ سرور استفاده میکند» کمک خواهیم گرفت.
- جهت اعمال خودکار حرف سه رقم جدا کننده هزارها از افزونهی Price Format جیکوئری استفاده میکنیم.
تعریف و الحاق این پیشنیازها، فایل layout برنامه را به شکل زیر تغییر خواهد داد:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" /> <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" /> <link href="~/Content/PersianDatePicker.css" rel="stylesheet" /> <link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <div> @RenderBody() </div> <script src="~/Scripts/jquery-1.7.2.min.js"></script> <script src="~/Scripts/jquery-ui-1.8.11.min.js"></script> <script src="~/Scripts/i18n/grid.locale-fa.js"></script> <script src="~/Scripts/jquery.jqGrid.min.js"></script> <script src="~/Scripts/PersianDatePicker.js"></script> <script src="~/Scripts/jquery.price_format.2.0.js"></script> @RenderSection("Scripts", required: false) </body> </html>
تغییرات مورد نیاز سمت کلاینت، جهت اعمال افزونههای جیکوئری و سفارشی سازی عناصر دریافت اطلاعات
الف) نمایش auto complete در حین ورود نام محصولات
colModel: [ { name: 'Name', index: 'Name', align: 'right', width: 100, editable: true, edittype: 'text', editoptions: { maxlength: 40, dataInit: function (elem) { // http://jqueryui.com/autocomplete/ $(elem).autocomplete({ source: '@Url.Action("GetProductNames","Home")', minLength: 2, select: function (event, ui) { $(elem).val(ui.item.value); $(elem).trigger('change'); } }); } }, editrules: { required: true } } ],
برای پردازش سمت سرور آن و مقدار دهی url آن، یک چنین اکشن متدی را میتوان تدارک دید:
public ActionResult GetProductNames(string term) { var list = ProductDataSource.LatestProducts .Where(x => x.Name.StartsWith(term)) .Select(x => x.Name) .Take(10) .ToArray(); return Json(list, JsonRequestBehavior.AllowGet); }
ب) نمایش date picker شمسی در حین ورود تاریخ
colModel: [ { name: 'AddDate', index: 'AddDate', align: 'center', width: 100, editable: true, edittype: 'text', editoptions: { maxlength: 10, // https://www.dntips.ir/post/1382 onclick: "PersianDatePicker.Show(this,'@today');" }, editrules: { required: true } } ],
@{ ViewBag.Title = "Index"; var today = DateTime.Now.ToPersianDate(); }
ج) اعمال حروف سه رقم جدا کننده هزارها در حین ورود قیمت
colModel: [ { name: 'Price', index: 'Price', align: 'center', width: 100, formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, prefix: '$' }, editable: true, edittype: 'text', editoptions: { dir: 'ltr', dataInit: function (elem) { // http://jquerypriceformat.com/ $(elem).priceFormat({ prefix: '', thousandsSeparator: ',', clearPrefix: true, centsSeparator: '', centsLimit: 0 }); } }, editrules: { required: true, minValue: 0 } } ],
یک نکته
همین تعاریف را دقیقا به فرمهای جستجو نیز میتوان اعمال کرد. در اینجا برای حالات ویرایش و افزودن رکوردها، editoptions مقدار دهی شدهاست؛ در مورد فرمهای جستجو باید searchoptions و برای مثال dataInit آنرا مقدار دهی کرد.
مشکل مهم!
با تنظیمات فوق، قسمت UI بدون مشکل کار میکند. اما اگر در سمت سرور، مقادیر دریافتی را بررسی کنیم، نه تاریخ و نه قیمت، قابل دریافت نیستند. زیرا تاریخ ارسالی به سرور شمسی است و مدل برنامه DateTime میلادی میباشد. همچنین به دلیل وجود حروف سه رقم جدا کننده هزارها، عبارت دریافتی قابل تبدیل به عدد نیستند و مقدار دریافتی صفر خواهد بود.
برای رفع این مشکلات، نیاز به تغییر model binder توکار ASP.NET MVC است. برای تاریخها از کلاس PersianDateModelBinder میتوان استفاده کرد. برای اعداد decimal از کلاس ذیل:
using System; using System.Globalization; using System.Threading; using System.Web.Mvc; namespace jqGrid05.CustomModelBinders { /// <summary> /// How to register it in the Application_Start method of Global.asax.cs /// ModelBinders.Binders.Add(typeof(decimal), new DecimalBinder()); /// </summary> public class DecimalBinder : DefaultModelBinder { public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext) { if (bindingContext.ModelType == typeof(decimal) || bindingContext.ModelType == typeof(decimal?)) { return bindDecimal(bindingContext); } return base.BindModel(controllerContext, bindingContext); } private static object bindDecimal(ModelBindingContext bindingContext) { var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName); if (valueProviderResult == null) return null; bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueProviderResult); decimal value; var valueAsString = valueProviderResult.AttemptedValue == null ? null : valueProviderResult.AttemptedValue.Trim(); if (string.IsNullOrEmpty(valueAsString)) return null; if (!decimal.TryParse(valueAsString, NumberStyles.Any, Thread.CurrentThread.CurrentCulture, out value)) { const string error ="عدد وارد شده معتبر نیست"; var ex = new InvalidOperationException(error, new Exception(error, new FormatException(error))); bindingContext.ModelState.AddModelError(bindingContext.ModelName, ex); return null; } return value; } } }
برای ثبت و معرفی این کلاسها باید به نحو ذیل در فایل global.asax.cs برنامه عمل کرد:
using System; using System.Web.Mvc; using System.Web.Routing; using jqGrid05.CustomModelBinders; namespace jqGrid05 { public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); RouteConfig.RegisterRoutes(RouteTable.Routes); ModelBinders.Binders.Add(typeof(DateTime), new PersianDateModelBinder()); ModelBinders.Binders.Add(typeof(decimal), new DecimalBinder()); } } }
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید
jqGrid05.zip
رشتهها در ES 6
در بیشتر زبانهای برنامهنویسی قابلیتی تحت عنوان String Interpolation وجود دارد. منظور، فرآیند جایگزین کردن مقادیر، با یکسری placeholder درون یک رشته است. در نسخههای قبلی جاوا اسکریپت محدودیتهایی در استفاده از رشتهها وجود داشت و امکان انجام این کار به صورت توکار مهیا نبود. یعنی برای پیادهسازی این قابلیت میتوانستیم با تغییر prototype شیء String و یا روشهای دیگری اینحالت را پیادهسازی کنیم (+):
// First, checks if it isn't implemented yet. if (!String.prototype.format) { String.prototype.format = function() { var args = arguments; return this.replace(/{(\d+)}/g, function(match, number) { return typeof args[number] != 'undefined' ? args[number] : match ; }); }; } "Hello, {0}, I'm a simple {1}, Today is: {2}".format("World", "String", new Date()); // Output "Hello, World, I'm a simple String, Today is: Tue Dec 29 2015 10:21:10 GMT+0330 (Iran Standard Time)"
اما در ES 6 با کمک قابلیتی تحت عنوان template string این محدودیتها به طور قابل ملاحظهایی کاهش پیدا کرده است. در واقع یک template string، یک رشتهی جاوا اسکریپتی است که به جای (" ") و یا (' ') درون دو کاراکتر (` `) یا به اصطلاح back-tick character محصور خواهد شد. این ویژگی در سناریوهای مختلفی کاریرد دارد. از این ویژگی میتوانیم جهت الحاق رشتهها استفاده کنیم. به عنوان مثال میتوانیم کد زیر را:
let category = "music"; let id = 2112; let url = "http://apiserver/" + category + "/" + id;
با کمک template string به اینصورت بازنویسی کنیم:
let category = "music"; let id = 2112; let url = `http://apiserver/${category}/${id}`;
و یا میتوانیم مثال ابتدای مطلب را به اینصورت بازنویسی کنیم:
console.log(`Hello, ${"World"}, I'm a simple ${"String"}, Today is: ${new Date()}`);
همانطور که عنوان شد برای استفاده از این قابلیت باید رشتهی موردنظر را درون دو کاراکتر (` `) قرار دهیم. سپس درون این کاراکترها میتوانیم literal text و همچنین یکسری placeholder جهت جایگزین کردن با مقادیر و عبارات موردنظر داشته باشیم. این placeholderها نیز با استفاده از سینتکس { }$ قابل تعریف هستند. لازم به ذکر است که عبارت موردنظرمان را باید درون دو علامت { } بنویسیم. مقادیر درون این دو علامت میتوانند هر عبارت معتبر جاوا اسکریپتی باشند:
let a = 5; let b = 10; console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`); // "Fifteen is 15 and // not 20."
در کد فوق متغیرهای a و b درون placeholderهای مربوطه جایگزین خواهند شد. همانطور که مشاهده میکنید، این سینتکس نسبت به سینتکس + که برای الحاق رشتهها قبلاً مورد استفاده قرار میگرفت خیلی بهتر و خواناتر است.
به صورت خلاصه:
- کد درون placeholder میتواند هر عبارت جاوا اسکریپتی باشد.
- اگر مقدار درون placeholder یک رشته نباشد٬ توسط متد toString به رشته تبدیل خواهد شد.
- اگر بخواهید درون template string از یک کاراکتر backtick استفاده کنید٬ میتوانید به این صورت عمل کنید:
`\`` // یا "`"
Multiline Strings
console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2"
همانطور که مشاهده میکنید، template string از متنهای چندخطی نیز به خوبی پشتیبانی میکند. به عنوان مثال اگر رشتهی فوق را درون گیومه مینوشتیم میبایستی از سینتکس + برای الحاق دو خط فوق استفاده میکردیم:
console.log("string text line 1\n"+ "string text line 2"); // "string text line 1 // string text line 2"
محدودیتهای template strings
- به صورت خودکار کارکترهای خاص را برای شما escape نمیکند (جهت جلوگیری از آسیبپذیریهای XSS).
- به صورت کامل از کتابخانههایی جهت اعمال internationalization پشتیبانی نمیکند.
- جایگزینی برای کتابخانههایی مانند Mustache و Nunjucks نیست.
var x = 1; var y = 3; var result = upper `${x} + ${y} is ${x+y}`; console.log(result); // Output // 1 + 3 IS 4
let upper = function(strings, ...values){ let result = ""; for(var i = 0; i < strings.length; i++){ result += strings[i]; if(i < values.length){ result += values[i]; } } return result.toUpperCase(); };
strings = ["", " + ", " is ", ""]; values = [1, 3, 4];
یک مثال عملی
میخواهیم یک tag template ایجاد کنیم که به انتهای اعداد درون یک تملپت، مقدار "تومان" را اضافه کرده و خود عدد را نیز به صورت سه رقم سه رقم جدا کند. میخواهیم رشتهی زیر همراه با مقادیر آن:
var name = "سیروان عفیفی"; var price = 150000; var text = withToman `${name} با تشکر از خرید شما, مبلغ قابل پرداخت: ${price}`; alert(text);
function withToman(strings, ...values) { return strings.reduce( function (s, v, idx) { if(idx > 0) { if(typeof values[idx - 1] == "number") { s += `${values[idx - 1].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} تومان` } else { s += values[idx -1]; } } return s + v; }, ""); }
<a id="lnkNo1" href="#" rel="tooltip" title="some text here">some text here too!</a>
$('#lnkNo1').tooltip({ selector: '[rel=tooltip]' });
-پس در جستجوهای پیشرفته باید از روش معمول(like بدون استفاده از full text search) استفاده کرد و در جستجوهای تک کلمه ای مثل همین سایت باید از lucene(یا full text search) استفاده کرد،درسته؟
بوت استرپ (نگارش 3) چیست؟
- اگر خودتان مستقیما میخواهید این موارد را تغییر دهید، کلیه فایلهای LESS آن در مخزن اصلی کدهای بوت استرپ موجود هستند. در اینجا . برای نمونه فایل navbar.less آن.
اگر به فایلهای less آن دقت کنید، تمام آنها پارامتری هستند و هیچکدام دارای مقدار پیش فرضی نیستند. مقادیر پیش فرض مورد استفاده در فایل variables.less تعریف شدهاند. برای تغییر کلی فایل CSS نهایی فقط کافی است که مقادیر این فایل را تغییر دهید.
فایل نهایی که سبب کامپایل تمام تغییرات خواهد شد، فایل bootstrap.less است.
- استفاده از فایلهای LESS در نگارشهای جدید VS.NET سادهاست و به صورت توکار و خودکار، تغییرات را کامپایل کرده و فایل CSS نهایی را تولید میکند:
روی فایل bootstrap.less دوبار کلیک کنید (تمام فایلهای پوشه less سورس بوت استرپ به VS.NET اضافه شدهاند). اندکی صبر کنید تا کار کامپایل تمام شود. در صفحهای که باز میشود، دو ستون قابل مشاهده است. ستون سمت چپ، فایل less اصلی است و ستون سمت راست، خروجی CSS کامپایل شده نهایی.