เทคนิคการเขียน javascript ควบคุม css

Unknown 07:18 , ไม่มีความคิดเห็น
เมื่อเราเขียน CSS มาจนถึงระดับหนึ่งแล้ว เราจะพบว่า CSS ก็คือการตกแต่งหน้าตาเว็บไซต์ ให้สวยงาม เป็นการแสดงผลเท่านั้น เหมือน HTML ไม่สามารถโต้ตอบกับผู้ใช้ได้เหมือน javacript , php หรือ asp เราจะทำอย่างไรหากต้องการให้ หน้าตาเว็บไซต์ ถูกกำหนดโดยผู้ใช้ เลือกสีกรอบได้ โดยการคลิกแล้วเปลี่ยนกรอบได้ ฟังดูน่าสนใจใช่มั้ยล่ะครับ

ในกรณีนี้ เราจะใช้ จาวาสคริป เข้ามาช่วยควบคุม ลองมาดูตัวอย่าง การทำ TextBox เปลี่ยนสีโดยการคลิก ปุ่ม

เริ่มต้นเรามี HTML ดังนี้ (โดยจะมี Bootstrap เข้ามาช่วยในการตกแต่งนิดหน่อย)






<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="dist/css/bootstrap.css" rel="stylesheet" />
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<style type="text/css">
.block-2 {
 width: 100%;
 height: 120px;
 margin-top:100px;
 float: left;
 text-align:center;
}
</style>
<title>Pancode Free.</title>
</head>

<body>
 <div class="block-2">
     <div class="form-inline">
         <input type="text" class="form-control" id="InputTxt" placeholder="Input Text">
            <a href="javasript:void(0)" class="btn btn-default" >ปกติ</a>
            <a href="javasript:void(0)" class="btn btn-info" >ฟ้า</a>
            <a href="javasript:void(0)" class="btn btn-danger" >แดง</a>
            <a href="javasript:void(0)" class="btn btn-success" >เขียว</a>
     </div>
</body>
</html>





















เราจะมาเขียน Class ของ css เพิ่มเพื่อตกแต่ง TextBox






<style type="text/css">
.bgcolor1 { 
 border-color:#00F;
 background-color:#0CF;
}
.bgcolor2 { 
 border-color:#F00; 
 background-color:#F9C;
}
.bgcolor3 { 
 border-color:#0F0;
 background-color:#0F9;
}
</style>







และเขียน javascript เพื่อเพิ่ม style ให้กับ TextBox






<script type="text/jscript">
function checkTxtbox(n) {
 txt = document.getElementById('InputText');
 txt.className = "form-control";
 if(n==1)
 txt.className += " bgcolor1";   //เพิ่ม class bgcolor1 ถ้า n==1
 else if(n==2)
 txt.className += " bgcolor2";   //เพิ่ม class bgcolor2 ถ้า n==2
 else if(n==3)
 txt.className += " bgcolor3";   //เพิ่ม class bgcolor3 ถ้า n==3
 else
 txt.className = txt.className;
} 
</script>






เมื่อนำโค้ดทั้งหมดมาประกอบกันก็จะได้






<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="dist/css/bootstrap.css" rel="stylesheet" />
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<style type="text/css">
.block-2 {
 width: 100%;
 height: 120px;
 margin-top:100px;
 float: left;
 text-align:center;
}

.bgcolor1 { 
 border-color:#00F;
 background-color:#0CF;
}
.bgcolor2 { 
 border-color:#F00; 
 background-color:#F9C;
}
.bgcolor3 { 
 border-color:#0F0;
 background-color:#0F9;
}
</style>
<script type="text/jscript">
function checkTxtbox(n) {
 txt = document.getElementById('InputText');
 txt.className = "form-control";
 if(n==1)
 txt.className += " bgcolor1";   //เพิ่ม class bgcolor1 ถ้า n==1
 else if(n==2)
 txt.className += " bgcolor2";   //เพิ่ม class bgcolor2 ถ้า n==2
 else if(n==3)
 txt.className += " bgcolor3";   //เพิ่ม class bgcolor3 ถ้า n==3
 else
 txt.className = txt.className;
} 
</script>
<title>Pancode Free.</title>
</head>

<body>
 <div class="block-2">
  <div class="form-inline">
   <input type="text" class="form-control" id="InputText" placeholder="Text Name">
      <a href="javasript:void(0)" class="btn btn-default" onClick="checkTxtbox(0)">ปกติ</a>
      <a href="javasript:void(0)" class="btn btn-info" onClick="checkTxtbox(1)">ฟ้า</a>
      <a href="javasript:void(0)" class="btn btn-danger" onClick="checkTxtbox(2)">แดง</a>
      <a href="javasript:void(0)" class="btn btn-success" onClick="checkTxtbox(3)">เขียว</a>
  </div>
 </div>
</body>
</html>









เมื่อเราคลิกที่ปุ่ม onClick="checkTxtbox(2)" ก็จะมีการส่งค่าไปถาม Javascript เมื่อตรงเงื่อนไขไหน ก็จะนำเอาชื่อ class นั้นมาต่อ แล้วได้ผลออกมาดังนี้
























































































































ไม่มีความคิดเห็น
                      :
                    
















แสดงความคิดเห็น























สมัครสมาชิก:

ส่งความคิดเห็น
                      (
                      Atom
                      )
                    















































Subscribe