时间:2021-05-18
最近使用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("上传失败"); } }) }); }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法。分享给大家供大家参考。具体如下:最近在弄一个手机版的网站,本来想用jQueryMobile,但文件
本文实例为大家分享了js实现移动端轮播图效果的具体代码,供大家参考,具体内容如下插件使用:1.zepto.js2.touch.js实现效果html部分:css部
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧。公司的移动端项目是基于zepto的,有一个页面
基于zepto,支持多文件上传,进度和图片预览,用于手机端。(function($){$.extend($,{fileUpload:function(optio
最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能