jQuery UI 소개 및 기능 소개

零下一度

풀어 주다： 2017-06-26 14:50:10

원래의

1660명이 탐색했습니다.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ukulegdie UI 소개

jQuery UI는 위젯 및 상호 작용 라이브러리입니다. 대화형 웹 애플리케이션을 만드는 데 사용할 수 있는 jQuery JavaScript 라이브러리. 대화형 웹 애플리케이션을 만들거나 양식 컨트롤에 날짜 선택기를 추가하는 경우 jQuery UI는 완벽한 선택입니다. jQuery UI에는 상태를 유지하는 위젯이 많이 포함되어 있어 일반적인 jQuery 플러그인 사용 패턴과 약간 다릅니다. 모든 jQuery UI 위젯은 동일한 패턴을 사용하므로 하나를 사용하는 방법을 배우면 다른 것도 사용하는 방법을 알게 됩니다.

jQuery UI 기능

간단하고 사용하기 쉽습니다:

jQuery의 사용하기 쉬운 기능을 상속하고 매우 추상적인 인터페이스를 제공하며 단기적으로 웹 사이트의 유용성을 향상시킵니다.

오픈 소스 및 무료

MIT & GPL 이중 계약 라이선스를 사용하여 무료 제품부터 기업용 제품까지 다양한 라이선스 요구 사항을 쉽게 충족할 수 있습니다.

넓은 호환성

모든 주요 데스크톱 브라우저와 호환됩니다. IE 6+, Firefox 2+, Safari 3+, Opera 9+, Chrome 1+를 포함합니다.

가벼움과 속도

구성 요소는 상대적으로 독립적이며 요청 시 로드될 수 있어 대역폭 낭비와 웹 페이지 열기 속도 저하를 방지할 수 있습니다.

고급 표준

WAI-ARIA를 지원하고 표준 XHTML 코드를 통해 점진적인 향상을 제공하여 저사양 환경에서 접근성을 보장합니다.

아름답고 다양함

거의 20개의 사전 설정된 테마를 제공하고 최대 60개의 구성 가능한 스타일 규칙을 사용자 정의하여 24개의 배경 질감 선택을 제공합니다.

공개 및 공개

구조 계획부터 코드 작성까지 전 과정이 공개되어 누구나 문서화, 코드, 토론에 참여할 수 있습니다.

강력한 지원

Google은 코드 게시를 위한 CDN 콘텐츠 전송 네트워크 지원을 제공합니다.

완전한 중국어 버전

개발 패키지에는 중국어를 포함해 40개 이상의 언어 패키지가 내장되어 있습니다.

단점 및 결함

다운로드 주소:

jQuery UI 사용

웹 페이지에서 사용

다운로드 후 최소 3개의 파일을 가져와야 합니다

<link>
<script></script>
<script></script>

로그인 후 복사

해당 아이콘 기능이 필요한 경우 프로젝트 CSS 폴더에 이미지 파일 폴더를 추가해야 합니다.

그림에 표시된 대로:

jQuery UI 실제 예

Date Picker

Datepicker(Datepicker)는 표준 양식 입력 필드에 바인딩됩니다.

HTML

<!--日期-->
<input>

로그인 후 복사

//日期控件
$("#data").datepicker({
    //月份可改变
    changeMonth: true,
    //年份可改变
    changeYear: true
});

로그인 후 복사

드래그 스크롤

DOM 요소에서 드래그 가능한 기능을 활성화하세요. 마우스로 클릭하고 뷰포트에서 드래그하여 드래그 가능한 객체를 이동합니다.

CSS

#drag {
   width: 100px;
   height: 100px;
   background: red;
}

로그인 후 복사

HTML

<!--拖动滚动-->
<div></div>

로그인 후 복사

//可拖拽 可拖动滚动
$("#drag").draggable({
    scroll: true
});

로그인 후 복사

Zoom

모든 DOM 요소에서 크기 조정 기능을 활성화하세요. 마우스로 오른쪽이나 아래쪽 테두리를 원하는 너비나 높이로 드래그하세요.

HTML 공유된 마지막 div #drag

//缩放
$("#drag").resizable({
    //有动画效果
    animate: true,
    //阴影效果
    ghost: true
});

로그인 후 복사

Drag sorting

모든 DOM 요소에서 정렬 가능한 기능을 활성화하세요. 마우스로 요소를 클릭하고 목록의 새 위치로 끌면 다른 항목이 자동으로 조정됩니다. 기본적으로 정렬 가능한 항목은

속성을 공유합니다.

draggableHTML

<!--拖动排序-->

로그인 후 복사

111111111
2222222222
33333333333

//拖动排序
$("#sortable").sortable();

로그인 후 복사

Collapse Panel

헤더를 클릭하면 탭처럼 논리적 부분으로 구분된 콘텐츠를 확장/축소할 수 있습니다. 마우스 오버 시 섹션을 켜거나 끌지 여부를 선택적으로 설정할 수 있습니다.

HTML

<!--折叠面板-->
<div>
    <h3>部分 1</h3>
    <p>abitur malesuada.</p>
    <h3>部分 2</h3>
    <p>Sed non urna.</p>
</div>

로그인 후 복사

//折叠面板
$("#accordion").accordion();

로그인 후 복사

对话框窗口

对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开（就像 select 元素）。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 'x' 图标关闭。

HTML

<!--对话框-->
<div>
<p>显示本内容,可以移动,点击x可关闭</p>
</div>

로그인 후 복사

//对话框
$("#dialog").dialog();

로그인 후 복사

带有图标的菜单

一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。

CSS

//菜单栏的宽度
.ui-menu { width: 150px; }

로그인 후 복사

HTML

로그인 후 복사

保存
放大
缩小
打印...
播放
- 上一个
- 停止
- 播放
- 下一个

//菜单栏
$( "#menu" ).menu();

로그인 후 복사

预加载进度条

等待加载过程,并完成进度条。

CSS

.ui-progressbar {
    position: relative;
  }
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }

로그인 후 복사

HTML

//进度条初始状态
<div><div>加载...</div></div>

로그인 후 복사

 $(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );
 
    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "完成！" );
      }
    });
 
    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;
 
      progressbar.progressbar( "value", val + 1 );
 
      if ( val <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://img.php.cn/upload/article/000/000/001/853e474eaddc7199d3c5df618b42b689-12.gif" alt="jQuery UI 소개 및 기능 소개"></span></div>

로그인 후 복사