jQuery plugin 정리 (+ bootstrap color picker 포함)

* select box design
https://select2.github.io/examples.html

* 자동사이즈 조정
jquery.autosize.min.js
$('#autosize').autosize();


* tooltip
$('.with-tooltip').tooltip({
        selector: ".input-tooltip"
});


* 입력열 타이핑시 제한숫자 표기
//jquery.inputlimiter.css
//jquery.inputlimiter.js
$('#limiter').inputlimiter({
    limit: 140,
    remText: 'You only have %n character%s remaining...',
    limitText: 'You\'re allowed to input %n character%s into this field.'
});


* 블로그의 tag 표 입력처리
//jquery.tagsinput.js
//jquery.tagsinput.css
$('#tags').tagsInput();


* 컬러피커 (2가지 타입)
//colorpicker.css
//bootstrap-colorpicker.js
$('#cp1').colorpicker({
   format: 'hex'
});
$('#cp4').colorpicker().on('changeColor', function(ev) {
    $('#colorPickerBlock').css('background-color', ev.color.toHex());
});


* datepicker 날짜 (일반형, 기간형 등)
// bootstrap-datepicker.js
// datepicker.css

$('#dp1').datepicker({
    format: 'mm-dd-yyyy'
});
$('#dp2').datepicker();
$('#dp3').datepicker();
$('#dpYears').datepicker();
$('#dpMonths').datepicker();

var startDate = new Date(2014, 1, 20);
var endDate = new Date(2014, 1, 25);
$('#dp4').datepicker()
        .on('changeDate', function(ev) {
    if (ev.date.valueOf() > endDate.valueOf()) {
        $('#alert').show().find('strong').text('The start date can not be greater then the end date');
    } else {
        $('#alert').hide();
        startDate = new Date(ev.date);
        $('#startDate').text($('#dp4').data('date'));
    }
    $('#dp4').datepicker('hide');
});


* daterange picker
// daterangepicker.js
// daterangepicker-bs3.css
$('#reservation').daterangepicker();
$('#reportrange').daterangepicker(
        {
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment().subtract('days', 6), moment()],
                'Last 30 Days': [moment().subtract('days', 29), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            }
        },
function(start, end) {
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);

* timepicker
// bootstrap-timepicker.min.css
// bootstrap-timepicker.min.js
$('.timepicker-default').timepicker();
$('.timepicker-24').timepicker({
    minuteStep: 1,
    showSeconds: true,
    showMeridian: false
});

---

 

* tree 구조 데모
http://www.jstree.com/demo/

* 기타 유용 플러그인 확인
http://jqueryui.com/menu/
http://hanoora.blog.me/110185571693

* bootstra 참조
http://developers.facebook.com/tools/debug