Jquery 모바일 라이브러리란 무엇입니까?

jquery 모바일 라이브러리에는 다음이 포함됩니다. 1. 터치 스크린 장치에서 회전 스크롤, 날짜 및 시간 선택에 사용되는 Mobiscroll 2. 즉각적인 사운드 알림에 사용되는 "Ion.Sound" 3. 부드러운 서랍 스타일 탐색을 만드는 데 사용되는 mmenu 메뉴 4. 반응형 탐색을 만드는 데 사용되는 Naver 5. gShake 등

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.2, Dell G3 컴퓨터.

모바일 인터넷의 발전으로 PC의 웹 페이지는 모바일 페이지의 요구 사항을 완벽하게 충족할 수 없으며, 이로 인해 반응형 디자인 경험이 등장하고 트렌드가 되었습니다. jQuery Mobile의 인기에 기여한 것은 바로 이러한 요구입니다. . jQuery 및 jQuery UI를 기반으로 하는 프레임워크인 jQuery Mobile은 jQuery의 "적게 작성하고 더 많이 수행"의 본질을 계승하고 확장성과 사용자 정의 가능성이 뛰어나며 지원되지 않는 휴대폰 유형의 경우 기본 스타일도 완벽하게 호환됩니다. 주어지다.

이 기사에서는 날짜/시간 선택, 즉각적인 소리 알림, 서랍 탐색 메뉴, iOS 스타일, 아코디언 탐색, 숨기기/표시 등 다양한 유형을 포괄하는 매우 우수하고 실용적인 15개의 jQuery Mobile 플러그인(라이브러리)에 대해 자세히 설명합니다. 비밀번호, 라이트 박스 효과, 매우 멋진 대화형 지도, 페이지 진동, 기본, 사진 앨범/갤러리 표시 등에 이르기까지 항상 당신을 매료시킬 무언가가 있습니다.

1. Mobiscroll

https://mobiscroll.com/

많은 개발자에게 Mobiscroll은 낯설지 않고 꽤 친숙하다고 할 수도 있습니다. Mobiscroll은 터치 스크린 장치에서 회전 스크롤/날짜 및 시간 선택에 주로 사용되는 매우 우수한 jQuery Mobile 플러그인입니다. 이를 통해 사용자는 간단히 숫자를 밀어 날짜와 시간을 선택할 수 있습니다(데모를 보려면 링크를 클릭하세요).

Mobiscroll은 사용자 정의 값을 지원하여 사용자가 테마를 완전히 사용자 정의할 수 있을 뿐만 아니라 드롭다운 목록의 로컬 선택 제어에도 사용할 수 있습니다. 또한, 사용하기에도 매우 편리합니다. 개발자에게 매우 진보된 색 구성표를 제공할 뿐만 아니라 CSS 파일을 통해 완전히 수정할 수도 있습니다. iOS, Android, WP8, Windows 8, BlackBerry 등을 포함한 모든 주류 모바일 및 데스크톱 브라우저를 지원합니다.

2. Ion.Sound

http://ionden.com/a/plugins/ion.sound/en.html

오늘은 웹사이트와 모바일사이트 모두 새로운 이메일, 새로운 채팅 메시지, 콘텐츠 업데이트 등 하지만 인스턴트 알림이 사용자의 관심을 즉시 끌 수 없다는 문제가 종종 있습니다. Ion.Sound 플러그인을 통해 이 작업을 매우 효과적으로 수행할 수 있습니다.

Ion.Sound는 이벤트 사운드를 재생하기 위한 jQuery 플러그인으로 MIT 라이센스를 채택했으며 25개의 무료 사운드가 포함되어 있습니다. 지금까지 Ion.Sound는 Google Chrome, Mozilla Firefox, Opera, Safari 및 IE(9.0+)와 같은 데스크톱 브라우저에서 성공적으로 사용되었으며 모든 주류 모바일 브라우저를 지원합니다.

3. jQuery.mmenu

http://mmenu.frebsite.nl/

jQuery.mmenu는 단 한 줄의 JavaScript 코드로 원활한 서랍 탐색 메뉴를 구현할 수 있는 jQuery 플러그인입니다. 모바일 웹사이트의 매우 멋진 슬라이딩 메뉴는 모바일 앱과 유사합니다.

jQuery.mmenu를 사용하면 개발자는 순서가 지정되지 않은 목록을 메뉴 항목으로 변환하고 사용자 정의할 수 있습니다. jQuery.mmenu는 개발자에게 열기, 닫기, 전환 등과 같은 일반 메뉴의 사용자 정의 기능을 제공할 뿐만 아니라 메뉴 위치(왼쪽/오른쪽), 메뉴 항목 카운터 표시 여부 및 기타 옵션에 대한 설정도 제공합니다.

