require.js与bootstrap结合实现简单的页面登录和页面跳转功能


Posted in Javascript onMay 12, 2017

小颖的这个demo其实很简单的,大家一起来先来看看页面效果图:         

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));
 /*
 监听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结合实现简单的页面登录和页面跳转功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
jQuery手风琴的简单制作
May 12 #jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 #jQuery
Centos6.8下Node.js安装教程
May 12 #Javascript
详解Node.js项目APM监控之New Relic
May 12 #Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 #Javascript
WebSocket实现简单客服聊天系统
May 12 #Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 #Javascript
You might like
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
webpack引入eslint配置详解
2018/01/22 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
商务英语专业自荐信
2013/10/14 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
节约用水倡议书
2014/04/16 职场文书
红色旅游心得体会
2014/09/03 职场文书
工作散漫检讨书
2014/09/16 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
毕业生个人自荐书
2015/03/05 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL