سید محمد میرعالی
امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.
تکه کد lazy loading برای تصاویر وب شما
در این مطلب از سایت میرممد براتون تکه کد lazy loading برای تصاویر وب شما رو میذارم.لود تنبل تصاویر وبسایت باعث میشه سایت شما سرعت لود بیشتری داشته باشه.
کد و جای استفاده در قالب قبل از تگ بسته body :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<script>
$("img").lazyload();
</script>
</body></html>
امیدوارم کاربردی باشه براتون.اگر سوالی بود از بخش نظرات بپرسید.
تبدیل عدد به عدد کاما دار برای نمایش قیمت در سایت
در این مطلب از سایت میرممد براتون تکه کد تبدیل عدد به عدد کاما دار برای نمایش قیمت در سایت رو میذارم.
این کد باید بعد از کتابخانه jquery نوشته شود. کد:
$(".priceCama").each(function (u, elem) {
elem.innerText=elem.innerText.replace(/B(?=(d{3})+(?!d))/g, ",");
})
روش استفاده : فقط کافیه عدد رو داخل span با کلاس priceCama قرار بدید مثل کد زیر :
<span class="priceCama">100000</span>
100,000 خروجی
امیدوارم کاربردی باشه براتون.اگر سوالی بود از بخش نظرات بپرسید.
پیام اختصاصی برای مقدار اشتباه input در HTML 5
در این مطلب از سایت میرممد براتون تکه کد پیام اختصاصی برای مقدار اشتباه input در HTML 5 رو میذارم.برای این کار از ویژگی oninvalid در اینپوت استفاده میکنیم.
کد :
<input type="text" placeholder="min 4" oninvalid="this.setCustomValidity('باید مقدار بالای 4 حرف وارد کنید')" pattern=".{4,}">
در کد بالا اگر مقدار کمتر از 4 حرف وارد شود ارور شما را نمایش میدهد.
امیدوارم مفید باشه براتون.
پخش اتوماتیک ویدئو در مرورگر های فایرفاکس،کروم و اپرا
در این مطلب از سایت میرممد یک تکه کد جاوا اسکریپت آماده براتون میذارم که پخش اتوماتیک ویدئو در مرورگر های فایرفاکس،کروم و اپرا و... رو انجام میده.
<script>
var video = document.querySelector('video');
var promise = video.play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Show something in the UI that the video is muted
video.play();
});
}
</script>
امیدوارم مفید بوده باشه.
آموزش مخفی کردن اسکرول بار همراه با کد
در این مطلب از سايت ميرممد برای شما عزیزان آموزش مخفی کردن اسکرول بار همراه با کد را قرار دادم.
برای این کار کافیه از استایل زیر استفاده کنید :
.scroll-example {
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.scroll-example::-webkit-scrollbar {
width: 0px;
background: transparent; /* Chrome/Safari/Webkit */
}
برای مخفی کردن اسکرول از یک دایو خاص کلاس scroll-example رو به دایو مد نظر بدید:
<div class="scroll-example" >
.....
</div>
آموزش لود اطلاعات با اسکرول کردن در ASP.net MVC
در این مطلب از سايت ميرممد برای شما عزیزان لود شدن اطلاعات با اسکرول کردن توسط AJAX در ASP.net MVC همراه با نمونه کد رو توضیح میدم.
توضیح کلی : اول باید یک تابع داشته باشیم که وقتی اسکرول کردیم و به آخر مرورگر رسیدیم به ما اطلاع بده.دوم باید در تابع فرآخوانی مطالب رو بنویسیم که با AJAX اطلاعات رو بگیره.سوم باید اطلاعات گرفته شده رو در صفحه قرار بده.
آموزش DocType در HTML 5
در اين مطلب از سايت ميرممد با DocType در HTML 5 آشنا خواهيم شد.
در نسخه هاي قبلي HTML تعريف DocType به صورت زير بود :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "HTTP>
/www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "HTTP>
/www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "HTTP>
/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP>
/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ولي در HTML 5 به سادگي كد زير DocType تعريف ميشه :
<!DOCTYPE html>
يك نمونه كد HTML 5 همراه با تعريف DocType :
<!DOCTYPE html>
<html>
<head>
<title>HTML5 DocType </title>
</head>
<body>
<h1>HTML5 DocType </h1>
</body>
</html>
صفحه بندی در Bootstrap 4
در اين مطلب از سايت ميرممد با صفحه بندی در بوتسترپ نسخه چهار كار خواهيم كرد.نمونه کد pagination در بوتسترپ 4 :
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
خروجی کد بالا :
فقط کافیه کلاس های سبز رنگ در کد بالا رو به لیستمون بدیم.
آموزش کار با Progress Bar در Bootstrap 4
در اين مطلب از سايت ميرممد با Progress Bar در بوتسترپ نسخه چهار كار خواهيم كرد.كلاس Progress Bar براي نمايش مقدار باقيمانده از يك فرايند استفاده ميشه.نمونه كد Progress Bar در بوتسترپ :
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
خروجي كد بالا :
براي تغيير اندازه درصد پيشرفت بايد مقدار width:70% را تغيير دهيم و براي تغيير متن درون Progress Bar بايد 70% را تغيير دهيم.Progress Bar داراي رنگ بندي هاي بوتسترپي نيز هست كه در ادامه توضيح ميدم.
آموزش کار با Badge در Bootstrap 4
در اين مطلب از سايت ميرممد با Badge در بوتسترپ نسخه چهار كار خواهيم كرد.كلاس Badge براي اضافه كردن اطلاعات اضافي به يك المنت استفاده ميشه.مثلا در سايت در بخش نظرات،تعداد نظرات جديد رو ميشه با كلاس Badge بوتسترپ نشون بديم.خب يك نمونه كد از Badge در بوتسترپ نسخه چهار :
<h5>نظرات جديد <span class="badge badge-secondary">3</span></h5>
<h6>نظرات جديد <span class="badge badge-secondary">8</span></h6>
خروجي كد بالا :
نظرات جديد 3
نظرات جديد 8
آموزش کار با Button در Bootstrap 4
در اين مطلب از سايت ميرممد با Button در بوتسترپ نسخه چهار كار خواهيم كرد.دکمه ها در بوتسترپ 4 شامل رنگ بندی های زیر میباشند :
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
خروجی کد بالا به ترتیب :
کلاس های دکمه ای که در بالا با رنگ سبز در کد مشخص شدند رو میتوان در المنت های a و Button و input به شکل زیر استفاده کرد :
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
آموزش کار با Alerts در Bootstrap 4
در اين مطلب از سايت ميرممد با Alerts در بوتسترپ نسخه چهار كار خواهيم كرد.كلاس Alerts وقتي به يك div داده ميشه ، یک پیغام زیبا به کاربر نشون داده میشه.تکه کد استفاده از Alerts در بوتسترپ چهار :
<div class="alert alert-success">
به سایت میر ممد خوش آمدید
</div>
خروجی کد بالا :
آموزش کار با Jumbotron در Bootstrap 4
در اين مطلب از سايت ميرممد با Jumbotron در بوتسترپ نسخه چهار كار خواهيم كرد.در واقع كلاس Jumbotron وقتي به يك div داده ميشه، يك حاشيه ي داخلي و يك بكگراند به اون div داده ميشه.تكه كد استفاده از كلاس Jumbotron در بوتسترپ 4 :
<div class="jumbotron">
<p>آموزش طراحي سايت در سايت ميرممد</p>
</div>
خروجي كد بالا :
آموزش طراحي سايت در سايت ميرممد
آموزش کار با جداول در Bootstrap 4
در اين مطلب از سايت ميرممد با كلاس هاي جدول در Bootstrap 4 كار ميكنيم و يك سري تكه كد مربوط به جداول در بوتسترپ نسخه چهار رو براتون قرار ميدم.
شما فقط کافیه کلاس Table رو به تگ جدولتون بدید مثل کد زیر :
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
خروجی کد بالا :
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
همونطور که میبینید یک ظاهر زیبایی به جدول شما میده فقط با اضافه کردن کلاس table به جدولتون.
آموزش استفاده از Tooltip در Bootstrap 4
در اين مطلب از سايت ميرممد شما رو با كلاس Tooltip در بوتسترپ چهار آشنا ميكنم.وقتي كلاس Tooltip رو به يك المنت ميديم اگر موس رو روي آن المنت ببريم يك پاپ آپ مسيج كوچيك كنار المنت باز ميشه و ميتونيد پيام خودتونو توش به كاربر نشون بديد.يك نمونه دكمه ميذارم در پايين تا منظورمو خوب متوجه بشيد :
همونطور كه ميبينيد وقتي روي دكمه بريد به شما پيغام نشون ميده كه بش ميگن تولتيپ.
آموزش استفاده از تگ video در HTML5
در اين مطلب از سايت ميرممد نحوه ي استفاده از تگ video در HTML5 رو براتون قرار ميدم.تگ video زماني استفاده ميشه كه بخواييم يك كليپ رو به صورت آنلاين در سايت قرار بديم.حتي زيرنويس هم ميشه به اين قابليت جديد در html 5 اضافه كرد.
كد زير يك تكه كد از تگ video در اچ تي ام ال 5 هست كه در آن از دو كيفيت تصويري mp4 و ogg استفاده شده و همچنين دوتا زيرنويس با زبان انگليسي و نروژي رو هم اضافه كرده :
<video width="320" height="240" controls>
<source src="klip.mp4" type="video/mp4">
<source src="klip.ogg" type="video/ogg">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
فقط كافيه در كد بالا لينك كليپ خودتونه به شكل زير اضافه كنيد :
<source src="لينك ويدئو" type="فرمت ويدئو">
در كد اولي كه قرار دادم از دوتا كد سورس استفاده كردم كه هر كدوم از سورس ها يك فرمت خاصي از همون كليپ هستش شما ميتونيد از چند فرمت با كيفيت هاي متفاوت براي كليپتون استفاده كنيد.
آموزش كار با تصاوير در Bootstrap 4
در اين مطلب از سايت ميرممد با كلاس هاي تصاوير در Bootstrap 4 كار ميكنيم و يك سري تكه كد مربوط به تصاوير در بوتسترپ نسخه چهار رو براتون قرار ميدم.
كلاس Rounded در Bootstrap 4 :
وقتي كلاس Rounded را به يك عكس ميديم گوشه هاي تصوير گرد ميشه بهتره با يك مثال منظورمو متوجه بشيد.اين نمونه كد كلاس Rounded در بوتسترپ چهار هستش كه به عكس خودم دادم :
<img src="https://rozup.ir/view/2664254/f8e93a67-914b-4c10-be27-ef1929a35a5b%20-%20Copy.jpg" class="rounded" alt="سيد محمد ميرعالي" >
نتيجه تكه كد بالا :
همونطور كه ميبينيد گوشه هاي عكس من گرد شده فقط با دادن كلاس Rounded به عكس.
آموزش كار با رنگ ها در Bootstrap 4
در اين مطلب از سايت ميرممد قصد دارم شما را با كلاس رنگ ها در Bootstrap 4 آشنا كنم.در نسخه ي چهارم بوتسترپ چندين رنگ به رنگ هاي نسخه سوم اضافه شده كه سعي ميكنم تمامي آنها را با مثال همراه با تكه كد براي شما دوستان قرار بدم.
رنگ هاي موجود در بوتسترپ 4 شامل رنگ ها در عكس زير ميباشد :
كلاس هاي رنگ متن در بوتسترپ چهار شامل موارد زير هستند :
.text-muted .text-primary .text-success .text-info .text-warning .text-danger .text-secondary .text-white .text-dark .text-light
كه كلاس رنگ text-body رنگ انتخاب شده ي پيش فرض در بوتسترپ چهار ميباشد.