Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

setting页面的静态部分和部分js代码提交 #2

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

setting页面的静态部分和部分js代码提交 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
543c54b
update 02.03
mieruko0713 Feb 3, 2017
bfaaf30
update 02.03
mieruko0713 Feb 3, 2017
c88b391
update 02.03
mieruko0713 Feb 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
81 changes: 81 additions & 0 deletions setting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>咩咩单词-账户设置</title>
<link rel="stylesheet" type="text/css" href="static/css/normalize.css">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/semantic/semantic.min.css">
<script type="text/javascript" src="assets/semantic/semantic.min.js"></script>
<script type="text/javascript" src="static/js/typed.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<script type="text/javascript" src="static/js/main.js"></script>
</head>
<body>
<div class="container">
<div class="setting">
<div class="form1 ui form">
<h2 class="setting-header">个人资料</h2>
<div class="picture">
<img src="assets/image/logo.png" alt="个人头像">
</div>
<p class="name-info">
<label>用户名</label>
<span>maruko0713</span>
</p>
<p class="birthday">
<label>生日</label>
<span>1996-07-13</span>
</p>
<p class="sex">
<label>性别</label>
<span>女</span>
</p>
<div class="button">
<button class="ui green basic button" onclick="modify()">编辑资料</button>
</div>
</div>
<div class="form2 hidden ui form">
<h2 class="setting-header">编辑资料</h2>
<div class="picture field">
<img src="assets/image/logo.png" alt="个人头像">
<span class="ui fluid button btn-file">
<span id="buttonLabel">上传新头像</span>
<input type="file" name="img">
</span>
</div>
<div class="username field">
<label>用户名</label>
<input id="username" type="text" placeholder="请输入你的新用户名^_^">
</div>
<div class="birthday field">
<label>生日</label>
<input id="birthday" type="date" placeholder="dddd-dd-dd">
</div>
<div class="sex inline fields">
<label>性别</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" checked="checked" name="sex" value="m">
<label>男生</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" checked="checked" name="sex" value="f">
<label>女生</label>
</div>
</div>
</div>
<div class="button">
<button class="ui green basic button" onclick="save()">保存</button>
<button class="ui button" onclick="back()">取消</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
41 changes: 41 additions & 0 deletions static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
clear: both;
}

.hidden {
display:none;
}

.container {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -92,4 +96,41 @@
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}


.setting-header {
width:100%;
text-align:center;
}

.form1 label {
display:inline-block;
width:100px;
}

.button {
text-align:center;
margin-top:20px;
}

.btn-file {
position: relative;
overflow: hidden;
}

.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
32 changes: 32 additions & 0 deletions static/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,3 +55,35 @@ function signUp() {
console.info("create user failed.", err);
});
}


// setting页面事件
function modify() {
var form2 = $(".form2");
var form1 = $(".form1");
form2.removeClass("hidden");
form1.addClass("hidden");

}

function save() {
var form2 = $(".form2");
var form1 = $(".form1");
var name = $("#username").val();
var birthday = $("#birthday").val();
var sex = $("input[name='sex']:checked").val();
var reg = /dddd\-dd\-dd/;
if(!reg.test(birthday)) {
alert("请输入正确的日期格式");
return
}
form2.addClass("hidden");
form1.removeClass("hidden");
}

function back() {
var form2 = $(".form2");
var form1 = $(".form1");
form2.addClass("hidden");
form1.removeClass("hidden");
}