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">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
</head>

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



Norranun 18-06-2010 02:27:38

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

 ความคิดเห็นที่ 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/
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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

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

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

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

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

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



norranun 18-06-2010 13:18
 ความคิดเห็นที่ 5

ได้บรรทัด
 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