web前端-单页版/一个页面-的实现(区别于iframe)
好奇心的小白 就来研究一下单页版的实现–不喜勿喷-哈哈
1.用到的知识
Html、Css、JavaScript 和Layui、jQuery
2.CDN引用所需Layui和jQuery
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layui-v2.5.7/layui.js"></script>
3.核心-利用ajax请求实现
<script>
$("a").click(function(){
var url = $(this).attr('data-url');
$("#container").html(' '); //清空内容
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function (data) {
$("#container").html(data); //加载内容
element.init();
},
error: function (xhr, textstatus, thrown) {
return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
}
});
});
</script>
4.源码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>单页版 实现探究</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css" />
</head>
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item layui-this"><a href="javascript:;" data-url="demo1.html" target="_self">菜单管理</a></li>
<li class="layui-nav-item "><a href="javascript:;" data-url="demo2.html" target="_self">用户管理</a></li>
<li class="layui-nav-item"><a href="javascript:;" data-url="demo3.html" target="_self">最新产品</a></li>
</ul>
<div id="container" style="padding:30px">
<div class="layui-form">
<table class="layui-table">
<colgroup>
<col width="150" />
<col width="150" />
<col width="200" />
<col />
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>出场时间</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>人生似修行</td>
</tr>
<tr>
<td>张爱玲</td>
<td>汉族</td>
<td>1920-09-30</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>Helen Keller</td>
<td>拉丁美裔</td>
<td>1880-06-27</td>
<td> Life is either a daring adventure or nothing.</td>
</tr>
<tr>
<td>岳飞</td>
<td>汉族</td>
<td>1103-北宋崇宁二年</td>
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强，则国强。国强，则猿更强！ </td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://www.layuicdn.com/layui-v2.5.7/layui.js"></script>
<script>
$("a").click(function(){
var url = $(this).attr('data-url');
$("#container").html(' '); //清空内容
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function (data) {
$("#container").html(data); //加载内容
element.init();
},
error: function (xhr, textstatus, thrown) {
return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
}
});
});
</script>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
demo1.html
<div class="layui-form">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>出场时间</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>人生似修行</td>
</tr>
<tr>
<td>张爱玲</td>
<td>汉族</td>
<td>1920-09-30</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>Helen Keller</td>
<td>拉丁美裔</td>
<td>1880-06-27</td>
<td> Life is either a daring adventure or nothing.</td>
</tr>
<tr>
<td>岳飞</td>
<td>汉族</td>
<td>1103-北宋崇宁二年</td>
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强，则国强。国强，则猿更强！ </td>
</tr>
</tbody>
</table>
</div>
demo2.html
<style>
.layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
</style>
<div class="layuimini-container layuimini-page-anim">
<div class="layuimini-main">
<div class="layui-form layuimini-form">
<div class="layui-form-item">
<label class="layui-form-label required">管理账号</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" lay-reqtext="管理账号不能为空" placeholder="请输入管理账号" value="admin" class="layui-input">
<tip>填写自己管理账号的名称。</tip>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">手机</label>
<div class="layui-input-block">
<input type="number" name="phone" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="email" name="email" placeholder="请输入邮箱" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注信息</label>
<div class="layui-input-block">
<textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use(['form','miniPage'], function () {
var form = layui.form,
layer = layui.layer,
miniPage = layui.miniPage;
/**
* 初始化表单，要加上，不然刷新部分组件可能会不加载
*/
form.render();
//监听提交
form.on('submit(saveBtn)', function (data) {
var index = layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
}, function () {
layer.close(index);
miniPage.hashHome();
});
return false;
});
});
</script>
demo3.html
<table class="layui-table" lay-size="sm">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>sentsin</td>
<td>2016-11-27</td>
<td> Life is either a daring adventure or nothing.</td>
</tr>
</tbody>
</table>
初入前端，请多指教！ 如有问题，请留言！
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
