jquery mobile 로그인 예제

Posted by adminfeira - 2 agosto, 2019 - Sin categoría - No Comments

이 예제에서는 html 페이지에 jQuery 모바일 라이브러리를 추가하고 이를 사용하여 간단한 양식을 만드는 방법을 설명합니다. 접근성을 위해 jQuery Mobile에서는 모든 양식 요소를 의미 있는 레이블과 페어링해야 합니다. 보조 기술에 표시되도록 레이블을 숨기려면(예: 요소의 자리 표시자 특성이 레이블 역할을 할 때) 레이블 자체에 액세스할 수 있는 도우미 클래스 UI를 적용합니다. 요소 갤러리 모든 jQuery 모바일 위젯은 네이티브 컨트롤과 마찬가지로 요소에 표준 비활성화 된 특성을 추가하여 태그에서 비활성화 할 수 있습니다. 각 양식 위젯에는 표준 비활성화 및 각 양식 위젯에 설명된 메서드를 사용하도록 설정합니다. 다음은 비활성화된 위젯의 몇 가지 예입니다. HTML에서 병렬 비활성화 된 기능이 없기 때문에 양식 단추를 사용하지 않도록 설정할 수 있지만 단추 역할이있는 링크는 사용할 수 없습니다. 링크 기반 단추를 사용하지 않도록 설정해야 하는 경우 JavaScript를 사용하여 비활성화된 클래스 ui-disabled를 이 효과를 위해 생성된 향상된 단추 태그에 적용할 수 있습니다. 위의 코드에는 웹 페이지에 jQuery 모바일 «.js» 및 «.css» 파일이 포함되어 있으므로 외부 CSS를 적용할 필요가 없습니다. 예를 들어 Ajax를 통해 HTML 태그 블록(예: 로그인 양식)이 로드된 경우 생성 이벤트를 트리거하여 포함된 모든 위젯(이 경우 입력 및 단추)을 향상된 버전으로 자동으로 변환합니다. 이 시나리오의 코드는 다음과 같습니다 jQuery 모바일 양식의 표준 HTML 부분은 다음과 같습니다 jQuery 모바일은 모바일 친화적 인 웹 응용 프로그램을 개발하는 프레임 워크입니다.

최소한의 스크립팅으로 페이지를 배치하기 위해 HTML5 및 CSS3을 사용합니다. 또한 사용자 상호 작용을 원활하고 효과적으로 만들기 위해 많은 기능이나 이벤트가 포함되어 있습니다. 이 템플릿의 메타 뷰포트 태그는 화면 너비를 장치의 픽셀 너비로 설정합니다. CDN의 jQuery, jQuery Mobile 및 모바일 테마 스타일시트에 대한 참조는 모든 스타일과 스크립트를 추가합니다. jQuery 모바일 1.4는 jQuery 코어 1.8 및 최신 버전에서 작동합니다. 이 예제에서는 양식 제출 전에 유효성을 검사하기 위해 양식 필드에 대한 몇 가지 유효성 검사 규칙을 적용했습니다. CSS 파일 : jquery-mobile.css 우리는 이미 CDN에서 jQuery 모바일CSS를 연결했기 때문에 약간의 스타일이 필요합니다. jQuery Mobile에서 일부 향상된 양식 컨트롤은 단순히 스타일(입력)되지만 다른 컨트롤은 기본 컨트롤에서 빌드되고 동기화된 사용자 지정 컨트롤(선택, 슬라이더)입니다. JavaScript를 사용하여 양식 컨트롤을 프로그래밍 방식으로 업데이트하려면 먼저 기본 컨트롤을 조작한 다음 새로 고침 메서드를 사용하여 향상된 컨트롤을 새 상태와 일치하도록 업데이트하도록 지시합니다. 다음은 일반적인 양식 컨트롤을 업데이트한 다음 새로 고침 메서드를 호출하는 방법의 몇 가지 예입니다. 예를 들어, 한 가지 특별한 경우는 선택사항입니다.

위의 샘플은 선택사항이 포함된 경우 페이지의 선택 요소에서 모든 보강이 일어나는 것을 방지합니다. 네이티브 성능을 유지 하려는 경우, 메뉴 자체의 모양/느낌 및 jQuery 모바일에 의해 선택 버튼의 시각적 보강 혜택을 설정하려면 $.mobile.nativeSelectMenu 글로벌 설정으로 mobileinit 콜백에서 true로 설정하거나 데이터 네이티브 =를 사용 하 여» 사례별로 «true»를 말합니다.