这篇文章主要介绍了require.js与bootstrap结合怎么实现页面登录和页面跳转功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。页
这篇文章主要介绍了require.js与bootstrap结合怎么实现页面登录和页面跳转功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
页面效果图：
目录：
代码：
inde.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta Http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>require.js小demo</title>
<link rel="stylesheet" href="CSS/bootstrap.css" rel="external nofollow" >
<link rel="stylesheet" href="css/base.css" rel="external nofollow" >
<!-- 加载require.js文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样： -->
<!-- <script src="js/require.js" defer async="true" ></script> -->
<!--async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。 -->
<!-- 加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。只需要写成下面这样就行了： -->
<!-- <script src="js/require.js" data-main="src/main.js"></script> -->
<script type="text/javascript" data-main="js/app" src="js/lib/require.js"></script>
</head>
<body>
<div class="view-container"></div>
</body>
</html>js下的文件：
app.js
requirejs.config({
baseUrl: 'js/lib',
paths: {
Jquery: 'jquery',
app: '../app'
}
});
require(['app/main'], function() {
});js/app下的文件：
main.js
define(['jquery'], function($) {
$(function() {
if(location.hash =="#login"){
loads(hashToPath('login'));
}else{
location.hash = "#login";
}
loads(hashToPath(location.hash));
$(window).on('hashchange', function (e) {
var hash = location.hash;
if(hash.indexOf('_') !== -1){
hash = hash.substring(0, hash.indexOf('_'));
}
loads(hashToPath(hash));
});
function hashToPath(hash) {
if (hash.indexOf('#') !== -1) {
hash = hash.substring(1);
}
return 'app/' + hash + '/' + hash;
}
function loads(path) {
require([path], function(view) {
view.load();
});
}
});
});BaseController.js
define(function() {
var setTemplate=function(template){
this.template = template;
};
var render=function(container){
// 获取模板
var templateStr = this.template;
// 加载页面
container.innerHTML = templateStr;
};
return {
setTemplate:setTemplate,
render:render
}
});Base.js
define(function(require) {
var viewContainer = null;
function getViewContainer() {
return viewContainer ? viewContainer : viewContainer = $('.view-container')[0];
}
return {
getViewContainer: getViewContainer
}
});js/app/login下的文件：
login.html
<div class="login-content">
<fORM class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label" id="userName">Username</label>
<div class="col-sm-5 col-xs-5">
<input type="text" class="form-control" id="inputUserName" placeholder="Username">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">PassWord</label>
<div class="col-sm-5 col-xs-2">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5 col-xs-5">
<button type="button" class="btn btn-default" id="login">Sign in</button>
</div>
</div>
</form>
</div>login.js
define(function(require) {
var Base = require('app/Base'),
controller = require('../BaseController'),
template = require('text!./login.html');
var load = function() {
render();
bind();
run();
};
function render() {
controller.setTemplate(template);
controller.render(Base.getViewContainer());
}
function bind() {
$('#login').on('click',function () {
if($('#inputUserName').val()=='小颖'&&$('#inputPassword').val()==1028){
alert('登陆成功！');
location.hash = "home";
}else {
alert('登陆失败！');
}
});
}
function run() {
$('.view-container').css("background","url(images/xiangrikui3.jpg) center/cover no-repeat");
}
return {
load: load
};
});js/app/home下的文件：
home.html
<div class="home-content">
欢迎小颖
</div>home.js
define(function(require) {
var Base = require('app/Base'),
controller = require('../BaseController'),
template = require('text!./home.html');
var load = function() {
render();
bind();
run();
};
function render() {
controller.setTemplate(template);
controller.render(Base.getViewContainer());
}
function bind() {
}
function run() {
$('.view-container').css('background-image','');
}
return {
load: load
};
});感谢你能够认真阅读完这篇文章，希望小编分享的“require.js与bootstrap结合怎么实现页面登录和页面跳转功能”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网html频道，更多相关知识等着你来学习!
--结束END--
本文标题: require.js与bootstrap结合怎么实现页面登录和页面跳转功能
本文链接: https://www.lsjlt.com/news/71611.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0