ورود

View Full Version : حرفه ای: استفاده همزمان از چند استایل شیت


iman65
شنبه 24 بهمن 1388, 01:50 صبح
با سلام
راهنمایی در مورد چند قالبه کردن با سی اس اس رو می خواستم
چطور می شه تو سایت از این خاصیت استفاده کرد
مثل سایت تبیان و یا یاهو که وقتی روی مربع های رنگی بالای صفحه کلیک می کنیم رنگ
سایت و قالب عوض می شه ؟
ممنونم
online68
شنبه 24 بهمن 1388, 09:44 صبح
سلام
برای این کار شما باید برای هر عنصر روی صفحه ID تعریف کنید. (البته برای آنها که می خواهید رنگش عوض شود)سپس باید بر روی مربع های رنگی که مد نظر شماست, در رویداد onclick آنها یک تابع جاوا اسکریپت را فراخوانی کنید. فرض کنید شما بر روی مربع سبز رنگ کلیک کردید در اینجا تابع مثلا changeToGreen() جاوا اسکریپت فراخوانی میشه. خوب حالا کد داخل این تابع باید به اینصورت باشه که خاصیت background-color عنصر مورد نظر را تغییر بده.کد زیر رو مثالی بسیار ساده از این کار است می تونی اجرا کنی ببینی. اگر بخواهید این تغییر برای دفعات بعد باقی بماند باید در یک کوکی قرار دهید.

<html dir="rtl">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="fa">
<title>New Page 1</title>
<script language="javascript">
function ChangeToGreen(){
document.getElementById("id1").style.backgroundColor="red";
}
function ChangeToYellow(){
document.getElementById("id1").style.backgroundColor="yellow";
}
</script>
</head>

<body>
<input type="button" onclick="ChangeToGreen()" value="سبز"/>
<input type="button" onclick="ChangeToYellow()" value="زرد"/>
<div id="id1">
با کلیک بر روی button بالا این عنصر به رنگ سبز خواهد شد</div>
</body>

</html>
mrbm_2007
یک شنبه 25 بهمن 1388, 20:20 عصر
سایت تبیان که اشاره کردین اون مربع ها لینک هستند و با کلیک روی اون پارمتر های مناسب به یک صفحه aspx ارسال میشه و دفعه بعد که می خواد صفحه رو لود کنه از استایل مناسب استفاده می شه
(با asp این کار رو می کنند)
البته روش online68 (http://barnamenevis.org/forum/member.php?u=133928) هم خوبه ولی کد نویسیش (javascript) بیشتره و پیچیده تره!
xoogle.ir
دوشنبه 26 بهمن 1388, 10:53 صبح
بذارید من سوال این دوستمون رو کامل تر کنم چون ممکنه به درد خیلی ها بخوره !
چطور میتونیم چند تا فایل css طراحی کنیم با رنگ بندی های مختلف و با جاوا اسکریپت کاری کنیم که به صورت پیش فرض یکی از فایل های css کار بکنه بعد کاربر بتونه با کلیک کردن روی دکمه های رنگی فایل css سایت رو عوض بکنه ؟؟
این جوری خیلی حرفه ای تر میشه چون ممکنه استایل ها فقط به رنگ بندی محدود نشن و مثلا روی 2 ستونه بودن یا یک ستونه بودن ، رنگ یا عکس بک گراند ، نحوه قرار گرفتن منوها و .... هم اثر بذارن!
از دوستانی که حرفه ای هستن تقاضای راهنمایی داریم :قلب:
mrbm_2007
دوشنبه 26 بهمن 1388, 11:18 صبح
این طوری:



<html>
<head>
<link href="1.css" rel="stylesheet" type="text/css">
<script>
function ChaneStyle(newStyle){
document.body.innerHTML+='<link href="'+newStyle+'" rel="stylesheet" type="text/css">';
}
</script>

</head>
<body>
<center>
<input class="inpClass" type="button" value="Style1" onclick="ChaneStyle('1.css')" /><br /><br />
<input class="inpClass" type="button" value="Style2" onclick="ChaneStyle('2.css')" />
</center>
</body>
</html>

این هم فایل های css:
1.css:


.inpClass
{
height: 50px;
width: 80px;
border:dashed 4px red;
}


2.css:


.inpClass
{
height: 50px;
width: 80px;
border:dashed 4px red;
}
mrbm_2007
دوشنبه 26 بهمن 1388, 11:20 صبح
البته این ها باید همزمان با cookie استفاده بشه تا تغییرات ذخیره بشه تا دفعه بعد هم استایل مناسب نمایش داده بشه!
xoogle.ir
دوشنبه 26 بهمن 1388, 17:52 عصر
با تشکر از همه دوستان
من یه آموزش پیدا کردم که همین مورد رو توضیح میده خودم هم تست کردم کاملا درست کار میکرد.
این لینک پیشنهاد خیلی بهتری برای عوض کردن استایل ها داره :کف:
http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm