اشتراکها
تم ادمین Angular 6 و Bootstrap 4
تم آنگولار راستچین و دارای 3 نوع تم به همراه ویژگیهای زیر
- Angular 6+ & Typescript
- Bootstrap 4+ & SCSS
- Responsive layout
- RTL support
- High resolution
- Flexibly configurable themes with hot-reload (2 themes included)
- Authentication module with multiple providers
- Lots of awesome features:
- Buttons
- Modals
- Popovers
- Icons
- Typography
- Animated searches
- Forms
- Tabs
- Notifications
- Tables
- Maps
- Charts
- Editors
And many more!
اشتراکها
نگاهی به کیفیت کدهای OpenSSL
اشتراکها
NET Core 2.1 RC 1. منتشر شد
در این قسمت روش جایگزین کردن متد css جیکوئری را با کدهای خالص جاوا اسکریپتی بررسی میکنیم.
کار با Inline Styles
در این مثال میخواهیم با استفاده از جاوا اسکریپت، المانهای h2 و h3 را یافته و سپس h2ها را آبی و h3ها را سبز کنیم:
برای تغییر inline style المانها، از خاصیت style آنها استفاده میشود که در نهایت این شیوهنامههای جدید توسط ویژگی style به همان المان اضافه میشوند:
خاصیت style جزو استاندارد DOM Level 2 است که در سال 2000 تصویب شدهاست (از زمان IE 8.0 به بعد در دسترس است). باید دقت داشت که از این روش بیشتر در کتابخانههای جاوا اسکریپتی برای شرایطی خاص، جهت تغییر پویای رابط کاربری استفاده میشود و هر تغییری که در اینجا اعمال شود، مقادیر قبلی موجود را بازنویسی میکند.
همچنین اگر بخواهیم به یک المان چندین شیوهنامه را انتساب دهیم، روش کار به صورت زیر است:
پس از یافتن المانهای مدنظر، تنها کافی است نام شیوهنامهی مدنظر را به خاصیت style اضافه و مقدار دهی کنیم. در اینجا نام شیوهنامهای که «کبابی» باشد، مانند font-weight، به صورت camel case مانند fontWeight درج خواهد شد؛ هرچند از همان نام اصلی نیز میتوان به صورت زیر استفاده کرد:
روش دیگری نیز برای انجام این تغییرات چندتایی وجود دارد:
خاصیت style یک المان، از نوع اینترفیس CSSStyleDeclaration است که دارای خاصیت استاندارد cssText نیز میباشد. توسط این خاصیت میتوان چندین شیوهنامه را به صورت یکجا به عنصری انتساب داد و یا تمام آنها را خواند.
کار با Style Sheets
Inline styles تنها روش کار با شیوهنامهها نیست. روش صحیح و قابل مدیریت کار با شیوهنامهها استفاده از فایلهای style sheets است. برای مثال تغییرات قبل را میتوان در فایلی به نام styles.css و با محتوای زیر ایجاد کرد:
و سپس آنرا به صفحه متصل نمود:
و یا حتی میتوان این شیوه نامه را به صورت inline نیز به ابتدای صفحه اضافه نمود:
اما ممکن است در برنامه بخواهیم امکان تغییر پویای قالب را به کاربران بدهیم. در یک چنین حالتی اعمال این نوع شیوهنامهها توسط جاوا اسکریپت مفهوم پیدا میکند:
اولین سطر، اولین تگ style اضافه شده به صفحه را یافته (این style میتواند inline و یا لینک شدهی توسط یک فایل باشد) و سپس شیوه نامهی جدیدی را توسط متد insertRule، در انتهای آن به صورت پویا درج میکند.
مخفی کردن و نمایش دادن المانها در صفحه
جیکوئری به همراه متدهای hide و show است که کار مخفی کردن و یا نمایش دادن مجدد یک المانرا انجام میدهند:
در کل روشهای زیادی برای مخفی کردن یک المان وجود دارند. برای مثال میتوان opacity آنرا به صفر تنظیم کرد و یا position آنرا به absolute و سپس آنرا در مختصاتی خارج از صفحه قرار داد. اما عموما خاصیت display را به none تنظیم میکنند. همچنین در استاندارد W3C HTML5، خاصیت جدید hidden از نوع boolean نیز به المانها اضافه شدهاند که دقیقا برای همینمنظور بکار میرود. مزیت مهم این خاصیت نه فقط استاندارد بودن آن، بلکه بالابردن دسترسی پذیری المانهای صفحه توسط برنامههای «screen reader» مخصوص معلولین است. بنابراین با استفاده از جاوا اسکریپت خالص برای مخفی کردن یک المان میتوان نوشت:
این روش 25 بار سریعتر از متد hide جیکوئری است! از این جهت که jQuery در پشت صحنه مدام متد window.getComputedStyle را برای موارد خاص و بحرانی کار با شیوهنامهها فراخوانی میکند (در تمام متدهایی که با CSS کار میکنند) و این متد تاثیر منفی بر روی کارآیی برنامه دارد.
و چون خاصیت hidden از نوع Boolean است، ذکر آن در یک المان یعنی تنظیم آن به true و حذف آن، یعنی تنظیم آن به false یا نمایش مجدد المان در اینجا:
اندازهگیری تاثیر شیوهنامهها بر روی طول و عرض المانها
CSS Box Model یک چنین تعریفی را دارد:
زمانیکه از متدهای ()width و ()height جیکوئری بر روی المانی استفاده میشود، صرفا طول و عرض قسمت «content» را دریافت خواهید کرد.
برای این منظور در جاوا اسکریپت خالص این خواص در اختیار ما است:
روش اندازه گیری Content + Padding توسط جاوا اسکریپت خالص:
این خواص هرچند اخیرا به استانداردهای CSS به صورت رسمی اضافه شدهاند، اما از زمان IE 6.0 پشتیبانی میشدهاند و با متدهای ()innerWidth و ()innerHeight جیکوئری قابل مقایسه هستند.
روش اندازه گیری Content + Padding + Border توسط جاوا اسکریپت خالص:
این خواص از زمان IE 8.0 پشتیبانی میشدهاند.
کار با Inline Styles
<h1>News</h1> <div>Welcome to our site!</div> <h2>World</h2> <h3>Title 1</h3> <div>description 1.</div> <h2>Science</h2> <h3>Title 2</h3> <div>description 2.</div>
var headings = document.querySelectorAll('h2, h3'); for (var i = 0; i < headings.length; i++) { if (headings[i].tagName === 'H2') { headings[i].style.color = 'blue'; } else { headings[i].style.color = 'green'; } }
<h2 style="color: blue">….</h2> <h3 style="color: green">….</h3>
همچنین اگر بخواهیم به یک المان چندین شیوهنامه را انتساب دهیم، روش کار به صورت زیر است:
<h2>World</h2> ... <h2>Science</h2> <script> var headings = document.querySelectorAll('h2'); for (var i = 0; i < headings.length; i++) { headings[i].style.color = 'blue'; headings[i].style.fontWeight = 'bold'; } </script>
headings[i].style['font-weight'] = 'bold';
var headings = document.querySelectorAll('h2'); for (var i = 0; i < headings.length; i++) { headings[i].style.cssText = 'color: blue; font-weight: bold'; }
کار با Style Sheets
Inline styles تنها روش کار با شیوهنامهها نیست. روش صحیح و قابل مدیریت کار با شیوهنامهها استفاده از فایلهای style sheets است. برای مثال تغییرات قبل را میتوان در فایلی به نام styles.css و با محتوای زیر ایجاد کرد:
h2 { color: blue; } h3 { color: green; }
<link href="styles.css" rel="style sheet">
<style> h2 { color: blue; } h3 { color: green; } </style>
var sheet = document.styleSheets[0]; sheet.insertRule('h2 { font-style: italic; }', sheet.cssRules.length - 1);
مخفی کردن و نمایش دادن المانها در صفحه
جیکوئری به همراه متدهای hide و show است که کار مخفی کردن و یا نمایش دادن مجدد یک المانرا انجام میدهند:
// hide an element $element.hide(); // show it again $element.show();
element.setAttribute('hidden', '');
و چون خاصیت hidden از نوع Boolean است، ذکر آن در یک المان یعنی تنظیم آن به true و حذف آن، یعنی تنظیم آن به false یا نمایش مجدد المان در اینجا:
element.removeAttribute('hidden');
اندازهگیری تاثیر شیوهنامهها بر روی طول و عرض المانها
CSS Box Model یک چنین تعریفی را دارد:
زمانیکه از متدهای ()width و ()height جیکوئری بر روی المانی استفاده میشود، صرفا طول و عرض قسمت «content» را دریافت خواهید کرد.
برای این منظور در جاوا اسکریپت خالص این خواص در اختیار ما است:
<style> .box { padding: 10px; margin: 5px; border: 3px solid; display: inline-block; } </style> <span class="box">a box</span>
// returns 38 var clientHeight = document.querySelector('.box').clientHeight; // returns 55 var clientWidth = document.querySelector('.box').clientWidth;
روش اندازه گیری Content + Padding + Border توسط جاوا اسکریپت خالص:
// returns 44 var offsetHeight = document.querySelector('.box').offsetHeight; // returns 61 var offsetWidth = document.querySelector('.box').offsetWidth;
Add a new User
Add Quicklist Link
Add Top Link Bar Item
Add Web Parts
Setup Anonymous Access
Assign Tasks
Change Quicklist Order
Change Title Description & Logo
Change Top Link Bar Order
Content Editor Web Part
Create a Blog Site
Create a Group
Create List Template
Create a Meeting Site
Create a Site Collection (Admin)
Create a Site Template
Create a Team Site
Create a Unique Site
Create a Web Part Page
Create a Wiki Site
Deassign a Task
Delete an Email Alert
Delete a Group
Delete a Site Collection (Admin)
Delete Top Link Bar Item
Enable Tree View
Explorer View
Logout
New Theme
Reset Password
Regional Settings
Restore Deleted Item
Set Doc Permissions
Set Email Alert
Set Library Permissions
Set List Permissions
Check Site Usage
SPD Backup Site
Ref.
اشتراکها
NET Core 3.0 Preview 6. منتشر شد
Today, we are announcing .NET Core 3.0 Preview 6. It includes updates for compiling assemblies for improved startup, optimizing applications for size with linker and EventPipe improvements. We’ve also released new Docker images for Alpine on ARM64.
در قسمت اول مشاهده کردیم که به چه صورت میتوان از دکمههای CSS ایی بجای دکمههای معمولی در ASP.NET MVC استفاده کنیم. در این قسمت قصد داریم قابلیت مهم زیر را نیز به این تغییر اضافه نمائیم:
کاربر امکان دوبار کلیک کردن همزمان را بر روی دکمه ارسال، نداشته باشد
انجام اینکار با jQuery بسیار ساده است:
به این ترتیب کاربر امکان کلیک مجدد را بر روی دکمه ارسال، از دست خواهد داد.
و اینکار ... یک مشکل را اضافه میکند:
اگر نتیجه اعتبار سنجی سمت کاربر فرم، تکمیل نشده باشد، کاربر پس از رفع مشکل دیگر نمیتواند فرم را ارسال کند. به همین جهت باید به نحوی اطمینان حاصل کرد که آیا اعتبارسنجی موفقیت آمیز بوده یا خیر؛ سپس دکمه را غیرفعال کنیم.
برای پیاده سازی این امر باید jQuery Validator همراه با ASP.NET MVC را به صورت دستی فراخوانی کرده و نتیجه آنرا ارزیابی کنیم:
در متد جاوا اسکریپتی validateThisForm، سیستم jQuery Validator به صورت دستی فراخوانی شده و سپس نتیجه عملیات بازگشت داده میشود.
در متد customSubmit، ابتدا وضعیت اعتبار سنجی فرم بررسی شده و سپس بر این اساس تصمیم گرفته خواهد شد که آیا باید دکمه غیرفعال شود و سپس فرم ارسال گردد یا خیر.
یک مثال از استفاده آن:
دریافت کدهای کامل این مثال:
MvcApplication27.7z
کاربر امکان دوبار کلیک کردن همزمان را بر روی دکمه ارسال، نداشته باشد
انجام اینکار با jQuery بسیار ساده است:
$(el).prop("onclick", null).attr("onclick", null);
و اینکار ... یک مشکل را اضافه میکند:
اگر نتیجه اعتبار سنجی سمت کاربر فرم، تکمیل نشده باشد، کاربر پس از رفع مشکل دیگر نمیتواند فرم را ارسال کند. به همین جهت باید به نحوی اطمینان حاصل کرد که آیا اعتبارسنجی موفقیت آمیز بوده یا خیر؛ سپس دکمه را غیرفعال کنیم.
برای پیاده سازی این امر باید jQuery Validator همراه با ASP.NET MVC را به صورت دستی فراخوانی کرده و نتیجه آنرا ارزیابی کنیم:
function validateThisForm(formId) { var val = $(formId).validate(); val.form(); return val.valid(); } function customSubmit(el, formId) { if (!validateThisForm(formId)) return; $(el).prop("onclick", null).attr("onclick", null); $(formId).submit(); }
در متد customSubmit، ابتدا وضعیت اعتبار سنجی فرم بررسی شده و سپس بر این اساس تصمیم گرفته خواهد شد که آیا باید دکمه غیرفعال شود و سپس فرم ارسال گردد یا خیر.
یک مثال از استفاده آن:
@model MvcApplication27.Models.User @{ ViewBag.Title = "Index"; } <h2> Index</h2> @using (Html.BeginForm(Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "MyForm" }))) { @Html.ValidationSummary(true) <fieldset> <legend>User</legend> <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <span style="margin-top:7px;" onclick="customSubmit(this, '#MyForm')" class="btn btn-info">ارسال</span> </fieldset> }
MvcApplication27.7z