۴ مطلب با کلمه‌ی کلیدی «JQuery» ثبت شده است
ساخت Scroll Top
بسم الله الرحمن الرحیم
طبیعتا همه شما دکمه های Top را در کنار صفحات وب سایت ها دیده اید که با کلیک بر روی آن می توانید به بالای سایت باز گردید.
در این آموزش می خواهیم کد این دکمه را در jQuery بنویسیم.
یک صفحه HTML ایجاد کنید و کد jQuery را به صفحه خود اضافه کنید.
jquery-1.8.0.min.js
سپس یک فایل js ایجاد کنید و کد زیر را در آن قرار دهید.
$.fn.scrollView = function () {
return this.each(function () {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
});
}
با استفاده از این کد ما ظرف مدت زمان یک ثانیه از محلی که بر روی لینک کلیک می کنیم به ابتدای صفحه انتقال پیدا می کنیم.
کد زیر را نیز در همین فایل قرار دهید.
$('#scroll-link').click(function (event) {
event.preventDefault();
$('#header').scrollView();
});
header ای دی element ای است که در ابتدای صفحه قرار می دهیم و می خواهیم پس از کلیک بر روی scroll-link به آن جا انتقال پیدا کنیم
حال این فایل را نیز به صفحه خود اضافه کنید.
در بالای صفحه یک div با id منحصر به فردی ایجاد کنید تا هنگامی که ما بر روی لینک پایین صفحه کلیک می کنیم به این div لینک شود.
<div id="header"></div>
در پایین صفحه یک تگ a به صورت زیر اضافه کنید
<a href="#" id="scroll-link">TOP</a>
در نهایت صفحه خود را با مطلبی پر کنید تا اسکرول آن نمایش داده شود
کد این آموزش را می توانید از این جا دانلود کنید.
پسورد فایل
EduOnline.ir
دانلود jQuery Scroll bar
حجم: 32.7 کیلوبایت
طراحی یک جدول HTML
بسم الله الرحمن الرحیم
طبیعتا همه با طراحی یک جدول ساده HTML آشنایی دارید، مثلا جدول زیر را در نظر بگیرید:
<table >
<tr>
<th >
Title
</th>
<th >
Price
</th>
</tr>
<tr>
<td >
CSS
</td>
<td >
1,000,000
</td>
</tr>
<tr>
<td >
HTML
</td>
<td >
12,000,000
</td>
</tr>
</table>
خوب حالا فکر کنید می خواهید به سطرهای جدولتان استایلی بدهید، در زمان های گذشته شما می بایست یک استایل تعریف می کردید مثلا
<style>
.blueColor
{
color:blue;
}
</style>
بعد آن را به سلول های جدول خود یعنی td می دادید.
اما باز طبیعتا شما نیز از Selector های HTML استفاده می کنید مثل زیر
<html>
<head>
<style>
tr
{
color:blue;
}
</style>
</head>
<body>
<table >
<tr>
<th >
Title
</th>
<th >
Price
</th>
</tr>
<tr>
<td >
CSS
</td>
<td >
1,000,000
</td>
</tr>
<tr>
<td >
HTML
</td>
<td >
12,000,000
</td>
</tr>
</table>
</body>
خوب اگر بخواهید برای سطر و ستون های زوج فرد استایل تعریف کنید یک راه این است که به صورت گذشته آن را به سلول ها بدهید.
اما می توانید این کار را نیز با استفاده از jQuery انجام دهید یعنی فقط شما استایل خود را تعریف کنید و سپس با استفاده از jQuery استایل خود را به تمامی سلول ها بدهید.
وقتی دارید به صورت داینامیک جدول ایجاد می کنید و یا سطر و ستون های شما به صورت داینامیک از پایگاه داده شما خوانده و ایجاد می شوند، این دستور می تواند بسیار به شما کمک کند.
$(document).ready(function(){
$("tr:odd").css("background-color","yellow");
});
</script>
حال مثال ما به صورت زیر کامل می شود
<html>
<head>
<style>
.oddStyle
{
color:blue;
}
.evenStyle
{
color: red;
}
</style>
<script>
$(document).ready(function () {
$("tr:even").addClass("even");
$("tr:odd").addClass("oddStyle");
});
</script>
</head>
<body>
<table >
<tr>
<th >
Title
</th>
<th >
Price
</th>
</tr>
<tr>
<td >
CSS
</td>
<td >
1,000,000
</td>
</tr>
<tr>
<td >
HTML
</td>
<td >
12,000,000
</td>
</tr>
</table>
</body>
شاید راه های ساده به نظر پیش پا افتاده و مبتدی باشند اما رفع یک نیاز می تواند اختراع یک دکمه باشد، سعی کنید این مطالب کوچک و پیش پا افتاده را برای افزایش سرعت کد نویسی و حل مسائل همیشه دنبال کنید
موفق باشید
تغییر Layout.cshtml_
بسم الله الرحمن الرحیم
آموزش asp.net mvc
هنگامی که شما یک پروژه جدید ایجاد می کنید به صورت پیش فرض قالب یا همان Layout شما که توسط MVC ایجاد می شود به صورت زیر خواهد بود
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="~/Temporary/jquery-1.8.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
این قالب یک Layout است که در پروژه MVC با نوع Internet ایجاد شده است ترجیحا برای اینکه به مشکل برنخورید بهتر است تغییراتی را در آن ایجاد کنید
مثال:
ممکن است شما یک تابع jquery یا javascript داشته باشید که در پروژه MVC شما کار نمی کند در صورتی که تابع شما صحیح است مثلا مثل تابع زیر
<script>
$(document).ready(function () {
$("#TestButton").click(function () {
alert("Huge Code :)");
});
});</script>خوب اگر این کد اجرا نشود پس یک جای کار مشکل دارد!!!
برای اجرا شدن این چنین کد های سنگینی :) بهتر است که Layout پیش فرض را کمی تغییر دهید. برای اجرا شدن این کد کافی است که فقط دستور زیر را که در پایین ترین خط body نوشته شده است به میان دستورات Head انتقال دهید
@Scripts.Render("~/bundles/jquery")آموزش Bundling
بسم الله الرحمن الرحیم
آموزش asp.net mvc
در این بخش قصد دارم در خصوص بهینه سازی و افزایش سرعت لود صفحات وب مباحثی را بررسی نماییم.
همان طور که می دانید اگر در یک سایت شما چندین فایل داشته باشید به ازای هر فایل می بایست یک درخواست به سرور ارائه شود و فایل مربوطه بازیابی گردد و این خود باعث طولانی شدن زمان لود صفحات می گردد، راهکاری که برای این مشکل ارائه گردیده است تبدیل چندین فایل به یک فایل می باشد که این روش متاسفانه فقط برای فایل های تصویری، رایج و مورد استفاده است.
واقعا بسیاری از ما نیز، هنوز از این روش رایج استفاده نمی کنیم کافی است که تمامی آیکون ها و تصاویر با سایز کوچکی که در سایت مورد استفاده می خواهیم قرار دهیم را به یک تصویر تبدیل کنیم.
ادامه مطلب...