web前端-单页版/一个页面-实现(区别于iframe)
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
<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-14td>
<td>人生似修行td>
tr>
<tr>
<td>张爱玲td>
<td>汉族td>
<td>1920-09-30td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…td>
tr>
<tr>
<td>Helen Kellertd>
<td>拉丁美裔td>
<td>1880-06-27td>
<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-14td>
<td>人生似修行td>
tr>
<tr>
<td>张爱玲td>
<td>汉族td>
<td>1920-09-30td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…td>
tr>
<tr>
<td>Helen Kellertd>
<td>拉丁美裔td>
<td>1880-06-27td>
<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-29td>
<td>人生就像是一场修行td>
tr>
<tr>
<td>许闲心td>
<td>2016-11-28td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…td>
tr>
<tr>
<td>sentsintd>
<td>2016-11-27td>
<td> Life is either a daring adventure or nothing.td>
tr>
tbody>
table>
初入前端，请多指教！ 如有问题，请留言！