آموزش

تفریحی ماه استار -عکس ,فال,اس ام اس,دانلود

  

تغییر کلاس عناصر با استفاده از JQuery

بنام خدا – سلام

همانطور که می دانید ، به علت عدم رعایت استاندارد توسط مرورگرها و انحراف این مرورگر ها از مسیر اصلی و استاندارد JavaScript ، امروز JQuery به کلی جای مادر و سازنده اصلی خود را پر کرده است. امروز قصد داریم تا یکی از بزرگترین اشکالات JavaScript یعنی تغییر کلاس یک عنصر را با JQuery حل و فصل کنیم.

اول باید این توضیح را خدمت آن دسته از عزیزانی که موضوع امروز را دقیق متوجه نشده اند عرض کنم که در طراحی ، گاهی اوقات نیاز دارید که در شرایط خاص ، کلاس یک عنصر را تغییر دهید. برای مثال یک DIV را فرض کنید که متد class برای آن ( به فرض ) myClass در نظر گرفته شد است :

<div class=”myClass”></div>

حال می خواهیم در شرایط مختلفی چون ” قرار گرفتن موس روی عنصر ” ( MouseOver ) ، کلیک ( Click ) ، دابل کلیک ( DoubleClick ) یا … مقدار myClass را به NewClass تغییر دهیم. برای این کار ، پیش از حضور JQuery ، جاوا اسکریپت راه های مختلفی را ارائه کرده بود که متاسفانه به علت عدم رعایت استاندارد توسط مرورگرها ، این کاربرد کلیدی از کار افتاده بود. حال امروز قصد داریم با استفاه از JQuery با این مشکل برای همیشه خداحافظی کنیم.

برای شروع ، دو کلاس مختلف را به نام های myClass و NewClass تعریف کنید. برای مثال ، بنده کلاس ها را با متد های زیر تعریف کرده ام :

.myClass {
background: #000 ;
color: #FFF ;
}

.NewClass {
background: #FFF;
color: #000 ;
}

در واقع در کلاس myClass ، رنگ پشت زمینه عنصر مشکی و نوشته سفید است. حال آن که در NewClass ، نوشته سیاه و پشت زمینه سفید است.

حال یک Input قرار دهید تا به عنوان کلید عملگر ما در صفحه نقش داشته باشد و البته زمانی که بر روی آن کلیک شد ، تابع myFun را اجرا کند :

<input type=”button” onClick=”myFun()” value=”Ok” />

حال DIV خود را نیز به صفحه اضافه کنید و یک متن ساده در آن قرار دهید . فراموش نکنید که برای Select این DIV توسط JQuery نیازمند معرفی یک ID برای DIV خود نیز هستیم: ( در اینجا ما مقدار ID را myDIV قرار داده ایم )

<div class=”myClass” id=”myDiv”>GooyaIT.com</div>

دقت نمایید که این کد کل صفحه ای است که تا به حال باید داشته باشید : ( البته ، در کد ، JQuery را نیز فراخوانی کرده ایم )

<!DOCTYPE html>
<html>
<head>
<style>

.myClass {
background: #000 ;
color: #FFF ;
}

.NewClass {
background: #FFF;
color: #000 ;
}

</style>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<div>GooyaIT.com</div>
<input type=”button” value=”Ok” />
</body></html>

* تا به اینجا ، ما در صفحه خود ، ۲ کلاس تعریف کرده ایم ; یک DIV قرار داده ایم و یک کلید که با کلیک بر روی آن ، تابع myFun ( که هنوز آن را تعریف نکرده ایم ) را اجرا کند.

حال وقت آن رسیده تا تابع myFun  را تعریف کنیم. این تابع را در بین کدهای <head> و </head> خود قرار می دهیم تا پیش از بارگزاری صفحه ، آماده به کار باشند.

در JQuery برای اضافه کردن یا تغییر کلاس یک عنصر از تابع addClass استفاده می شود. به صورت زیر :

$(“selectObject”).addClass(“ClassName”)

