close

j Query UI 및 사용자 인터페이스 구성 요소- 통합 및 사용

j Query UI 는 jQuery 위에 구축된 강력하고 유연한 JavaScript 라이브러리입니다. 바로 사용할 수 있고 사용자 지정 가능한 사용자 인터페이스 구성 요소를 제공하여 대화형의 매력적인 웹 페이지 및 웹 응용 프로그램을 쉽게 만들 수 있습니다.

j 를 사용하면 Query UI 버튼, 날짜 선택기, 대화 상자, 자동 완성, 슬라이더, 탭, 진행률 표시줄 및 아코디언과 같은 구성 요소를 활용할 수 있습니다. 이러한 구성 요소는 서로 설계되고 호환되므로 사용자와 원활하게 상호 작용하는 유연하고 사용자 친화적인 인터페이스를 구축할 수 있습니다.

 

Query UI j를 프로젝트에 통합하려면 다음 단계를 따르십시오.

  1. 1단계: jQuery 및 j 다운로드 Query UI

    • jQuery 공식 웹 사이트( https://jquery.com/ )를 방문하여 최신 버전의 jQuery를 다운로드하십시오.
    • j Query UI 공식 사이트( https://jqueryui.com/ )에 접속하여 최신 버전의 j를 다운로드 받습니다 Query UI.

  2. 2단계: 폴더 구조 만들기

    • JavaScript 파일, CSS 및 이미지용 디렉터리를 포함하여 프로젝트의 폴더 구조를 만듭니다.

  3. 3단계: 파일 복사

    • jQuery 및 j Query UI 파일을 프로젝트의 JavaScript 폴더에 복사합니다.
    • j Query UI CSS 파일을 프로젝트의 CSS 폴더에 복사합니다.
    • j Query UI 이미지 파일을 프로젝트의 이미지 폴더에 복사합니다.

  4. 4단계: JavaScript 및 CSS 파일 연결

    • 프로젝트의 HTML 파일에서 <script> 태그를 추가하여 jQuery 및 j Query UI 파일을 연결합니다. 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • <link> j Query UI CSS 파일을 연결하는 태그를 추가합니다. 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. 5단계: j Query UI 구성 요소 사용
    • Query UI 이제 프로젝트에서 j 구성요소를 사용할 준비가 되었습니다. Query UI JavaScript에서 j 클래스 및 메서드를 활용 하고 해당 CSS 클래스를 적용하여 대화형 사용자 인터페이스를 만듭니다.

      예:

      <!DOCTYPE html>  
<html>  
<head>  
  <link rel="stylesheet" href="path/to/jquery-ui.css">  
</head>  
<body>  
  <div id="datepicker"></div>  
  
  <script src="path/to/jquery.js"></script>  
  <script src="path/to/jquery-ui.js"></script>  
  <script>  
    $(function() {  
      $("#datepicker").datepicker();  
    });  
  </script>  
</body>  
</html>

 

HTML 코드에서 jQuery 및 j 파일의 파일 경로를 올바르게 지정했는지 확인하면 Query UI 프로젝트에서 j 를 성공적으로 통합하여 Query UI 해당 구성 요소를 프로젝트에서 사용할 수 있습니다.

 

다음은 j에서 제공하는 각 사용자 인터페이스 구성 요소에 대한 예와 함께 자세한 설명입니다 Query UI.

버튼

라디오 버튼, 확인란, 호버/활성 효과와 같은 기능을 사용하여 웹 페이지에서 대화형 버튼을 만들 수 있습니다.

// Create a button  
$("#myButton").button();  
  
// Create a radio button group  
$(".radioGroup").buttonset();

 

날짜 선택기

동적으로 생성된 달력에서 날짜를 선택할 수 있는 사용자 친화적인 인터페이스를 제공하여 사용자가 다양한 형식의 날짜를 쉽게 선택할 수 있도록 합니다.

// Create a datepicker for a date input field  
$("#datepicker").datepicker();  
  
// Create a simple datepicker with a custom date format  
$("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });

 

대화

콘텐츠, 단추 및 열기/닫기 효과를 포함할 수 있는 사용자 지정 가능한 팝업 대화 상자를 만들 수 있습니다.

// Create a simple dialog  
$("#myDialog").dialog();  
  
// Create a dialog with a custom close button  
$("#myDialog").dialog({  
  buttons: [  
    {  
      text: "Close",  
      click: function() {  
        $(this).dialog("close");  
      }  
    }  
  ]  
});

 

자동완성 

사용자가 텍스트 필드에 입력할 때 자동 완성 기능을 제공하여 사용 가능한 데이터 또는 원격 데이터 소스를 기반으로 제안을 표시합니다.

// Create an input field with autocomplete feature  
$("#myInput").autocomplete({  
  source: ["Apple", "Banana", "Orange"]  
});  
  
// Create an input field with data from a remote data source  
$("#myInput").autocomplete({  
  source: "/search"  
});

 

슬라이더

미리 정의된 값 범위에서 값을 선택하기 위한 슬라이더를 만들 수 있습니다.

// Create a simple slider  
$("#slider").slider();  
  
// Create a slider with minimum and maximum values  
$("#slider").slider({  
  min: 0,  
  max: 100  
});

 

탭

콘텐츠를 다른 섹션으로 나누어 탭 콘텐츠를 생성할 수 있으므로 사용자가 다른 섹션 간에 쉽게 전환할 수 있습니다.

// Create a simple tab  
$("#tabs").tabs();  
  
// Create tabs with custom titles  
$("#tabs").tabs({  
  active: 1,  
  collapsible: true  
});

 

진행 표시 줄

수행 중인 작업의 진행률을 표시하는 그래픽 진행률 표시줄을 제공합니다.

// Create a simple progressbar  
$("#progressbar").progressbar();  
  
// Update the progress value  
$("#progressbar").progressbar("value", 75);

 

아코디언

콘텐츠의 일부만 표시하고 사용자가 콘텐츠를 확장하거나 축소할 수 있도록 접을 수 있는 요소를 만들 수 있습니다.

// Create a simple accordion  
$("#accordion").accordion();  
  
// Create an accordion with fast toggle  
$("#accordion").accordion({  
  collapsible: true,  
  active: false,  
  heightStyle: "content"  
});

 

이들은 j에서 제공하는 사용자 인터페이스 구성 요소의 일부 예일 뿐입니다 Query UI. 이러한 구성 요소를 사용하고 사용자 지정하여 웹 페이지에서 사용자 친화적인 대화형 인터페이스를 만들 수 있습니다.