อยากถามเกี่ยวกับ Dialog Method ของ Jquery ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากถามเกี่ยวกับ Dialog Method ของ Jquery ครับ

อยากถามเกี่ยวกับ Dialog Method ของ Jquery ครับ

ผมได้พยายาม กำหนดตำแหน่งของการแสดงผล Dialog โดย ใช้ Option position คือ

$(xxx).dialog({ position:[350,100] }) //โดยกำหนดตามแกน x,y

เมื่อทำการแสดงผล มันไม่ได้แสดงตามตำแหน่งที่ระบุไว้ครับ ไม่ทราบว่าผมควรจะต้องทำอย่างไรบ้างครับ หรือว่ามันไม่สามารถกำหนดตำแหน่งได้

หรือผมต้องเพิ่มส่วนไหน , แทรกไฟล์ .js เข้าไปเพิ่ม หรือเปล่าครับ

รบกวนผู้รู้ด้วยครับ ผิดพลาดประการใดขออภัยมาน่ะที่นี้ด้วยครับ ขอบคุณครับ

Jarat 25-08-2010 15:26:56

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ถ้าเรียกมา และแสดง แต่ตำแหน่งไม่ถูก แสดงว่าเกิดกับ css คงต้องไล่ css ดู

Ninenik 25-08-2010

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

ครับผม จะลองไล่ Css ดู ครับ ได้หรือไม่ได้จะมาบอกกล่าวครับ

และอีกเรื่องครับ ไฟล์ .js ของ Jquery ที่จำเป็น ต้องใส่เข้าไป มี แค่ 3 ส่วนนี้เท่านั้นหรือครับ

หรือว่าเราสามารถแทรก .js ของ folder ชืื่อ ui ที่มากับ demos เพิ่มเข้าไปอีกได้ เพราะผมลองใส่เพิ่มดู แต่ก็ไม่เห็นผลลัพท์ที่แตกต่างครับ หรือว่าำไม่จำเป็นครับ

ขอบคุณครับ

jarat 25-08-2010 18:37

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

ใช้แค่ 3 ส่วนก็พอ ส่วนใน ui จะเป็นส่วนที่มีทั้งหมด ซึ่งรวมไว้ในไฟล์ js/jquery-ui-1.8.4.custom.min.js เรียบร้อยแล้ว หรือจะเข้าไปทำการดาวน์โหลดเฉพาะส่วนที่ใช้งานก็ได้ เหมือนกัน
เข้าไปที่ http://jqueryui.com/download เลือกสคริปส่วนที่จะใช้งาน เลือก theme แล้วก็กดปุ่มดาวน์โหลดฝั่งขวามือ

ninenik 25-08-2010

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

ขอบคุณมากๆเลยครับ...

ผมลองไล่แก้ CSS แล้วก็ไม่หายครับ ผมเลยลองไปกำหนด Option position ของ dialog modal ดู โดยกำหนด

$(xxx).dialog({ position:[0,0] })//คือแกน x = 0 y = 0

พอแสดงผลออกมา dialog ชิด ซ้าย แต่ไม่ติดบน.. ผมเลย งง ตกลงที่ผมกำหนดค่านี้ถูกหรือผิดกันแน่ครับ..

ขอบคุณมากครับ คุณ Ninenik

jarat 25-08-2010 19:18

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

ถ้าอยากได้คำตอบที่ไม่ต้องงมเข็ม คงต้องอัพไฟล์ที่ทำให้ดูผ่านเว็บ จะได้แนะนำถูก บางทีอาจจะเป็นลักษณะเส้นผมบังภูเขา

ninenik 25-08-2010

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

ส่วน Css