در قسمت selectObject باید عنصر خود ( که در مثال ما مقدار #myDIV است ) و در قسمت ClassName باید نام کلاس مورد نظر ( که در مثال ما مقدار NewClass است ) را انتخاب کنیم.

حال به مثال خود باز می گردیم. برای معرفی تابع myFun به صورت کد زیر عمل نمایید :

<script language=”javascript” type=”text/javascript”>
function myFun()
{
$(“#myDiv”).addClass(“NewClass”);
}
</script>

با اینکار ، زمانی که کاربر روی کلید ما ، کلیک می کند تابع myFun اجرا می شود و به myDiv کلاس NewClass معرفی می شود.

بیایید با هم مثال سایت JQuery را در این باره بررسی کنیم :

<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:blue; }
.highlight { background:yellow; }
</style>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$(“p:last”).addClass(“selected”);
</script>
</body>
</html>

در این مثال سه کلاس تعریف شده است :  کلاس عمومی برای p ( همه پاراگراف ها ) ، کلاس selected ( با رنگ نوشته blue ) و highlight ( با پشت زمینه yellow ). سپس سه پاراگراف قرار داده شده اند. و بعد از آن با  کد JQuery پاراگراف آخر انتخاب شده و کلاس selected به آن معرفی شده است. نتیجه نهایی این است مقدار class آخرین پاراگراف به seleted تغییر کرده و رنگ نوشته آن blue می شود. نتیجه به صورت زیر است :

Hello

and

Goodbye

این ساده ترین مثال ممکن برای این کار بود. فرض کنید بخواهیم دو کلاس را برای یک عنصر معرفی کنیم ! برای اینکار باید کلاس ها را در تابع addClass با Space از هم متمایز کنیم :

$(“p:last”).addClass(“selected highlight”);

اگر کد بالا را در مثال قبلی به کار ببریم ، عنصر myDiv علاوه بر اینکه رنگ نوشته blue خواهد داشت پشت زمینه آن نیز yellow خواهد شد . نتیجه :

Hello

and

Goodbye

نکته نهایی قابل ذکر این است که ، می توان با تابع removeClass یک کلاس را از یک عنصر حذف کرد.

مطالب مرتبط

ادامه مطلب icon برچسب ها: , , , , ,

آموزش درست کردن وبلاگ

آموزش تصویری درست کردن وبلاگ در بلاگفا (blogfa.com)

createBlog آموزش درست کردن وبلاگ

ایجاد وبلاگ در سایت بلاگفا:

سایت بلاگفا از جمله سایتهاییه که سرویس رایگانی رو برای ایجاد وبلاگ ارائه میده. بلاگفا دومین سرویس وبلاگ فارسی زبان است که روز به روز پیشرفت قابل توجهی داشته و هر روز به کاربران اون اضافه میشه.

عضویت در سایت بلاگفا:

اولین قدم برای داشتن وبلاگ عضویت در سایت بلاگفاست. برای این کار روی گزینه ایجاد وبلاگ جدید کلیک کنید.

www.blogfa.com/NewBlog.aspx

با این کار فرم ثبت نام برای شما باز میشه. که حاوی فیلدهایی است.

ـ استفاده از حروف فارسی در شناسه کاربری مجاز نیست.

ـ عنوان وبلاگ شما معرف شخصیت و طرز فکر شماست. در انتخاب آن دقت کنید.

ـ کلمه عبور یا همون Password نسبت به حروف کوچک و بزرگ حساس است.

ـ در نوشتن آدرس پست الکترونیتون دقت کنید. چون بعد از ارسال فرم عضویت نامه ای به ایمیلتون ارسال میشه تا Password و سایر اطلاعات وارده برای شما ارسال شود.

و فیلدهای دیگر را هم بنا به در خواست بلاگفا پر کنید و پس از قبول شرایط سرویس دهی روی دکمه قبول قوانین سایت و ایجاد وبلاگ کلیک کنید.

تصویر۱

16 آموزش درست کردن وبلاگ

 free آموزش درست کردن وبلاگ

ورود به سایت:

در همان صفحه اول بلاگفا در قسمت سمت راست می تونید با وارد کردن نام کاربری و کلمه عبورتون و سپس زدن دکمه ورود وارد مدیریت بلاگتان شوید.

 

تصویر۲

23 آموزش درست کردن وبلاگ

اکنون یک صفحه وبلاگ در این سایت به شما اختصاص داده شده که آماده ثبت نوشته هایتان می باشد. در تصویر ۳ ابتدا در کادر عنوان مطلب موضوع مورد نظر را وارد کنید. در کادر مرکزی نیز شروع به نوشتن یادداشت مورد نظر پیرامون همان عنوان مطلب موضوع نمائید. از آیکونهای ویرایشی بالای این کادر نیز میتوانید استفاده کنید. با کلیک روی صورتک خندان میتوانید سایر علائم احساسی را در متن نوشته هایتان بکار ببرید و… در نهایت روی دکمه ثبت مطلب و بازسازی وبلاگ کلیک کنید.

تصویر۳

32 آموزش درست کردن وبلاگ

 free آموزش درست کردن وبلاگ

افزودن لینک در وبلاگ:

اگر بخواهید کلمه یا عبارتی از متن وبلاگتون رو به صفحه خاصی در وب لینک کنید کافیست پس ازانتخاب متن مورد نظرتون روی آیکون افزودن لینک کلیک کنید. با این کار پنجره ای مطابق شکل چهار باز میشود.

تصویر۱

42 آموزش درست کردن وبلاگ

در کادر مربوط به این قسمت باید آدرس Url صفحه ای که می بایست لینک به آن ارجاع داده شود را تایپ نمائید.

 free آموزش درست کردن وبلاگ

افزودن تصویر به وبلاگ:

به علت اینکه عکسها فضای زیادی روی اینترنت اشغال می کنند بلاگفا و بقیه خدمات دهنده های وبلاگ به شما اجازه نمی دهند که روی فضای وبلاگ خود عکس ارسال کنید.

به دو صورت می توان تصویر را در صفحه وبلاگ جای داد:

۱- قرار دادن تصویری دلخواه که در یک صفحه وب دیگر قرار دارد.

۲- قرار دادن تصویری که روی صفحه وب هیچ سایتی نیست.

توضیح روش اول: عکسهایی که می خواهید به یادداشتها یتان اضافه کنید یا روی اینترنت هستند یا روی کامپیوتر شخصی شما. اگر عکس مورد نظر روی یک سایت و یک صفحه وب باشد کافی است روی آن راست کلیک کرده و گزینه Properties را انتخاب نمائید. اکنون تمام عبارتی را که مقابل( Address(Url با موس به دقت انتخاب کنید. روی عبارت انتخاب شده راست کلیک کنید و گزینه Copy را انتخاب نمائید.

حالا به صفحه یادداشت ها بروید. در مکان مناسب که می خواهید تصویر درج شود کلیک کنید. سپس روی گزینه افزودن تصویر کلیک کنید. پنجره ای مطابق شکل پنج باز می شود. آدرس کپی شده را در کادر آدرس تصویر Paste کنید. با این کار عکس مورد نظر به یادداشتتان افزوده می شود. برای فایلهای Animation Gif می توانید همین کار را انجام دهید.

توضیح روش دوم: برای ارسال عکس های خود به اینترنت و قرار دادن آن در وبلاگ شخصی می توانید عکس مورد نظر خود را از طریق به راحتی این سایت ارسال کنید:

up.alamto.com

 free آموزش درست کردن وبلاگ

فرستادن یادداشت:

لازم به توضیح است که جهت صرفه جویی در وقت و هزینه در نگارش متن های طولانی و پر حجم ابتدا متن مورد نظر را در نرم افزار Word ویا Word Pad تایپ کرده و سپس در موقع باز شدن صفحه مدیریت وبلاگ و پیغام ها ( شکل۳ ) متن مورد نظرتان را از محل اصلی Copy نموده و داخل صفحه پست مطلب جدید Paste نمائید. پس از اینکه متن خود را نوشته و تصاویر و متن های خود را اضافه کردید روی ثبت مطلب و بازسازی وبلاگ کلیک کنید. اکنون وبلاگ شما آماده است و می توانید آن را مشاهده نمائید.

free آموزش درست کردن وبلاگ

گزینه (( مشاهده وبلاگ )):

با کلیک روی این گزینه ( شکل۳ ) صفحه وبلاگ شما با الگوی پیش فرض سایت به نمایش در می آید. در این صفحه بازدید کنندگان قادر هستند با کلیک روی نظر بدهید نظرشان را در رابطه با مطلب شما بیان کنند.

free آموزش درست کردن وبلاگ

گزینه حذف وبلاگ:

جهت حذف وبلاگ با تمامی یادداشت های آن کافیست پس از ورود به وبلاگ خود روی گزینه حذف وبلاگ کلیک کنید.

free آموزش درست کردن وبلاگ

انتخاب قالب:

پاتوق: پس از اینکه یک وبلاگ برای خود ساختید می توانی به سلیقه خود یک قالب یا الگو یا Template از میان قالب های موجود در سایت انتخاب نمائید. برای این کار ابتدا روی گزینه انتخاب قالب وبلاگ کلیک کنید. در صفحه جدید الگو های مختلف را با نام آنها مشاهده می کنید. با کلیک روی دکمه انتخاب قالب می توانید الگوی مورد نظر را برای وبلاگ خود در نظر بگیرید. هر الگو دارای ویزگیهای خاصی است. با انتخاب الگوی جدید الگوی قبلی پاک شده و الگوی جدید جایگزین آن خواهد شد. پس از انتخاب قالب دلخواه جهت مشاهده وبلاگ خود روی گزینه مشاهده وبلاگ کلیک کنید.

free آموزش درست کردن وبلاگ

ویرایش قالب:

برای ایجاد هر تغییری در شکل ظاهری وبلاگتان باید قالب آن را تغییر دهید. ممکن است هیچ کدام از قالب های آماده موجود نظر شمارا جلب نکند یا اینکه بخواهید لینک سایتها و وبلاگها دیگر را به وبلاگتان اضافه کنید. ( البته این امر در صورتی است که تمام سی پیوند شما که بلاگفا این امکان را برای شما قرار میدهد پر شده باشد ) و یا تغییرات دیگری در آن بدهید.

free آموزش درست کردن وبلاگ

تنظیمات وبلاگ:

در این بخش همانطور که از نامش پیداست مربوط به تنضیمات وبلاگ از قبیل عنوان وبلاگ – نام نویسنده-شرح خلاصه – ایمیل نویسنده – ایمیل خصوصی – منطقه زمان – درباره وبلاگ و یا خودتان و…. می باشد و همچنین در این بخش می توانید تعداد پستهای نمایش داده شده در وبلاگتان را مشخص کنید.

free آموزش درست کردن وبلاگ

مدیریت پیوندها:

بلاگفا این امکان را برای کاربران خود فراهم کرده است که هر کاربر می تواند سی لینک را به وبلاگ خود بدون گذاشتن کد و یا تغییر در قالب اضافه کند.

 

تصویر۴

61 آموزش درست کردن وبلاگ

منبع: designed-template.blogfa.com


مطالب مرتبط:

ادامه مطلب icon برچسب ها: , , , , , ,

آموزش درست کردن وبلاگ

آموزش تصویری درست کردن وبلاگ در بلاگفا (blogfa.com)

createBlog آموزش درست کردن وبلاگ

ایجاد وبلاگ در سایت بلاگفا:

سایت بلاگفا از جمله سایتهاییه که سرویس رایگانی رو برای ایجاد وبلاگ ارائه میده. بلاگفا دومین سرویس وبلاگ فارسی زبان است که روز به روز پیشرفت قابل توجهی داشته و هر روز به کاربران اون اضافه میشه.

عضویت در سایت بلاگفا:

اولین قدم برای داشتن وبلاگ عضویت در سایت بلاگفاست. برای این کار روی گزینه ایجاد وبلاگ جدید کلیک کنید.

www.blogfa.com/NewBlog.aspx

با این کار فرم ثبت نام برای شما باز میشه. که حاوی فیلدهایی است.

ـ استفاده از حروف فارسی در شناسه کاربری مجاز نیست.

ـ عنوان وبلاگ شما معرف شخصیت و طرز فکر شماست. در انتخاب آن دقت کنید.

ـ کلمه عبور یا همون Password نسبت به حروف کوچک و بزرگ حساس است.

ـ در نوشتن آدرس پست الکترونیتون دقت کنید. چون بعد از ارسال فرم عضویت نامه ای به ایمیلتون ارسال میشه تا Password و سایر اطلاعات وارده برای شما ارسال شود.

و فیلدهای دیگر را هم بنا به در خواست بلاگفا پر کنید و پس از قبول شرایط سرویس دهی روی دکمه قبول قوانین سایت و ایجاد وبلاگ کلیک کنید.

تصویر۱

16 آموزش درست کردن وبلاگ

 free آموزش درست کردن وبلاگ

ورود به سایت:

در همان صفحه اول بلاگفا در قسمت سمت راست می تونید با وارد کردن نام کاربری و کلمه عبورتون و سپس زدن دکمه ورود وارد مدیریت بلاگتان شوید.

 

تصویر۲

23 آموزش درست کردن وبلاگ

اکنون یک صفحه وبلاگ در این سایت به شما اختصاص داده شده که آماده ثبت نوشته هایتان می باشد. در تصویر ۳ ابتدا در کادر عنوان مطلب موضوع مورد نظر را وارد کنید. در کادر مرکزی نیز شروع به نوشتن یادداشت مورد نظر پیرامون همان عنوان مطلب موضوع نمائید. از آیکونهای ویرایشی بالای این کادر نیز میتوانید استفاده کنید. با کلیک روی صورتک خندان میتوانید سایر علائم احساسی را در متن نوشته هایتان بکار ببرید و… در نهایت روی دکمه ثبت مطلب و بازسازی وبلاگ کلیک کنید.

تصویر۳

32 آموزش درست کردن وبلاگ

 free آموزش درست کردن وبلاگ

افزودن لینک در وبلاگ:

اگر بخواهید کلمه یا عبارتی از متن وبلاگتون رو به صفحه خاصی در وب لینک کنید کافیست پس ازانتخاب متن مورد نظرتون روی آیکون افزودن لینک کلیک کنید. با این کار پنجره ای مطابق شکل چهار باز میشود.

تصویر۱

42 آموزش درست کردن وبلاگ

در کادر مربوط به این قسمت باید آدرس Url صفحه ای که می بایست لینک به آن ارجاع داده شود را تایپ نمائید.

 free آموزش درست کردن وبلاگ

افزودن تصویر به وبلاگ:

به علت اینکه عکسها فضای زیادی روی اینترنت اشغال می کنند بلاگفا و بقیه خدمات دهنده های وبلاگ به شما اجازه نمی دهند که روی فضای وبلاگ خود عکس ارسال کنید.

به دو صورت می توان تصویر را در صفحه وبلاگ جای داد:

۱- قرار دادن تصویری دلخواه که در یک صفحه وب دیگر قرار دارد.

۲- قرار دادن تصویری که روی صفحه وب هیچ سایتی نیست.

توضیح روش اول: عکسهایی که می خواهید به یادداشتها یتان اضافه کنید یا روی اینترنت هستند یا روی کامپیوتر شخصی شما. اگر عکس مورد نظر روی یک سایت و یک صفحه وب باشد کافی است روی آن راست کلیک کرده و گزینه Properties را انتخاب نمائید. اکنون تمام عبارتی را که مقابل( Address(Url با موس به دقت انتخاب کنید. روی عبارت انتخاب شده راست کلیک کنید و گزینه Copy را انتخاب نمائید.

حالا به صفحه یادداشت ها بروید. در مکان مناسب که می خواهید تصویر درج شود کلیک کنید. سپس روی گزینه افزودن تصویر کلیک کنید. پنجره ای مطابق شکل پنج باز می شود. آدرس کپی شده را در کادر آدرس تصویر Paste کنید. با این کار عکس مورد نظر به یادداشتتان افزوده می شود. برای فایلهای Animation Gif می توانید همین کار را انجام دهید.

توضیح روش دوم: برای ارسال عکس های خود به اینترنت و قرار دادن آن در وبلاگ شخصی می توانید عکس مورد نظر خود را از طریق به راحتی این سایت ارسال کنید:

up.alamto.com

 free آموزش درست کردن وبلاگ

فرستادن یادداشت:

لازم به توضیح است که جهت صرفه جویی در وقت و هزینه در نگارش متن های طولانی و پر حجم ابتدا متن مورد نظر را در نرم افزار Word ویا Word Pad تایپ کرده و سپس در موقع باز شدن صفحه مدیریت وبلاگ و پیغام ها ( شکل۳ ) متن مورد نظرتان را از محل اصلی Copy نموده و داخل صفحه پست مطلب جدید Paste نمائید. پس از اینکه متن خود را نوشته و تصاویر و متن های خود را اضافه کردید روی ثبت مطلب و بازسازی وبلاگ کلیک کنید. اکنون وبلاگ شما آماده است و می توانید آن را مشاهده نمائید.

free آموزش درست کردن وبلاگ

گزینه (( مشاهده وبلاگ )):

با کلیک روی این گزینه ( شکل۳ ) صفحه وبلاگ شما با الگوی پیش فرض سایت به نمایش در می آید. در این صفحه بازدید کنندگان قادر هستند با کلیک روی نظر بدهید نظرشان را در رابطه با مطلب شما بیان کنند.

free آموزش درست کردن وبلاگ

گزینه حذف وبلاگ:

جهت حذف وبلاگ با تمامی یادداشت های آن کافیست پس از ورود به وبلاگ خود روی گزینه حذف وبلاگ کلیک کنید.

free آموزش درست کردن وبلاگ

انتخاب قالب:

پاتوق: پس از اینکه یک وبلاگ برای خود ساختید می توانی به سلیقه خود یک قالب یا الگو یا Template از میان قالب های موجود در سایت انتخاب نمائید. برای این کار ابتدا روی گزینه انتخاب قالب وبلاگ کلیک کنید. در صفحه جدید الگو های مختلف را با نام آنها مشاهده می کنید. با کلیک روی دکمه انتخاب قالب می توانید الگوی مورد نظر را برای وبلاگ خود در نظر بگیرید. هر الگو دارای ویزگیهای خاصی است. با انتخاب الگوی جدید الگوی قبلی پاک شده و الگوی جدید جایگزین آن خواهد شد. پس از انتخاب قالب دلخواه جهت مشاهده وبلاگ خود روی گزینه مشاهده وبلاگ کلیک کنید.

free آموزش درست کردن وبلاگ

ویرایش قالب:

برای ایجاد هر تغییری در شکل ظاهری وبلاگتان باید قالب آن را تغییر دهید. ممکن است هیچ کدام از قالب های آماده موجود نظر شمارا جلب نکند یا اینکه بخواهید لینک سایتها و وبلاگها دیگر را به وبلاگتان اضافه کنید. ( البته این امر در صورتی است که تمام سی پیوند شما که بلاگفا این امکان را برای شما قرار میدهد پر شده باشد ) و یا تغییرات دیگری در آن بدهید.

free آموزش درست کردن وبلاگ

تنظیمات وبلاگ:

در این بخش همانطور که از نامش پیداست مربوط به تنضیمات وبلاگ از قبیل عنوان وبلاگ – نام نویسنده-شرح خلاصه – ایمیل نویسنده – ایمیل خصوصی – منطقه زمان – درباره وبلاگ و یا خودتان و…. می باشد و همچنین در این بخش می توانید تعداد پستهای نمایش داده شده در وبلاگتان را مشخص کنید.

free آموزش درست کردن وبلاگ

مدیریت پیوندها:

بلاگفا این امکان را برای کاربران خود فراهم کرده است که هر کاربر می تواند سی لینک را به وبلاگ خود بدون گذاشتن کد و یا تغییر در قالب اضافه کند.

 

تصویر۴

61 آموزش درست کردن وبلاگ

منبع: designed-template.blogfa.com


مطالب مرتبط:

ادامه مطلب icon برچسب ها: , , , , , , , , ,