Kunagorn Sirikupt: jQuery

แสดงบทความที่มีป้ายกำกับ jQuery แสดงบทความทั้งหมด

21/10/56

Loading Progress with NProgress

วันนี้จะมาแนะนำวิธีการทำ Loading ด้วย NProgress นะครับ หลายคนอาจจะยังไม่ภาพไม่ออกว่า NProgress นี่ทำ Loading แล้วจะมีหน้าตาออกมาเป็นแบบไหน ให้ไปลองดูที่ Youtube นะครับเมื่อเราเข้ามาแล้วจะมี Loading เล็กวิ่งอยู่ด้านบนสุด

ซึ่งเราสามารถนำ NProgress นี่เข้ามาใช้งานบนเว็บไซต์ของเราได้ไม่ยาก โดยสามารถทำได้ ดังนี้ครับ

เข้าไปที่ http://ricostacruz.com/nprogress/ เพื่อดาวน์โหลด nprogress.css และ nprogress.js มาไว้ใน Solution ในตัวอย่างนี้ผมขอใช้ผ่าน CDN ดังนี้ครับ

<link href="http://ricostacruz.com/nprogress/nprogress.css"

    rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

    type="text/javascript"></script>

<script src="http://ricostacruz.com/nprogress/nprogress.js"

    type="text/javascript"></script>

เท่านี้เราก็ติดตั้ง NProgress เสร็จเรียบร้อยแล้วครับ ต่อมาจะเริ่มใช้งานกันนะครับ โดยมี 2 คำสั่งที่จำเป็นในการใช้งาน คือ NProgress.start(); เพื่อใช้สำหรับสั่งให้ Progress Bar เริ่มทำงาน และ NProgress.done(); เพื่อใช้สำหรับสั่งให้ Progress Bar สิ้นสุดการทำงาน

เริ่มทดสอบการทำงานโดยใช้ Code นี้นะครับ

<script>

    $(document).ready(function () {

        NProgress.start();

        setTimeout(function () {

            NProgress.done();

            $('.fade').removeClass('out');

        }, 1000);

});

</script>

หลังจากลอง Run แล้วจะมี Loading แสดงขึ้นมา เท่านี้ก็เสร็จแล้วครับกับการใช้ NProgress สำหรับทำ Loading

22/8/56

เลื่อกวันที่ Datepicker แบบ Multiple

หลายๆคนคงเคยใช้งาน Datepicker ของ jQuery UI กันมาบ้างแล้วนะครับ ซึ่งสามารถนำมาใช้งานได้ง่ายและมีประสิทธิภาพ แต่อาจจะมีข้อจำกัดในการใช้งานบางเรื่องซึ่งไม่สามารถทำได้ อย่างเช่น การเลือกวันที่แบบ Multiple ดังนั้นจึงมีการเริ่มสร้าง Extension ของ jQuery UI Datepicker เพื่อสามารถรองรับการทำงาน ในกรณที่ต้องการเลื่อกวันที่หลายๆวันได้

วันนี้เลยขอแนะนำ Extension ตัวนึงในการทำ Multiple Date Picker

เริ่มต้นให้ไปดาวน์โหลด script ที่ http://sourceforge.net/projects/multidatespickr/ จะได้ไฟล์ชือ MultiDatesPicker v1.6.1.zip เพือนำไฟล์ jquery-ui.multidatespicker.js ไปใช้งาน

ต่อมาให้ reference script ดังนี้

<!-- load jquery and jquery ui -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">

</script>

<!-- load jquery ui -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">

</script>

<!-- load multidatespicker script and css -->
<script type="text/javascript" src="js/jquery-ui.multidatespicker.js">

</script>

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

ที่นี้ลองมาดูวิธีการใช้งา่นกันบ้างนะครับ สามารถทำได้ง่ายๆโดยการเขียน Script ดังนี้

<script>
    $(document).ready(function () {
        $('#calendar').multiDatesPicker();
    });
</script>

เท่านี้ก็สามารถสร้าง DatetimePicker แบบ Multi Select ได้แล้วนะครับ รวมถึงเราสามารถ Config เพิ่มเติมให้ DateTimePicker นี้แสดงผลในรูปแบบต่างได้ด้วย เช่น

Custom Date - การกำหนด Format และค่า Default

$('#calendar').multiDatesPicker({
    dateFormat: "yy-mm-dd",
    defaultDate: "85-02-19"
});

Pre-Select Dates - การกำหนดวันที่เริ่มต้นที่ต้องการแสดง โดยส่งข้อมูลที่ต้องการกำหนดในรูปแบบ Array ของ string หรือ Object Date

var date = new Date();
$('#calendar').multiDatesPicker({
    addDates: [date.setDate(14), date.setDate(19)]
});

Disable Dates - Disable วันที่ใน DatetimePicker

var today = new Date();
$('#calendar').multiDatesPicker({
    addDisabledDates: [date.setDate(1), date.setDate(2), date.setDate(3)]
});

Disable Calendar - Disable DatetimePicker

var today = new Date();
var tomorrow = (new Date()).setDate(today.getDate() + 1);
$('#calendar').multiDatesPicker({
    disabled: true,
    addDates: [today, tomorrow]
});

Disable Weekend - Disable วันหยุดประจำสัปดาห์

$('#calendar').multiDatesPicker({
    beforeShowDay: $.datepicker.noWeekends
});

altField - แสดงวันที่เลือกใน Control ที่กำหนด

$('#calendar').multiDatesPicker({
    altField: '#altField'
});

Set maximum Picks - กำหนดจำนวนวันที่เลือกสูงสุด

$('#calendar').multiDatesPicker({
    maxPicks: 3
});

Use pickableRange and adjustRangeToDisabled - การเลือกข้อมูลเป็นช่วง และ กำหนดช่วงที่ต้องการ Disable

var date = new Date();
$('#calendar').multiDatesPicker({
    pickableRange: 7,
    adjustRangeToDisabled: true,
    addDisabledDates: [date.setDate(10), date.setDate(15)]
});

Days Range Mode: Auto Select Range - กำหนดเลือกช่วงแบบอัตโนมัติ

$('#calendar').multiDatesPicker({
    mode: 'daysRange',
    autoselectRange: [0, 5]
});

Full year - แสดงวันที่แบบเต็ม

var today = new Date();
var y = today.getFullYear();
$('#calendar').multiDatesPicker({
    addDates: ['10/14/' + y, '02/19/' + y, '01/14/' + y, '11/16/' + y],
    numberOfMonths: [3, 4],
    showCurrentAtPos: today.getMonth()
});