4. Naver

http://www.benplum.com/formstone/naver/

Naver는 반응형 탐색을 만드는 데 특별히 사용되는 jQuery 플러그인입니다. 이를 통해 개발자는 모바일 친화적인 네비게이션 효과와 동적 네비게이션을 쉽게 만들 수 있습니다. 네이버는 Firefox, Chrome, Safari, IE(7+)와 호환되며 MIT 라이선스에 따라 출시되며 개인 프로젝트든 상업용 프로젝트든 무료로 사용할 수 있습니다.

5, iosOverlay.js

http://taitems.github.io/iOS-Overlay/

iosOverlay.js는 iOS 스타일 프롬프트/알림 효과를 만들기 위한 jQuery 플러그인으로, IE7+, Google을 지원합니다. Chrome, Firefox, Opera, Safari(데스크톱 및 모바일). 로드할 때 아이콘이 깜박이는 것을 방지하려면 개발자가 이미지 리소스를 미리 로드해야 한다는 점을 기억해야 합니다.

또한 iosOverlay.js에는 Spin.js와 jQuery라는 두 가지 선택적 종속성이 있습니다. 개발자가 드롭다운 목록 개체를 사용하려면 Spin.js를 사용해야 하며, CSS 애니메이션과 호환되지 않는 브라우저의 경우 jQuery가 지원을 제공해야 합니다.

6.Easy Responsive Tabs

https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

Easy Responsive Tabs는 가벼운 반응형 탭 탭/아코디언 탐색 기능을 지원합니다. 동일한 페이지에서 여러 예제를 사용하고 크로스 플랫폼 웹, 태블릿 및 모바일 장치를 지원합니다. 이 플러그인은 화면 크기에 맞게 조정할 수 있습니다. 기본 스타일은 가로/세로 탭입니다. 창이 작아지면 자동으로 아코디언 스타일로 전환됩니다.

7、비밀번호 숨기기/표시

https://github.com/cloudfour/hideShowPassword

비밀번호 숨기기/표시 플러그인을 사용하면 비밀번호 입력 상자의 내용을 쉽게 숨기고 표시할 수 있습니다. 이 플러그인의 가장 멋진 점은 "innerToggle" 옵션입니다. 켜짐으로 설정하면 개발자는 매우 아름다운 숨기기/표시 컨트롤을 사용자 정의할 수 있습니다. 또한 터치스크린 브라우저에서 스와이프할 때 입력 포커스를 유지합니다.

8, Swipebox

http://brutaldesign.github.io/swipebox/

Swipebox는 데스크톱, 모바일 및 태블릿 장치에서 사용할 수 있는 아름다운 jQuery 라이트박스 효과 플러그인입니다. 모바일에서는 스와이프 제스처 탐색이 지원되고, 데스크톱에서는 키보드 탐색이 지원됩니다. CSS3 전환 기능을 지원하지 않는 브라우저는 jQuery 다운그레이드 처리를 사용할 수 있고 레티나 디스플레이를 지원하며 CSS를 통해 쉽게 사용자 정의할 수 있습니다.

사용자가 대상 사진을 클릭하면 사진이 전체 크기로 표시됩니다. 또한 사용자는 왼쪽과 오른쪽으로 전환하여 같은 그룹의 사진을 볼 수도 있어 사진 갤러리를 만들고 보기에 매우 적합합니다. 대형 사진.

9. 앱 폴더

http://app-folders.com/

iOS 매니아라면 iOS 스타일 폴더에 매우 익숙할 것입니다. "폴더를 클릭하면 투명도가 높아져 주변 요소가 흐려지고 폴더 내용이 표시됩니다." App Folders는 iOS 폴더의 효과를 얻을 수 있는 jQuery 플러그인입니다. 이 플러그인은 데스크톱과 모바일 브라우저 모두에서 작동할 수 있으며 적응성이 매우 좋습니다.

앱 폴더의 폴더 요소에는 이미지, 텍스트, 비디오 등과 같은 HTML 요소가 포함될 수 있으며 각 폴더에는 직접 클릭할 수 있는 고유한 URL이 있습니다. 물론 개발자는 iOS 폴더와 동일한 효과를 고수할 필요가 없습니다. 앱 폴더를 통해 개발자는 보다 창의적인 레이아웃과 특수 효과를 사용자 정의할 수 있습니다.

10. jQuery Flip

http://amegan.github.io/jquery-flip/

