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数据库.(之后更新) 登录页面源码 < ...
随机推荐
- 启动phpstyle Apache的80端口被win7的System PID=4的进程占用的解决方法
学习前端是,用到Ajax,php语言,操作mysql数据库,浏览器无法解析php代码(把源码输出):原因,我之前用的是tomcat服务器写jsp,servlet,php用的是apache服务器,没有配 ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- ajax 实现三级联动
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...
- jenkins gradle 编译遇到tomcat异常
使用gradle在jenkins 上构建的时候遇到 进行构建的时候报"Could not load Logmanager org.apache.juli.ClassLoaderLogMana ...
- JNDI常见配置方式
JNDI(Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API.命名服务将名称和对象联系起来,使得我们可以用 ...
- SQL基本编程，分支语句，循环语句，存储过程，触发器
基本编程: 定义变量 declare @变量名 数据类型 赋值 set @变量名 = 值 select @变量名 = 值 取值打印 select @变量名 print @变量名 映射到结果集 打印到消 ...
- ICC_lab总结——ICC_lab3：布局
PS:字丑,禁止转载. 做到了ICC workshop的第三个实验,理论与实践相结合,于是,先放一张总结图,这张总结图来自前面的博客,放在这里用来体现理论和实践的联系: 这个就是布局的理论部分,在IC ...
- vue学习笔记 样式 class style（五）
使用v-bind数据绑定class和style,v-bind:class可以与传统的class属性共存,其中可以用{}设置多个class,根据条件判断的语法是class名:条件,带-的class名需要 ...
- Unity 3D Framework Designing(4)——设计可复用的SubView和SubViewModel(Part 2)
在我们设计和开发应用程序时,经常要用到控件.比如开发一个客户端WinForm应用程序时,微软就为我们提供了若干控件,这些控件为我们提供了可被定制的属性和事件.属性可以更改它的外观,比如背景色,标题等, ...
- XML配置文件的命名空间与Spring配置文件中的头
一直以来,写Spring配置文件,都是把其他配置文件的头拷贝过来,最多改改版本号,也不清楚哪些是需要的,到底是干嘛的.今天整理一下,拒绝再无脑copy. 一.Spring配置文件常见的配置头 < ...