require.js插件-text.js使用

js 同时被 2 个专栏收录
44 篇文章 0 订阅
28 篇文章 2 订阅

代码下载:http://download.csdn.net/download/qq_29132907/10264289
运行结果:
这里写图片描述
这里写图片描述
1.目录树结构
这里写图片描述
2.main.js

require.config({
    paths:{
        "jquery":"lib/jquery-1.11.0",
        "text":"lib/text",
        "text1":"../template/test1.html",  //这里千万注意路径
        "text2":"../template/test2.html",
        "css1":"../style/test1.css",
        "css2":"../style/test2.css"
    }
})
require(['jquery','text!text1','text!text2','text!css1','text!css2'],function($,template1,template2,css1,css2){
//  进入页面先设置为页面test1.html内容
    $(".css-attribute").html(css1);
    $(".page").html(template1);

//  点击skip按钮设置为页面test2.html内容
    $(document).on('click','.skip',function(){
        $(".css-attribute").html(css2);
        $(".page").html(template2);
    })
    $(document).on('click','.skip2',function(){
        $(".css-attribute").html(css1);
        $(".page").html(template1);
    })
})

3.test.css

.test1{
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    background-color: #ccc;
}
.skip{
    position: absolute;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

4.test2.css

.test2{
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    background-color: pink;
}
.skip2{
    position: absolute;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

5.test1.html

<div class="test1">
    <button class="skip">点击我跳到SPA第二页</button>
</div>

6.test2.html

<div class="test2">
    <button class="skip2">我是第二页,点击我回第一页</button>
</div>

7.index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css" class="css-attribute">

        </style>
    </head>
    <body>
        <script data-main="js/main" src="js/require.js"></script>
        <div class="page">

        </div>
    </body>
</html>
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值