<style >
    .ui-buttom{
        font-size:10px;
         
    }
    .fill-input{
        font-size:10px;
        border:0.1em solid #C2CFDF;
    }
    div.head{
        font-size: 14px;
        font-weight: bold;
        background-color:#FFCC66;
    }
     
    .text{
        padding: 5px 10px 0px 0px;  
        font-size : 12px;
        font-weight: bold;
    }
    div.table{
        width: 550px;
        border:0.01em solid #FFCC66;
        padding: 2px 5px 10px 5px;
         
    }
     
    .text-data{
        font-size : 12px;
        padding: 5px 10px 0px 5px;  
    }
    .ui-buttom{
        font-size:10px;
         
    }
     
    label{
        cursor:pointer;
    }
     
    .ui-exam{
        font-size:9px;
        color:gray;
         
    } 
    .ui-dialog{
        font-size:10px;
         
   }
   .ui-datepicker{  
        font-size:10px;  
    }
</style>

ส่วน script

<script language ="javascript">
 
    $(function(){
        $.fx.speeds._default = 2000;
        $("#dialog-form").dialog("destroy");
        $("#dialog-form").dialog({
         
            autoOpen: false,
            height: 600,
            width: 600,
            modal: true,
            position:[0,0],
            show: 'drop',
            hide: 'clip',
            buttons: {
                Submit: function() {
                $(this).dialog('close');    
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
 
        })
 
    })
 
function fnc_click(){
         
        $("#dialog-form").dialog("open");
 
    }
</script> 

ส่วนที่ 3

<div id="dialog-form" title="ทดสอบ">
    <form action="BookingInfo_ss.php" method="post" name ="frm" id="frm" >
        <div  class="table" >
            <span class="ui-exam">**All fields are required to complete**</span>
            <div class="head"><li>Please insert infomation</li></div>
                 
                <div class="text"><label for="email">Email : </label></div><div class="text-data"><input name="email" id="email"class="fill-input" size="60" maxlength="100" ></div><span class="ui-exam">exam : xxx@hotmail.com,xxx@gmail.com</span>
                <div class="text"><label for="Name-cust">Name : </label></div><span class="text-data"><input name="Name-cust" id="Name-cust"class="fill-input" size="60" maxlength="40" ></span>
                <div class="text"><label for="lastName-cust">Last Name : </label></div><span class="text-data"><input name="lastName-cust" id="lastName-cust"class="fill-input" size="60" maxlength="40" ></span>
                <div class="text"><label for="Tel_cust">Tel. : </label></div><span class="text-data"><input name="Tel_cust" id="Tel_cust"class="fill-input" size="60" maxlength="15" ></span><span class="ui-exam">Number Only [0-9] format: xxxxxxxxxx</span>
                 
        </div>
    </form>
</div>
 
<!--เมื่อกด link เปิด dialog-->
 
<a href="#" onclick="javascript:fnc_click()">กด</a>

ประมาณนี้แหละครับ ผมไม่เคยทำ อัพไฟล์ที่ทำให้ดูผ่านเว็บ(ทำไมเป็นเลยครับ) ครับ จึงต้องเอา Code มาให้ดูแบบนี้ ขอรบกวนและคำแนะนำด้วยครับ

ขอบคุณที่สละเวลามาตอบคำถามผมครับ..

jarat 25-08-2010 20:58

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

เท่าที่ดูโค้ด ไม่มีอะไรผิด .. พยายามต่อน่ะครับ คงไม่เกินความสามารถ

ninenik 25-08-2010

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

แค่ยอมสละเวลามาดู Code ให้ผม แค่นี้ก็ ซึ้งในน้ำใจคุณ Ninenik มากเลยครับ เขียนบทความดีๆต่อไปน่ะครับ..

jarat 25-08-2010 21:47

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

มา Update ครับเพื่อใครจะเจอปัญหาอย่างผม ผมงมจนเจอวิธีที่แสนง่าย..

คือ ใช้คำสั่ง Return false;

เป็นอันจบครับ

ขอบคุณครับ

jarat 31-08-2010 11:09

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

http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

ตัวนี้ใช้ได้ครับ ลองเอาไป ปรับใช้ดูนุ่ะครับ

KiMZuhuM 30-06-2015 17:19

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

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

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