require.js与bootstrap结合怎么实现页面登录和页面跳转功能

这篇文章主要介绍了require.js与bootstrap结合怎么实现页面登录和页面跳转功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联是一家专业提供紫云企业网站建设,专注与网站设计制作、网站设计、H5高端网站建设、小程序制作等业务。10年已为紫云众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

页面效果图：

代码：

inde.html




 
 
 require.js小demo

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下的文件：


 
 
 Username

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 }; });

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结合怎么实现页面登录和页面跳转功能

其他资讯