แนวทางการประยุกต์ การซ่อน แสดงเนื้อหาสำหรับล็อกอิน อย่างง่าย ด้วย jQuery
23 January 2012ตัวอย่างโค้ดสำหรับการซ่อน แสดงเนื้อหา ประยุกต์แสดงส่วนสำหรับล็อกอิน
ไว้ส่วนบนของเว็บไซต์ แสดง หรือซ่อนเมื่อคลิกที่ลิ้งค์ โดยใช้คำสั่ง slideToggle ของ jQuery
สามารถนำไปดัดแปลง css และการจัดวางตำแหน่งต่างๆ ได้ตามต้องการ
ตัวอย่าง
ตัวอย่างโค้ดทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slde down up</title>
<style type="text/css">
body{
padding:0px;
margin:0px;
}
div#login_div{
position:relative;
margin:auto;
display:none;
width:100%;
height:150px;
background-color:#FFFFCC;
}
div#main_div{
position:relative;
display:block;
margin:auto;
width:970px;
height:1000px;
background-color:#FFCCCC;
}
</style>
</head>
<body>
<div id="login_div">
ส่วนของเนื้อหาสำหรับล็อกอิน
</div>
<div id="main_div">
<div id="login_anchor">
<a id="login_anchor_a" href="#">เข้าสู่ระบบ / สมัครสมาชิก</a>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("#login_anchor_a").click(function(){
$("#login_div").slideToggle();
});
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 9203 19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 1912 04 Nov 08 การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 4346 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 5081 09 Sep 10 Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude อ่าน 6686 12 Nov 09 รู้จักกับ Ajax Events ใน jQuery อ่าน 4288 26 Dec 10 แนะนำ PHP Simple HTML DOM Parser สำหรับ ดึงข้อมูล เฉพาะส่วนที่ต้องการ อ่าน 2917 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 4696 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 17951 05 Jul 10 ทบทวน วันที่ date object ใน javascript อ่าน 2831 29 Mar 09 ทบทวนการตัดข้อความด้วย PHP อ่าน 3920 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 4111 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 1011 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 1899 02 Apr 11 การอ้างอิง object ในหน้าหลัก จากหน้า popup ด้วย jQuery อย่างง่าย อ่าน 2690 05 Nov 08 CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 9412 08 Feb 12 Google map API v.3 กับ jQuery ลากจุดหา ชื่อตำแหน่ง และ พิกัด ค่า latitude longitude อ่าน 322 04 Nov 09 ประยุกต์สร้าง pdf ไฟล์ จาก tcpdf class ด้วย php รองรับภาษาไทย อ่าน 5408 22 Mar 09 javascript หาความกว้างและความสูงของหน้าเพจได้ด้วยฟังก์ชันง่ายๆ อ่าน 1758 09 Dec 09 การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย อ่าน 1852