html5 Layout 模版

最新推荐文章于 2023-12-30 18:49:56 发布

原创最新推荐文章于 2023-12-30 18:49:56 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用HTML5，结合require、zepto、underscore和bootstrap创建布局模板。内容包括html、css和js代码的详细步骤。

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