jQuery Flip은 HTML, 텍스트 또는 jQuery 요소가 매우 아름다운 Flipboard와 같은 플립 효과를 생성할 수 있게 해주는 도구입니다. MIT 라이센스에 따라 출시된 jQuery 플러그인입니다. CSS 3D 변환을 사용하면 뒤집기 속도도 설정할 수 있으며, Firefox 11은 물론 Chrome, Safari 등 WebKit 브라우저도 완벽하게 지원합니다.

11. jQuery UI Map

https://code.google.com/p/jquery-ui-map/

지도 애플리케이션 개발자에게 jQuery UI Map은 개발에 꼭 필요한 도구입니다. 이러한 경량 jQuery 플러그인은 Google Map API와 다릅니다. jQuery UI Map을 통해 개발자는 클릭과 같은 간단한 이벤트에 Google 이벤트 리스너를 사용할 수 있을 뿐만 아니라 지도 및 마커에도 jQuery 클릭 이벤트를 사용할 수 있습니다.

jQuery UI 맵은 매우 유연할 뿐만 아니라 사용자 정의도 가능합니다. 예정된 이벤트를 지도에 표시하기 위해 jQuery UI Map은 Google 지도와 통합되어 개발자가 대화형 지도를 쉽게 만들 수 있습니다. jQuery UI Map의 가장 큰 특징은 클라이언트가 JavaScript를 지원하지 않는 경우 개발자가 마이크로포맷, RDFa 또는 마이크로데이터와 같은 HTML 데이터 형식을 사용하여 대체 사이트에서 동기화를 달성할 수 있다는 것입니다.

12, gShake

https://github.com/GerManson/gShake

gShake는 몇 줄의 코드만으로 진동 효과를 얻을 수 있는 jQuery 플러그인입니다. 심지어 페이지 자체가 흔들리면서 페이지가 역동적이고 재미있어집니다. iOS 4.2 이상을 지원합니다.

13. jQTouch

http://jqtjs.com/

이 글에서 소개한 모바일 개발에 사용할 수 있는 많은 jQuery 플러그인에 비해 확실히 jQTouch가 더 잘 알려져 있습니다. jQTouch를 사용하면 개발자는 HTML, CSS 및 jQuery만 사용하여 매우 강력한 모바일 앱을 만들 수 있습니다. 더욱 놀라운 점은 개발자가 핵심 CSS 파일만 사용하여 완전히 사용자 정의된 UI를 구축할 수 있다는 것입니다.

jQTouch는 모바일 장치의 WebKit 브라우저에서 애니메이션, 목록 탐색, 기본 스타일 등과 같은 일반적인 UI 효과를 구현할 수 있습니다. 그러나 더 많은 기본 효과를 얻으려면 추가 CSS 파일을 추가해야 합니다. iOS 개발자의 경우 jQTouch가 iOS 개발을 위한 풍부한 기본 효과 CSS 파일 세트를 제공하므로 이에 대해 걱정할 필요가 없습니다.

14, PhotoSwipe

http://www.photoswipe.com/

PhotoSwipe는 iOS, Android, Blackberry 및 모바일 터치 스크린 장치용으로 특별히 설계된 오픈 소스 및 무료 사진 앨범/갤러리 표시 패키지입니다. 다른 주류 플랫폼 및 데스크탑 브라우저. 기본 구현은 HTML, CSS 및 JavaScript를 기반으로 하며 어떤 프레임워크에도 의존하지 않습니다. 모바일 사이트의 사진 앨범 경험을 기본 앱과 동일하게 만들고자 하는 디자이너와 개발자에게 매우 적합합니다.

PhotoSwipe는 모바일 웹사이트에 쉽게 통합되고 모바일 브라우저에 최적화된 독립형 JavaScript 라이브러리입니다. 또한 소스 코드에서 PhotoSwipe는 데스크톱 브라우저 및 jQuery Mobile 사용에 대한 지원도 제공합니다.

15. Touch Gallery

http://neteye.github.io/touch-gallery.html

PhotoSwipe와 마찬가지로 Touch Gallery도 이를 통해 사진 표시 플러그인을 통해 모바일에 이미지를 표시할 수 있습니다. 브라우저. 기본 사진 앨범 응용 프로그램과 유사한 이미지 표시 효과를 얻으려면. 제스처 탐색 작업을 지원하며 Safari, Firefox, Opera, Chrome 등 데스크톱 브라우저에서도 사용할 수 있지만 일부 기능은 구현할 수 없습니다.

【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】

위 내용은 Jquery 모바일 라이브러리란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!