zepto.js 기반 로그 인 인터페이스 구현

4189 단어 zepto.js로그 인
최근 에 Zepto.js 가 쓴 로그 인 인터페이스,순수 js 인터페이스 를 사용 하여 남 겨 두 었 다가 나중에 로그 인 을 쓰 면 바로 사용 할 수 있 습 니 다.
다음은 효과 도.

html 에 zepto.js 라 이브 러 리 를 직접 도입 한 다음 에 아래 코드 를 삽입 하면 실현 할 수 있 습 니 다.

createLoginArea(); 
function createLoginArea() { 
 
  var field = $('<fieldset />'); 
 
  field.css({ 
    position:'absolute', 
    width:'60vmin', 
    height:'40vmin', 
    border: '1px solid #61B5CF' 
  }); 
  field.css('border-radius','1vmin'); 
 
  var legend = $('<legend />'); 
  legend.text("  "); 
  var ul = $('<ul />'); 
  ul.css('list-style','none'); 
  ul.css('text-align','center'); 
  ul.css({ 
    width: '100%', 
    height: '100%', 
    margin: '0', 
    display: 'inline' 
  }).css('padding-top', '5%') 
    .css('box-sizing', 'border-box'); 
 
  var nameLi = $('<li />',{class:'loginLi'}); 
  var nameDiv=$('<div />',{class:'textDiv'}); 
  nameDiv.text("   "); 
  var nameInput=$('<input />',{class:"input",type:"text",placeholder:"      "}); 
  nameLi.append(nameDiv); 
  nameLi.append(nameInput); 
  var passwordLi = $('<li />',{class:'loginLi'}); 
  var passWordDiv=$('<div />',{class:'textDiv'}); 
  passWordDiv.text("  "); 
  var passWordInput=$('<input />',{class:"input",type:"password",placeholder:"     "}); 
  passwordLi.append(passWordDiv); 
  passwordLi.append(passWordInput); 
 
  var submitLi = $('<li />',{class:'loginLi'}); 
  var submitBtn = $('<input />', {type: 'submit', value: '  '}); 
  var stateLi = $('<li />',{class:'loginLi'}); 
  submitLi.append(submitBtn); 
  ul.append(nameLi); 
  ul.append(passwordLi); 
  ul.append(submitLi); 
  ul.append(stateLi); 
  legend.appendTo(field); 
  ul.appendTo(field); 
  field.appendTo($('body')); 
 
 
 
  $('.loginLi').css({ 
    width: '80%', 
    height: '25%', 
    padding: '0', 
    margin: '0' 
  }).css('text-align', 'left') 
    .css('line-height', '9vmin'); 
  stateLi.css('text-align', 'center'); 
  submitLi.css('text-align', 'center'); 
  $('.input').css({ 
    position: 'relative', float: 'left', width: '60%', 
    height: '80%' 
  }).css('margin-left','1%'); 
  $('.textDiv').css({ 
    position: 'relative', float: 'left', width: '35%', 
    height: '80%' 
  }).css('text-align', 'right'); 
  stateLi.css('height','20%'); 
  //       
  var body=$('body'); 
  field.css({ 
    top:'20vmin', 
    left:parseInt((body.width()-field.width())/2) 
  }); 
  //     
  submitLi.on('click',function () { 
    $.ajax({ 
      type: 'POST', 
      url: 'url',//      
      data: {name:nameInput.val(),passWord:passWordInput.val()}, 
      dataType: 'json', 
      timeout: 3000, 
      context: $('body'), 
      success: function (data) { 
        stateLi.text(data); 
      }, 
      error: function (xhr, type) { 
        stateLi.text("    "); 
      } 
    }) 
  }); 
 
} 
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기