آموزش تغییر رنگ سایت با یک دکمه بصورت لایو
مهندس محسن حسن پور
این پست با مسیر متخصص جی کوئری مرتبط است. مشاهده مسیر (Roadmap)
امروز می خواهیم به شما نحوه تغییر رنگ سایت با یک دکمه بصورت live را آموزش بدهیم شاید به خودی خود این آموزش خیلی کاربردی نباشد، اما ایده ای که به شما می دهد می تواند منتهی به ساخت چیز های جالبی شود، این آموزش به درخواست یکی از کاربران تاتژن ساخته شده است، با ما همراه باشید.
اگر تماشای این ویدئو از حوصله ی شما خارج است، در ادامه این پست با ما همراه باشید.
آموزش ایجاد تغییر رنگ سایت با یک دکمه بصورت لایو
کلیت کار به این صورت است که می خواهیم یک فیلد و یک دکمه ایجاد کنیم که با تایپ در این فیلد تغییر رنگ مورد نظر با فشردن دکمه ما به صفحه اعمال شود !
اگر کمی برایتان گیج کننده بوده باشد، نگران نباشید، مرحله به مرحله با ما پیش بیاید! مطابق هر آموزش تاتژن، در این آموزش نیز می خواهیم کار را در سه مرحله پیش ببریم.
مرحله 1 – کد های html
ابتدا می بایست با کد های HTML فیلد های مورد نظر را می سازیم، توجه فرمایید که در این آموزش می خواهیم به کمک جی کوئری این تغییر رنگ را اعمال کنیم لذا در ابتدای پروژه این کتابخانه را به پروژه خود اضافه کنید.
در قطعه کد زیر ما این کار را به کمک CDN انجام داده ایم، شما نیز می توانید به کمک CDN و یا دانلود و سپس قرار دادن فایل در کنار پروژه خود این کتابخانه را به پروژه خود اضافه کنید.
ضمنا به زودی، توسط آکادمی تاتژن CDN تمام کتابخانه ها و فریم ورک های معروف برایتان در صفحه CDN تاتژن قرار خواهد گرفت و شما می توانید از طریق این صفحه به سادگی کتابخانه های مختلف را به پروژه های خود اضافه کنید.
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<h1>Change background Color</h1>
<p>
Enter Hex Color
</p>
<div>
<input id="colorinput" type="text" name="color">
<button id="btn">changer</button>
</div>
<p>
<a class="copyright" href="https://tutsxen.net">
Tutsxen academy
</a>
</p>
</body>
مرحله 2 – کد های CSS ( استایل دهی )
این مرحله به استایل دهی می پردازیم خیلی نمی خوایم شلوغش کنیم ولی بهتره که هر طرحی که می زنید تا حد استانداردی از نظر بصری رضایت بخش باشد. اما اگر حوصله این کار را ندارید از این مرحله گذر کنید!
body{
background: #e1e1e1;
}
button , input{
padding:5px 10px;
}
.copyright{
margin-top:60px;
text-decoration : none;
}
مرحله 3 – کد های جی کوئری
بدون هیچ بحثی اول کد ها را ببینید بعد تفسیرش را بخوانید!
$(document).ready(function(){
$("#btn").click(function(){
var color = $('#colorinput').val();
$("body").css("background-color", color);
});
});
تفسیر :
فانکشن داکیومنت ردی ((document).ready) را که بخاطر دارید ! همان تابعی که به صفحه می گوید که وقتی لود و آماده شده ای این کد را بخوان!
یکم بیشتر برویم داخل کد هامان … کدی نوشتیم که در صورت کلیک بر روی عنصری که آیدی btn دارد ( یعنی همان دکمه یمان ) تابعی اجرا شود. خب این تابع باید چیکار کند ؟ بهش می گوییم که ابتدا محتویات درون فیلد ورودی را بگیرد بریزد در متغیری به اسم color، سپس در مرحله ی بعد بدنه سایت (یعنی body) بک گراندش را بکند همان متغیری که گرفته ای! به همین سادگی!
به پایان آموزش “آموزش تغییر رنگ سایت با یک دکمه بصورت live” رسیدیم. امیدوارم مورد توجه‌تان قرار گرفته باشد؛ شما می توانید از طریق بخش نظرات، سوالات و ابهامات خود را مطرح کنید.
مهندس محسن حسن پور
برنامه نویس | طراح سایت | متخصص سئو