calendar มันโชว์ไม่สมบูรณ์ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา calendar มันโชว์ไม่สมบูรณ์ครับ

calendar มันโชว์ไม่สมบูรณ์ครับ

นี่คือโค้ดครับ

<!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>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.js"></script>
<link href="jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
   $(function(){
               $('#Show').datepicker();
               });
</script>
<style type="text/css">

</style>
</head>

<body>
<div id="Show">
</div>
</body>
</html>

Norranun 18-06-2010 02:27:38

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

เพิ่มเติมครับ

ปัญหาคือ ปุ่ม next previous บนมุมทั้ง 2 ข้างมันหายไปครับ

รบกวนด้วยครับ

norranun 18-06-2010 02:29

ความคิดเห็นที่ 2

ให้ดูโฟลเดอร์รูป images ว่ามีไหม หรือได้อัพโหลดโฟลเดอร์ขึ้น server ไหม
ถ้ามีโฟลเดอร์รูป images และอัพโหลดขึ้น server แล้วแต่ รูปยังไม่แสดง

ให้ดูที่ ไฟล์ jquery-ui-1.8.2.custom.css
ปกติต้นฉบับ จะอ้างอิง แบบ relative เช่น url(images/ui-icons_222222_256x240.png)
ให้เรียกแบบ absolute path เช่น url(http://www.youdomain.com/images/ui-icons_222222_256x240.png)

ninenik 18-06-2010

ความคิดเห็นที่ 3

หรือง่ายที่สุดให้เรียกใช้งาน google api
www.stemkoski.com/jquery-ui-1-7-2-themes-list-at-google-code/

<style type="text/css">
body{
	font-size:12px;
	font-family:Tahoma, Geneva, sans-serif;	
}
</style>
<link rel="stylesheet" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/vader/jquery-ui.css" 
type="text/css" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.2");
</script>  
<script type="text/javascript">
$(function(){
	  $('#Show').datepicker();
});
</script>

<div id="Show"></div>

ninenik 18-06-2010

ความคิดเห็นที่ 4

สอบถามเพิ่มเติมครับ เกี่ยวกับโค้ด...

<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/vader/jquery-ui.css"
type="text/css" />

ถ้าหากผมต้องการ edit สไตล์ต่างๆหรือปรับเปลี่ยนรูปแบบลงใน css ที่อยู่ใน google

จะทำยังไงครับ

คือ ตอนนี้ปฎิทินมันใหญ่ไปนิดนึง ผมอยากจะปรับให้มันเล็กลงหน่อยต้องทำไงครับ

norranun 18-06-2010 13:18

ความคิดเห็นที่ 5

ได้บรรทัด

<link rel="stylesheet"   
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/vader/jquery-ui.css"   
type="text/css" />

ให้สร้าง style เข้าไป

<style type="text/css">
// อ้างอิง selector จาก ไฟล์ http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/vader/jquery-ui.css
/* Datepicker
----------------------------------*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
</style>

คือเมื่อบราวเชอร์รันจากบรรทัด <link .... พอมาเจอบรรทัดล่างที่เรากับหนด style ทับอีกครั้ง บราวเซอร์ก็จะใช้ตัวที่เราเขียนใหม่ หรือเพิ่มเข้าไป อย่างที่เรียกๆ กันว่าการ override

ninenik 18-06-2010

ความคิดเห็นที่ 6

ขอบคณครับ

ทำได้แล้วครับ

norranun 18-06-2010 16:04

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน