zepto.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(" ");
}
})
});
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
셸 로그 인 에 대한 지식이 프로 세 스 는 사용자 가 시스템 에 로그 인 한 후에 실행 하 는 명령 해석 기 나 특정한 프로그램, 즉 Shell 입 니 다.Shell 은 사용자 와 Linux 시스템 간 의 인터페이스 입 니 다.리 눅 스 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.