http://fancybox.net/

https://api.jqueryui.com/accordion/#entry-examples

Accordion Widget

Tabs Widget

https://swiperjs.com/

https://kenwheeler.github.io/slick/

https://atomiks.github.io/tippyjs/

Give it a try

Tingle is a simple modal plugin written in pure JavaScript (Source code on GitHub).

• No dependencies required
• Fully customizable via CSS
• CSS transitions
• Simple API
• No extra files to download
• Created with UX in mind

Below you will find some examples for using tingle:

A simple modal Need buttons? Big content? No problem! Stick to me! Close with footer button only ?

Installation

Tingle uses just one small CSS. Feel free to include it in your workflow (Less, Sass, etc...) and customize it to fit your needs.

<link rel="stylesheet" href="tingle.min.css">

Then, just include tingle in your document:

<script src="tingle.min.js"></script>

Use

// instanciate new modal
var modal = new tingle.modal({
    footer: true,
    stickyFooter: false,
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: "Close",
    cssClass: ['custom-class-1', 'custom-class-2'],
    onOpen: function() {
        console.log('modal open');
    },
    onClose: function() {
        console.log('modal closed');
    },
    beforeClose: function() {
        // here's goes some logic
        // e.g. save content before closing the modal
        return true; // close the modal
    	return false; // nothing happens
    }
});

// set content
modal.setContent('<h1>here\'s some content</h1>');

// add a button
modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function() {
    // here goes some logic
    modal.close();
});

// add another button
modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function() {
    // here goes some logic
    modal.close();
});

// open modal
modal.open();

// close modal
modal.close();
        

Options

CSS

All tingle styles are available in CSS. Only some specific properties for positioning are processed by JavaScript. It means you can customize tingle to fit your needs. Tingle came with some useful styles for buttons:

Important: For the blur effect, you need to wrap your content inside a container with the "tingle-content-wrapper" class.

• tingle-btn
• tingle-btn--primary
• tingle-btn--default
• tingle-btn--danger
• tingle-btn--pull-left
• tingle-btn--pull-right

API

jquery - select option 선택값 가져오기

출처: http://oingbong.tistory.com/175 [Oing]

[jquery] select  box 선택값 가져오기

// select box ID로 접근하여 선택된 값 읽기
$("#셀렉트박스ID option:selected").val();

// select box Name로 접근하여 선택된 값 읽기
$("select[name=셀렉트박스name]").val();

// 같은 방식으로 span과 같은 다른 태그도 접근 가능하다~
$("span[name=셀렉트박스name]").text();

// 선택된 값의 index를 불러오기
var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));

// 셀렉트 박스에 option값 추가하기
$("#셀렉트박스ID").append("<option value='1'>1번</option>");

// 셀렉트 박스 option의 맨앞에 추가 할 경우
$("#셀렉트박스ID").prepend("<option value='0'>0번</option>");

// 셀렉트 박스의 html 전체를 변경할 경우
$("#셀렉트박스ID").html("<option value='1'>1차</option><option value='2'>2차</option>");

// 셀렉트 박스의 index별로 replace를 할 경우
// 해당 객체를 가져오게 되면, option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어 개별 개체를 선택할 수 있다.
$("#셀렉트박스ID option:eq(1)").replaceWith("<option value='1'>1차</option>");

// 직접 index 값을 주어 selected 속성 주기
$("#셀렉트ID option:eq(1)").attr("selected", "selected");

// text 값으로 selected 속성 주기
$("#셀렉트ID")val("1번").attr("selected", "selected");

// value 값으로 selected 속성 주기
$("#셀렉트ID").val("1");

// 해당 index item 삭제하기
$("#셀렉트ID option:eq(0)").remove();

// 첫번째, 마지막 item 삭제하기
$("#셀렉트ID option:first").remove();
$("#셀렉트ID option:last").remove();

// 선택된 옵션의 text, value 구하기
$("#셀렉트ID option:selected").text();
$("#셀렉트ID option:selected").val();

// 선택된 옵션의 index 구하기
$("#셀렉트ID option").index($("#셀렉트ID option:selected"));

// 셀렉트박스의 아이템 갯수 구하기
$("#셀렉트ID option").size();

// 선택된 옵션 전까지의 item 갯수 구하기
$("#셀렉트ID option:selected").prevAll().size();

// 선택된 옵션 후의 item 갯수 구하기
$("#셀렉트ID option:selected").nextAll().size();

// 해당 index item 이후에 option item 추가 하기
$("#셀렉트ID option:eq(0)").after("<option value='3'>3번</option>");

// 해당 index item 전에 option item 추가하기
$("#셀렉트ID option:eq(3)").before("<option value='2'>2번</option>");

// 해당 셀렉트 박스에 change event binding 하기
$("#selectID").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});

2. 특정요일만 선택하기 :

0 : 일요일

6 : 토요일

//아래 코드는 매주 화요일과 금요일만 선택가능

$(function() {

$('#datepicker').datepicker({ 

dateFormat: "yy-mm-dd",

regional: "ko",

beforeShowDay: function(date){

var day = date.getDay();

return [(day != 0 && day != 1 && day != 3 && day != 4 && day != 6)];

}

});

});

3. 특정일만 선택하기

$(function() {

//선택가능 날짜 

var availableDates = ["2015-01-01", "2015-01-13"];

function available(date) {

var thismonth = date.getMonth()+1;

var thisday = date.getDate();

if(thismonth<10){

thismonth = "0"+thismonth;

}

if(thisday<10){

thisday = "0"+thisday;

}

    ymd = date.getFullYear() + "-" + thismonth + "-" + thisday;

    if ($.inArray(ymd, availableDates) >= 0) {

        return [true,"",""];

    } else {

        return [false,"",""];

    }

}

$('#datepicker').datepicker({ 

dateFormat: "yy-mm-dd",

regional: "ko",

beforeShowDay: available 

});

});

출처: http://ellordnet.tistory.com/12 [IT in MT]

https://developers.google.com/chart/interactive/docs/gallery

선형 차트

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

jquery 파라메타

  -> encodeURIComponent(tt)

php request

  -> rawurldecode(aa)