jQuery 모바일 날짜 플러그인 Mobiscroll 사용 지침_jquery

최근 모바일 개발에서는 웹 플러그인만큼 모바일 플러그인도 많지 않고, 직접 패키징해야 하는 경우도 적지만, 실력은 꽝입니다. 충분하지 않습니다.

JQM도 내장된 날짜 플러그인을 제공하지만 스타일이 보기에 좋지 않아서 Baidu와 Google을 이용해야 했고 jquery-mobile-datebox와 mobiscroll-2.3 두 개를 찾았습니다

jqueryMobileDatebox는 보드에서 성능이 좋지 않고 성능이 좀 느립니다

모비스스크롤의 성능은 전작보다 좋아졌고, 효과는 더 단순해지고 스와이프는 더 매끄러워졌습니다

함께 비교해 볼까요

독자 여러분, 어떤 것이 더 좋아 보인다고 생각하시나요?

아무튼 이 녀석의 활용법은 모비스스크롤이 더 효과적인 것 같아요

1단계: 압축 패키지를 다운로드하려면 공식 웹사이트로 이동하세요. 다운로드하기 전에 등록해야 합니다. 다운로드 시 사용하는 프레임워크와 스킨 스타일을 선택하실 수 있습니다. 아래 사진을 참고하세요

성공적으로 등록 및 다운로드가 완료된 것으로 가정합니다

두 번째 단계는 새 HTML5 파일을 만들고 jquery.js, jquerymobile.js 및 기타 필요한 파일을 가져온 후 파일에 다음 코드를 작성하는 것입니다.

 <div data-role="fieldcontain">
     <label for="txtBirthday">出生日期：</label>
     <input type="text" data-role="datebox"  id="txtBirthday" name="birthday" />
 </div>

다음과 같이 날짜 컨트롤을 초기화할 수 있습니다.

$('input:jqmData(role="datebox")').mobiscroll().date();

미리보기를 통해 사용할 준비가 되었는지 확인하세요! 이 인터페이스만 영어로 되어 있어 중국인에게는 다소 불편하고, 공식 웹사이트에서는 중국어 언어 팩을 제공하지 않지만 상관없습니다. 공식 웹사이트의 API는 여전히 일부 공통적으로 설정할 수 있습니다. 일반적인 날짜 형식을 따르도록 속성을 사용했습니다.

//初始化日期控件
  var opt = {
    preset: 'date', //日期
    theme: 'jqm', //皮肤样式
    display: 'modal', //显示方式 
    mode: 'clickpick', //日期选择模式
    dateFormat: 'yy-mm-dd', // 日期格式
    setText: '确定', //确认按钮名称
    cancelText: '取消',//取消按钮名籍我
    dateOrder: 'yymmdd', //面板中日期排列格式
    dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
    endYear:2020 //结束年份
  };
  
  $('input:jqmData(role="datebox")').mobiscroll(opt);

이제 렌더링을 살펴보겠습니다

이제 확실히 보이시죠. 적지 않고 이 정도만 적겠습니다. 공식 홈페이지의 DOCS는 매우 자세하기 때문에 여기에는 하나씩 나열하지 않겠습니다. 관심 있는 친구들은 가서 공부해 보세요.