基于require, zepto, underscore, bootstrap
1、html代码
<div id="layMainStore" class="layout-content"> <i id="cancleX" class="cancle-x layoutCancle">╳</i> <div class="layout-info"> <div id="layoutTxt" class="layout-txt"> </div> <div class="layout-btns"> <a id="layoutConfirm" class="btn btn-warning confirm">确定</a> <a id="layoutCancle" class="btn btn-default cancle">取消</a> </div> </div> </div>
2、css代码
bootstrap改造部分略 @charset 'UTF-8'; .lay-mask{ position: fixed; z-index: 1000; top: 0px; left: 50%; margin-left: -50%; width: 100%; height: 100%; background-color: #333; opacity: .7; } .layout-content{ position: fixed; z-index: 1111; width: 88%; top: 35%; left: 50%; margin-left: -44%; background-color: #fff; border: 1px solid #ededed; border-radius: 5px; padding: 12px; overflow: auto; } .layout-content .cancle-x{ position: absolute; font-style: normal; color: #666; font-size: 18px; right: 0px; top: 0px; padding: 12px; } .layout-content .layout-info{ margin-top: 25px; } .layout-content .layout-info .layout-txt{ text-align: center; margin-bottom: 25px; font-size: 16px; } .layout-content .layout-info .layout-btns{ text-align: center; margin-bottom: 10px; } .layout-content .layout-btns .confirm{ width: 120px; font-size: 16px; background-color: #fe9900; border-color: #fe9900; } .layout-content .layout-btns .cancle{}
3、js代码
//引用部分略; /*** * chenfeng_lian * @param options * @returns */ define([ 'zepto', 'underscore' ], function($, _) { function Layout(options){ this.options = $.extend(true, Layout.defaults, options); this.mask = null; this.$el = null; this.el = null; this.init(); } Layout.prototype = { init: function() { var self = this; self.getLayoutHtml(); }, getLayoutHtml: function() { var self = this, ops = self.options; //baseurl 代码模块 var baseUrl = 'text!'+base.context+'/html5/js_lib/common_template/layout.html'; require([baseUrl], function(partial) { $('body').append(_.template(partial)()); $('#layoutTxt').html(ops.sHtml); self.setMask(); self.$el = $('#layMainStore'); $('#'+ops.confirm).on('click',{opts: self}, self.fnConfirm); $('.'+ops.cancle).on('click', {opts: self}, self.fnCancle); }); }, common: {}, fnConfirm: function(e) { var self = e.data.opts; self.options.callbacks.fnConfirm && self.options.callbacks.fnConfirm(); self.mask.remove(); self.destory(); return false; }, fnCancle: function(e) { var self = e.data.opts; self.options.callbacks.fnCancle && self.options.callbacks.fnCancle(); self.mask.remove(); self.destory(); return false; }, setMask: function() { this.mask = $('<div class="lay-mask" id="layMaskStore"></div>').appendTo(this.options.parent); }, destory: function() { this.$el.remove(); } } Layout.defaults = { parent: 'body', sHtml: '这部分内容自己可选?', confirm: 'layoutConfirm', cancle: 'layoutCancle', callbacks: { fnConfirm: function() { window.console && console.log('fnConfirm...'); }, fnCancle: function() { window.console && console.log('fnCancle...'); } } }; return Layout; });
相关推荐
七彩绚丽背景透明css3模板_七彩 透明 css3 html layout 简单_html网站模板_网页源码移动端前端.rar
简单纯净杂志风格博客模板下载(5色版)_简单 博客 杂志 标准 layout html.zip简单纯净杂志风格博客模板下载(5色版)_简单 博客 杂志 标准 layout html.zip
简单纯净杂志风格博客模板下载(5色版)_简单 博客 杂志 标准 layout html.rar
简单纯净杂志风格博客模板下载(5色版)_简单 博客 杂志 标准 layout html
七彩绚丽背景透明css3模板_七彩 透明 css3 html layout 简单.zip七彩绚丽背景透明css3模板_七彩 透明 css3 html layout 简单.zip
七彩绚丽背景透明css3模板_七彩 透明 css3 html layout 简单.rar
玉模板built -编译jade时创建该文件夹layout -HTML和已编译文件layout/media/images/sprites - layout/media/images/sprites文件夹项目开始安装假设您已经安装了node.js和npm软件包管理npm 。 转到builder文件夹,...
后台单页layout网站模板是一款简单的后台网站管理模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
用jquery.layout.js布局的经典的oa模板,仿照桌面式的布局,有左侧导航树可进行收缩布局,使用tabs选项卡动态添加页面,也可以使用iframe改变路径,页面样式将美工专业修改。用vs2010编译通过,感谢提供素材的网友
多彩简单单栏布局博客css模板_橙色 简单 博客 layout.zip多彩简单单栏布局博客css模板_橙色 简单 博客 layout.zip
多彩简单单栏布局博客css模板_橙色 简单 博客 layout.rar
Twig是一个灵活,快速,安全的PHP模板语言。它将模板编译成经过优化的原始PHP代码。...{% extends "layout.html" %}{% block content %} Content of the page...{% endblock %} 标签:Twig
ace admin v1.3.1最新版本14-8-28,国外极品后台管理系统模板,多种开发语言可用,HTML5+Bootstrap3.0 截止2014年8月28日,官方最新1.3.1版, 已经将cdn外链js和css完整下载到本地。可直接流畅预览。 本模板仅供...
本文实例讲述了thinkphp5.1框架模板布局与模板继承。分享给大家供大家参考,具体如下: 模板全局配置 ... //开启全局模板布局 ...模板入口文件(application\index\view\index\index.html) 将公共模板头部
Thymeleaf布局方言增加了装饰模板的功能-自动针对HTML模板的<head>部分,并显式地通过开发人员可以添加到其模板的扩展点。 所有这些加起来创建了可以以类似于经典继承的方式扩展的布局。 例如,给定一个通用...
该软件包是用于的布局模板引擎。 安装 go get -u github.com/znbang/echo-layout 例子 views / layouts / main.html <!DOCTYPE html > < html lang =" en " > < head > < meta charset =" UTF-8...
基于官方 text/template 和 ... t, err := template.New("./fixtures/base/layout.html") t.Walk(pwd `/fixtures/base`, ".html.tmpl") t.Execute(os.Stdout, data) } 标签:Gotemplate
漂亮easyui皮肤组件html模板更新 修改默认的皮肤设计,更加时尚美观,原绿色主题也保留了,可自由切换。原layout组件顶部(North)和底部(South)做缩进时,会造成其他部分错位,如下图所示,本次更新做了修复。增加...
html
Fully Responsive HTML5 Markup & CSS3 JShint & HTML5 Valid Easy to understand HTML Structure, CSS Classes & Javascript markup Contrast Colors Well Documented HTML pages including: Front end - ...