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" 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));
/*
监听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结合实现简单的页面登录和页面跳转功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
分享Bootstrap简单表格、表单、登录页面
1.表格 <!doctype html> <html> <head> <meta charset="utf-8"> <title>表格</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/bootstrap.css&
-
bootstrap flask登录页面编写实例
本文章来为各位介绍一个python的例子,这个就是bootstrap+flask写登录页面的例子,希望文章能够对各位有所帮助. Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 .在一般应用或个人开发中,可以很容易的写出应用.本篇就结合bootstrap,写一个简单的login界面. 一.效果图 无图无真像,先上效果图: flask-bootstrap flask-login 二.目录结构 该代码写时采
-
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.j
-
使用JSP实现简单的用户登录注册页面示例代码解析
实验要求: 将实验2中的系统用户登录和注册页面改为JSP页面,并部署自己的Web应用于Tomcat服务器中 具体要求: 完成登录JSP页面设计和注册页面设计 在登录页面表单中使用request对象获取用户信息,建立新的JSP页面完成登录验证(用户名和密码自己指定即可). 验证结果显示(如登录成功/用户名密码错误,可以使用JavaScript,也可以使用新的JSP页面). 在注册页面表单中使用request对象获取用户注册信息(注册项目由自己指定),在新的JSP页面显示用户注册信息,并提示注册成功
-
require.js配合插件text.js实现最简单的单页应用程序
写了一个测试代码,用require.js配合它的一个插件text.js实现了最简单的单页应用程序,简单的记录一下,方便以后复习, git地址:https://github.com/lily1010/requireSPA 下面来看一下目录 从上面项目可以看出,我将css单独抽离出去,实现了按需加载,即加载test1.html时会加载test1.css,加载test2.html时会加载test2.css. 一.先来看入口index.html代码 <!DOCTYPE html> <html&g
-
require.js使用方法的简单代码讲解笔记
目录 目的: 基本API 第一步:a.js定义 第二步:引入这个模块 加载文件 页面需要加载多个js文件时,加载时浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长:由于js文件之间存在依赖关系,必须严格保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难.这种情况下require.js插件应运而生. 目的: 这个插件的体积非常小14k左右,主要是解决目前我们js文件引入臃肿的问题,它可以将我们需要的js文件定义成一个模块的方式,只要我们想引入某个模块,我们声明引入就可
-
利用require.js与angular搭建spa应用的方法实例
前言 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 本文是接上篇,angular 实战部分,angular比较适合spa项目,这里不借助任何seed和构建工具,直接从零搭建,基本的angular项目结构大致包含如下几个部分: 1)app.js 入口 2)index.htm
-
基于require.js的使用(实例讲解)
本篇文章总结下require.js使用方法. 1.为什么使用require.js? 使用之前,我的页面的js是这样的 <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script>
-
Angular.js与Bootstrap相结合实现表格分页代码
先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程
-
Angular.js与Bootstrap相结合实现手风琴菜单代码
标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式. 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码.接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先上效果图: <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page
-
require.js+vue开发微信上传图片组件
由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人--),没办法,想把vue用起来,唯有在原来的基础上改进.使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽.然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resou
-
require.js 加载 vue组件 r.js 合并压缩的实例
准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <div id="header"&g