מאיר כהן
meir@haravdotnet.co.ilהבעיה:
הגרפיקאית החליטה שהתיבות סימון שמגיעים כברירת מחדל – לא נאים ואינם מוצאים חן בעיניה. עליהם להיות יותר מעוצבים ואלגנטים.
לדוגמא, במקום שיראו כך:
שיראו כך:
קצת css והמשימה מבוצעת, נכון?
אז זהו שלא. מסתבר שבלתי אפשרי לשנות את העיצוב של ה checkbox.
הפתרון:
יש כמה פתרונות לבעיה זו.
הפתרון הראשון שהייתם חושבים עליו הוא, לעצב את הקופסאות האלו ולשים אותם במקום, להוסיף לטופס את ה checkbox ולהסתיר אותו, ובכל לחיצה על המלבן, “ללחוץ” באמצעות קוד על ה checkbox המתאים, ולשנות את הרקע של הקופסא שלכם.
הפתרון הזה אמנם עובד, אבל ישנו פתרון טוב יותר שיחסוך לכם חצי מהקוד ואותו אני הולך להראות.
ראשית נציג את ה html:
<div class=”checkbox-cover-1″>
<input type=”checkbox” name=”option1″ onclick=”changeColor(this, ‘checkbox-cover-1’)“ />
option 1
</div>
<div class=”checkbox-cover-2″>
<input type=”checkbox” name=”option2″ onclick=”changeColor(this, ‘checkbox-cover-2’)“ />
option 2
</div>
<div class=”checkbox-cover-3″>
<input type=”checkbox” name=”option3″ onclick=”changeColor(this, ‘checkbox-cover-3’)“ />
option 3
</div>
<div class=”checkbox-cover-4″>
<input type=”checkbox” name=”option4″ onclick=”changeColor(this, ‘checkbox-cover-4’)“ />
option 4
</div>
<div class=”checkbox-cover-5″>
<input type=”checkbox” name=”option5″ onclick=”changeColor(this, ‘checkbox-cover-5’)“ />
option 5
</div>
</body>
יש כאן בעצם חמש תיבות סימון, כשכל אחת עטופה ב div. את הטקסט אנו שמים בתוך ה div העוטף (לפני ה checkbox או לאחריו זה לא משנה).
בנוסף כבר תוכלו לראות שלכל div יש class שונה, שאותו אני שולח ב onclick על ה checkbox לפונקציה בשם changeColor שתפקידה הוא לשנות את צבע הרקע של הקופסא. אראה אותה בהמשך.
בשלב הזה מה שתקבלו זה את הצילום מסך הראשון שהראתי בעמוד זה, אז איך זה עובד?
קצת css:
div[class^=’checkbox-cover’]{
height: 40px;
width: 100px;
position: relative;
display: inline-block;
background-color: #eaebec;
font-family: Arial;
font-size: 18px;
line-height: 40px;
text-align: center;
}
input[type=’checkbox’]{
position: absolute;
top: 0px;
left: 0px;
height: 40px;
width: 100px;
margin: 0px;
opacity: 0;
}
</style>
הסלקטור הראשון הוא div[class^=’checkbox-cover’]כלומר– כל האלמנטים מסוג div שה class שלהם מתחיל ב ‘checkbox-cover’ , והם במקרה זה הקופסאות שלנו.
אני נותן את הגובה והרוחב הרצויים, מסדר את הטקסט שיהיה באמצע ובגודל מתאים, נותן צבע רקע אפור (אם הגדרה מסויימת לא ברורה לכם אתם מוזמנים להוריד אותה ולהבין בדיוק מה היא עושה…), וההגדרה החשובה היא position: relative.
לאחר שהגדרנו את הקופסא כ relative נוכל להגדיר את ה checkbox כ absolute בידיעה שישאר בתוך הקופסא בלי שיברח למקומות לא רצויים.
כעת חשוב להגדיר את הגודל שלו בדיוק כמו הגודל של הקופסא ולהצמיד אותו ל top ול left בכדי שיכסה את הקופסא לחלוטין ולא יצא מהצדדים.
והנה הטריק: opacity: 0: כלומר שקוף. הוא נשאר שם , מתנהג כמו כל checkbox סטנדרטי, לחיץ לחלוטין, אך רואה ואינו נראה. וכך חסכנו את הקוד שאמור לטפל בלחיצה עליו.
מה שנשאר לנו כעת זה רק לשנות את צבע הרקע של הקופסא (וזה הקוד היחיד):
function changeColor(checkbox, checkboxContainer) {
if ($(checkbox).prop(“checked”)) {
$(‘.’ + checkboxContainer).css({ “background-color”: “#ffce4b” });
}
else {
$(‘.’ + checkboxContainer).css({ “background-color”: “#eaebec” });
}
}
</script>
אני בודק האם הcheckbox שהפעיל את הפונקציה מסומן או לא ומשנה את צבע הרקע בהתאמה.
הערה: השתמשתי ב JQuery אך זה ניתן לביצוע גם ללא הספרייה. אם אתם משתמשים בקוד שלי, אל תשכחו לייבא אותה.
הנה העמוד המלא:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”jquery-1.11.3.min.js”></script>
<style>
div[class^=’checkbox-cover’]{
height: 40px;
width: 100px;
position: relative;
display: inline-block;
background-color: #eaebec;
font-family: Arial;
font-size: 18px;
line-height: 40px;
text-align: center;
}
input[type=’checkbox’]{
position: absolute;
top: 0px;
left: 0px;
height: 40px;
width: 100px;
margin: 0px;
opacity: 0;
}
</style>
<script>
function changeColor(checkbox, checkboxContainer) {
if ($(checkbox).prop(“checked”)) {
$(‘.’ + checkboxContainer).css({ “background-color”: “#ffce4b” });
}
else {
$(‘.’ + checkboxContainer).css({ “background-color”: “#eaebec” });
}
}
</script>
</head>
<body>
<div class=”checkbox-cover-1″>
<input type=”checkbox” name=”option1″ onclick=”changeColor(this, ‘checkbox-cover-1’)“ />
option 1
</div>
<div class=”checkbox-cover-2″>
<input type=”checkbox” name=”option2″ onclick=”changeColor(this, ‘checkbox-cover-2’)“ />
option 2
</div>
<div class=”checkbox-cover-3″>
<input type=”checkbox” name=”option3″ onclick=”changeColor(this, ‘checkbox-cover-3’)“ />
option 3
</div>
<div class=”checkbox-cover-4″>
<input type=”checkbox” name=”option4″ onclick=”changeColor(this, ‘checkbox-cover-4’)“ />
option 4
</div>
<div class=”checkbox-cover-5″>
<input type=”checkbox” name=”option5″ onclick=”changeColor(this, ‘checkbox-cover-5’)“ />
option 5
</div>
</body>
</html>