require.js+bootstrap实现简单的页面登录和页面跳转
小颖的这个demo其实很简单的，大家一起来先来看看页面效果图： 
目录：
代码：
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">
<link rel="stylesheet" href="css/base.css">
<!-- 加载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));
/*
监听hashchange切换view
*/
$(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
};
});
js/lib下分别是：jquery.js、require.js、text.js这三个文件，小颖就不在这里展示了，大家可以在网上下一个，小颖把text.js下载地址给大家提供出来嘻嘻：text.js
require.js+bootstrap实现简单的页面登录和页面跳转的更多相关文章
- 绿色简单的学校登录html页面
效果预览:http://hovertree.com/texiao/css/22/ 代码如下: <!DOCTYPE html> <html> <head> <m ...
- Node.js基于Express框架搭建一个简单的注册登录Web功能
这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...
- node.js(node.js+mongoose小案例)_实现简单的注册登录退出
一.前言 通过node.js基本知识对node.js基本知识的一个简单应用 1.注册 2.登录 3.退出 二.基本内容 1.项目结构搭建如图所示 2.这个小案列中用到了art-template子模板以 ...
- bootstrap 一个简单的登陆页面
效果如图:用bootstrap 写的一个简单的登陆 一.修改样式 样式可以自己调整,例如换个背景色之类的,修改 background-color属性就可以 #from { background-col ...
- Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页
前言 Bootstrap 是流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.源自于twiteer内部的开发框架. 当前(2019-05)最新版本是v3.3. ...
- require.js模块化管理和加载js（按需加载）简单实例教学
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- 如何利用Require.Js管理多页面站点文件(译)
英文版地址 最近使用 Require.Js 的时候我发现它确实是一个改善代码管理的一个好方法.我以前发表Backbone类的文章时曾提到过 Require,但此前,我从未在传统的多页面网站内使用到 R ...
- require.js 模块化简单理解
组件化 基于UI 样式布局 没有过多 js 代码操作的 比如:一个导航栏 一个表单 一个搜索框 一个侧边栏 一个html 等等.... 模块化 基于功能模块 一个可以替换的js部分称之为模块(modu ...
- HTML登录注册页面简单实现
github:传送门 , 码云: 传送门 效果参考: 登录页面,注册页面 使用了bootstrap,jQuery. 后端使用的CGI处理表单,存入MySQL数据库.(之后更新) 登录页面源码 < ...
随机推荐
- 非服务器的定期校正时间 Anacron
与服务器不同,编程和办公用计算机不是连续24小时运行的.开关机的时间不固定,类似较时这样的任务无法保证运行. 对于这类机器,可以考虑使用 Anacron 进行设置. 在 Archlinux 中, An ...
- SQL一次查出相关类容避免长时间占用表(上)
/* server: db: EDI */ -- 以下案例多次查询同一张表,仅有组合条件Name+Direction不同 --可以使用一次查出相关类容避免长时间占用表 USE EDI GO DECLA ...
- QT 的使用及编写代码遇到的问题和解决方法
QT 中将 QString 转化为 const char * 的问题 我开始的代码是这样的: QString qstr = "abcdef"; const char * cc = ...
- .进程&线程（&java.lang.Thread）详解
一.进程与线程 进程 我们在进行操作电脑的时候,通常会打开浏览器,通讯工具等应用程序,这个时候CPU通过作业调度在内存中就会分配一些空间让它们处于宏观上的运行状态(处于可以被CPU执行的状态),而这部 ...
- 双系统删除Ubuntu后出现grub界面而无法正常启动Windows系统的解决方法
第一次安装双系统的时候由于不怎么会弄,设置了ubuntu引导windows,这种方法是非常不推荐的,因为当ubuntu出现问题或者是当你不再使用ubuntu的时候,删除ubuntu就会成为一个很麻烦的 ...
- Django通用视图执行过程
使用通用视图后,Django请求处理过程(以ListView为例):在我们自定义的视图中: class IndexView(ListView): template_name = 'blog/index ...
- C# .NET 逻辑层的框架设计
前述:在我的了解中,一个大项目的逻辑层是不可捉摸的,对于不同项目或场景都是不同的逻辑.先说明,我的想法是对逻辑层类结构,以及如何操作逻辑的方法进行抽象的封装.并且考虑将不同类,或者不同程序集中的逻辑方 ...
- R语言基因组数据分析可能会用到的data.table函数整理
R语言data.table包是自带包data.frame的升级版,用于数据框格式数据的处理,最大的特点快.包括两个方面,一方面是写的快,代码简洁,只要一行命令就可以完成诸多任务,另一方面是处理快,内部 ...
- 浅谈隐语义模型和非负矩阵分解NMF
本文从基础介绍隐语义模型和NMF. 隐语义模型 ”隐语义模型“常常在推荐系统和文本分类中遇到,最初来源于IR领域的LSA(Latent Semantic Analysis),举两个case加快理解. ...
- Spring Boot 注解的使用
Spring Boot 优于Spring mvc ,SSM,SSH 的一个亮点就是他使用了好多的注解. 1. @Autowired 这个注解的作用是将其他的类,接口引入,类似于之前的类的初始化等,用这 ...