/**
* easyDialog v2.2
* Url : http://stylechen.com/easydialog-v2.0.html
* Author : chenmnkken@gmail.com
* Date : 2012-04-22
*/
(function( win, undefined ){ var doc = win.document,
docElem = doc.documentElement; var easyDialog = function(){ var body = doc.body,
isIE = !-[1,], // 判断IE6/7/8 不能判断IE9
isIE6 = isIE && /msie 6/.test( navigator.userAgent.toLowerCase() ), // 判断IE6
uuid = 1,
expando = 'cache' + ( +new Date() + "" ).slice( -8 ), // 生成随机数
cacheData = {
/**
* 1 : {
* eclick : [ handler1, handler2, handler3 ];
* clickHandler : function(){ //... };
* }
*/
}; var Dialog = function(){}; Dialog.prototype = {
// 参数设置
getOptions : function( arg ){
var i,
options = {},
// 默认参数
defaults = {
container: null, // string / object 弹处层内容的id或内容模板
overlay: true, // boolean 是否添加遮罩层
drag: true, // boolean 是否绑定拖拽事件
fixed: true, // boolean 是否静止定位
follow: null, // string / object 是否跟随自定义元素来定位
followX: 0, // number 相对于自定义元素的X坐标的偏移
followY: 0, // number 相对于自定义元素的Y坐标的偏移
autoClose: 0, // number 自动关闭弹出层的时间
lock: false, // boolean 是否允许ESC键来关闭弹出层
callback: null // function 关闭弹出层后执行的回调函数
/**
* container为object时的参数格式
* container : {
* header : '弹出层标题',
* content : '弹出层内容',
* yesFn : function(){}, // 确定按钮的回调函数
* noFn : function(){} / true, // 取消按钮的回调函数
* yesText : '确定', // 确定按钮的文本,默认为‘确定’
* noText : '取消' // 取消按钮的文本,默认为‘取消’
* }
*/
}; for( i in defaults ){
options[i] = arg[i] !== undefined ? arg[i] : defaults[i];
}
Dialog.data( 'options', options );
return options;
}, // 防止IE6模拟fixed时出现抖动
setBodyBg : function(){
if( body.currentStyle.backgroundAttachment !== 'fixed' ){
body.style.backgroundImage = 'url(about:blank)';
body.style.backgroundAttachment = 'fixed';
}
}, // 防止IE6的select穿透
appendIframe : function(elem){
elem.innerHTML = '<iframe style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;border:0 none;filter:alpha(opacity=0)"></iframe>';
}, /**
* 设置元素跟随定位
* @param { Object } 跟随的DOM元素
* @param { String / Object } 被跟随的DOM元素
* @param { Number } 相对于被跟随元素的X轴的偏移
* @param { Number } 相对于被跟随元素的Y轴的偏移
*/
setFollow : function( elem, follow, x, y ){
follow = typeof follow === 'string' ? doc.getElementById( follow ) : follow;
var style = elem.style;
style.position = 'absolute';
style.left = Dialog.getOffset( follow, 'left') + x + 'px';
style.top = Dialog.getOffset( follow, 'top' ) + y + 'px';
}, /**
* 设置元素固定(fixed) / 绝对(absolute)定位
* @param { Object } DOM元素
* @param { Boolean } true : fixed, fasle : absolute
*/
setPosition : function( elem, fixed ){
var style = elem.style;
style.position = isIE6 ? 'absolute' : fixed ? 'fixed' : 'absolute';
if( fixed ){
if( isIE6 ){
style.setExpression( 'top','fuckIE6=document.documentElement.scrollTop+document.documentElement.clientHeight/2+"px"' );
}
else{
style.top = '50%';
}
style.left = '50%';
}
else{
if( isIE6 ){
style.removeExpression( 'top' );
}
style.top = docElem.clientHeight/2 + Dialog.getScroll( 'top' ) + 'px';
style.left = docElem.clientWidth/2 + Dialog.getScroll( 'left' ) + 'px';
}
}, /**
* 创建遮罩层
* @return { Object } 遮罩层
*/
createOverlay : function(){
var overlay = doc.createElement('div'),
style = overlay.style; style.cssText = 'margin:0;padding:0;border:none;width:100%;height:100%;background:#333;opacity:0.6;filter:alpha(opacity=60);z-index:9999;position:fixed;top:0;left:0;'; // IE6模拟fixed
if(isIE6){
body.style.height = '100%';
style.position = 'absolute';
style.setExpression('top','fuckIE6=document.documentElement.scrollTop+"px"');
} overlay.id = 'overlay';
return overlay;
}, /**
* 创建弹出层
* @return { Object } 弹出层
*/
createDialogBox : function(){
var dialogBox = doc.createElement('div');
dialogBox.style.cssText = 'margin:0;padding:0;border:none;z-index:10000;';
dialogBox.id = 'easyDialogBox';
return dialogBox;
}, /**
* 创建默认的弹出层内容模板
* @param { Object } 模板参数
* @return { Object } 弹出层内容模板
*/
createDialogWrap : function( tmpl ){
// 弹出层标题
var header = tmpl.header ?
'<h4 class="easyDialog_title" id="easyDialogTitle"><a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">&times;</a>' + tmpl.header + '</h4>' :
'',
// 确定按钮
yesBtn = typeof tmpl.yesFn === 'function' ?
'<button class="btn_highlight" id="easyDialogYesBtn">' + ( typeof tmpl.yesText === 'string' ? tmpl.yesText : '确定' ) + '</button>' :
'',
// 取消按钮
noBtn = typeof tmpl.noFn === 'function' || tmpl.noFn === true ?
'<button class="btn_normal" id="easyDialogNoBtn">' + ( typeof tmpl.noText === 'string' ? tmpl.noText : '取消' ) + '</button>' :
'',
// footer
footer = yesBtn === '' && noBtn === '' ? '' :
'<div class="easyDialog_footer">' + noBtn + yesBtn + '</div>', dialogTmpl = [
'<div class="easyDialog_content">',
header,
'<div class="easyDialog_text">' + tmpl.content + '</div>',
footer,
'</div>'
].join(''), dialogWrap = doc.getElementById( 'easyDialogWrapper' ),
rScript = /<[\/]*script[\s\S]*?>/ig; if( !dialogWrap ){
dialogWrap = doc.createElement( 'div' );
dialogWrap.id = 'easyDialogWrapper';
dialogWrap.className = 'easyDialog_wrapper';
}
dialogWrap.innerHTML = dialogTmpl.replace( rScript, '' );
return dialogWrap;
}
}; /**
* 设置并返回缓存的数据 关于缓存系统详见:http://stylechen.com/cachedata.html
* @param { String / Object } 任意字符串或DOM元素
* @param { String } 缓存属性名
* @param { Anything } 缓存属性值
* @return { Object }
*/
Dialog.data = function( elem, val, data ){
if( typeof elem === 'string' ){
if( val !== undefined ){
cacheData[elem] = val;
}
return cacheData[elem];
}
else if( typeof elem === 'object' ){
// 如果是window、document将不添加自定义属性
// window的索引是0 document索引为1
var index = elem === win ? 0 :
elem.nodeType === 9 ? 1 :
elem[expando] ? elem[expando] :
(elem[expando] = ++uuid), thisCache = cacheData[index] ? cacheData[index] : ( cacheData[index] = {} ); if( data !== undefined ){
// 将数据存入缓存中
thisCache[val] = data;
}
// 返回DOM元素存储的数据
return thisCache[val];
}
}; /**
* 删除缓存
* @param { String / Object } 任意字符串或DOM元素
* @param { String } 要删除的缓存属性名
*/
Dialog.removeData = function( elem, val ){
if( typeof elem === 'string' ){
delete cacheData[elem];
}
else if( typeof elem === 'object' ){
var index = elem === win ? 0 :
elem.nodeType === 9 ? 1 :
elem[expando]; if( index === undefined ) return;
// 检测对象是否为空
var isEmptyObject = function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
},
// 删除DOM元素所有的缓存数据
delteProp = function(){
delete cacheData[index];
if( index <= 1 ) return;
try{
// IE8及标准浏览器可以直接使用delete来删除属性
delete elem[expando];
}
catch ( e ) {
// IE6/IE7使用removeAttribute方法来删除属性(document会报错)
elem.removeAttribute( expando );
}
}; if( val ){
// 只删除指定的数据
delete cacheData[index][val];
if( isEmptyObject( cacheData[index] ) ){
delteProp();
}
}
else{
delteProp();
}
}
}; // 事件处理系统
Dialog.event = { bind : function( elem, type, handler ){
var events = Dialog.data( elem, 'e' + type ) || Dialog.data( elem, 'e' + type, [] );
// 将事件函数添加到缓存中
events.push( handler );
// 同一事件类型只注册一次事件,防止重复注册
if( events.length === 1 ){
var eventHandler = this.eventHandler( elem );
Dialog.data( elem, type + 'Handler', eventHandler );
if( elem.addEventListener ){
elem.addEventListener( type, eventHandler, false );
}
else if( elem.attachEvent ){
elem.attachEvent( 'on' + type, eventHandler );
}
}
}, unbind : function( elem, type, handler ){
var events = Dialog.data( elem, 'e' + type );
if( !events ) return; // 如果没有传入要删除的事件处理函数则删除该事件类型的缓存
if( !handler ){
events = undefined;
}
// 如果有具体的事件处理函数则只删除一个
else{
for( var i = events.length - 1, fn = events[i]; i >= 0; i-- ){
if( fn === handler ){
events.splice( i, 1 );
}
}
}
// 删除事件和缓存
if( !events || !events.length ){
var eventHandler = Dialog.data( elem, type + 'Handler' );
if( elem.addEventListener ){
elem.removeEventListener( type, eventHandler, false );
}
else if( elem.attachEvent ){
elem.detachEvent( 'on' + type, eventHandler );
}
Dialog.removeData( elem, type + 'Handler' );
Dialog.removeData( elem, 'e' + type );
}
}, // 依次执行事件绑定的函数
eventHandler : function( elem ){
return function( event ){
event = Dialog.event.fixEvent( event || win.event );
var type = event.type,
events = Dialog.data( elem, 'e' + type ); for( var i = 0, handler; handler = events[i++]; ){
if( handler.call(elem, event) === false ){
event.preventDefault();
event.stopPropagation();
}
}
}
}, // 修复IE浏览器支持常见的标准事件的API
fixEvent : function( e ){
// 支持DOM 2级标准事件的浏览器无需做修复
if ( e.target ) return e;
var event = {}, name;
event.target = e.srcElement || document;
event.preventDefault = function(){
e.returnValue = false;
};
event.stopPropagation = function(){
e.cancelBubble = true;
};
// IE6/7/8在原生的window.event中直接写入自定义属性
// 会导致内存泄漏,所以采用复制的方式
for( name in e ){
event[name] = e[name];
}
return event;
}
}; /**
* 首字母大写转换
* @param { String } 要转换的字符串
* @return { String } 转换后的字符串 top => Top
*/
Dialog.capitalize = function( str ){
var firstStr = str.charAt(0);
return firstStr.toUpperCase() + str.replace( firstStr, '' );
}; /**
* 获取滚动条的位置
* @param { String } 'top' & 'left'
* @return { Number }
*/
Dialog.getScroll = function( type ){
var upType = this.capitalize( type );
return docElem['scroll' + upType] || body['scroll' + upType];
}; /**
* 获取元素在页面中的位置
* @param { Object } DOM元素
* @param { String } 'top' & 'left'
* @return { Number }
*/
Dialog.getOffset = function( elem, type ){
var upType = this.capitalize( type ),
client = docElem['client' + upType] || body['client' + upType] || 0,
scroll = this.getScroll( type ),
box = elem.getBoundingClientRect(); return Math.round( box[type] ) + scroll - client;
}; /**
* 拖拽效果
* @param { Object } 触发拖拽的DOM元素
* @param { Object } 要进行拖拽的DOM元素
*/
Dialog.drag = function( target, moveElem ){
// 清除文本选择
var clearSelect = 'getSelection' in win ? function(){
win.getSelection().removeAllRanges();
} : function(){
try{
doc.selection.empty();
}
catch( e ){};
}, self = this,
event = self.event,
isDown = false,
newElem = isIE ? target : doc,
fixed = moveElem.style.position === 'fixed',
_fixed = Dialog.data( 'options' ).fixed; // mousedown
var down = function( e ){
isDown = true;
var scrollTop = self.getScroll( 'top' ),
scrollLeft = self.getScroll( 'left' ),
edgeLeft = fixed ? 0 : scrollLeft,
edgeTop = fixed ? 0 : scrollTop; Dialog.data( 'dragData', {
x : e.clientX - self.getOffset( moveElem, 'left' ) + ( fixed ? scrollLeft : 0 ),
y : e.clientY - self.getOffset( moveElem, 'top' ) + ( fixed ? scrollTop : 0 ),
// 设置上下左右4个临界点的位置
// 固定定位的临界点 = 当前屏的宽、高(下、右要减去元素本身的宽度或高度)
// 绝对定位的临界点 = 当前屏的宽、高 + 滚动条卷起部分(下、右要减去元素本身的宽度或高度)
el : edgeLeft, // 左临界点
et : edgeTop, // 上临界点
er : edgeLeft + docElem.clientWidth - moveElem.offsetWidth, // 右临界点
eb : edgeTop + docElem.clientHeight - moveElem.offsetHeight // 下临界点
}); if( isIE ){
// IE6如果是模拟fixed在mousedown的时候先删除模拟,节省性能
if( isIE6 && _fixed ){
moveElem.style.removeExpression( 'top' );
}
target.setCapture();
} event.bind( newElem, 'mousemove', move );
event.bind( newElem, 'mouseup', up ); if( isIE ){
event.bind( target, 'losecapture', up );
} e.stopPropagation();
e.preventDefault(); }; event.bind( target, 'mousedown', down ); // mousemove
var move = function( e ){
if( !isDown ) return;
clearSelect();
var dragData = Dialog.data( 'dragData' ),
left = e.clientX - dragData.x,
top = e.clientY - dragData.y,
et = dragData.et,
er = dragData.er,
eb = dragData.eb,
el = dragData.el,
style = moveElem.style; // 设置上下左右的临界点以防止元素溢出当前屏
style.marginLeft = style.marginTop = '0px';
style.left = ( left <= el ? el : (left >= er ? er : left) ) + 'px';
style.top = ( top <= et ? et : (top >= eb ? eb : top) ) + 'px';
e.stopPropagation();
}; // mouseup
var up = function( e ){
isDown = false;
if( isIE ){
event.unbind( target, 'losecapture', arguments.callee );
}
event.unbind( newElem, 'mousemove', move );
event.unbind( newElem, 'mouseup', arguments.callee );
if( isIE ){
target.releaseCapture();
// IE6如果是模拟fixed在mouseup的时候要重新设置模拟
if( isIE6 && _fixed ){
var top = parseInt( moveElem.style.top ) - self.getScroll( 'top' );
moveElem.style.setExpression('top',"fuckIE6=document.documentElement.scrollTop+" + top + '+"px"');
}
}
e.stopPropagation();
};
}; var timer, // 定时器
// ESC键关闭弹出层
escClose = function( e ){
if( e.keyCode === 27 ){
extend.close();
}
},
// 清除定时器
clearTimer = function(){
if( timer ){
clearTimeout( timer );
timer = undefined;
}
}; var extend = {
open : function(){
var $ = new Dialog(),
options = $.getOptions( arguments[0] || {} ), // 获取参数
event = Dialog.event,
docWidth = docElem.clientWidth,
docHeight = docElem.clientHeight,
self = this,
overlay,
dialogBox,
dialogWrap,
boxChild; clearTimer(); // ------------------------------------------------------
// ---------------------插入遮罩层-----------------------
// ------------------------------------------------------ // 如果页面中已经缓存遮罩层,直接显示
if( options.overlay ){
overlay = doc.getElementById( 'overlay' );
if( !overlay ){
overlay = $.createOverlay();
body.appendChild( overlay );
if( isIE6 ){
$.appendIframe( overlay );
}
}
overlay.style.display = 'block';
} if(isIE6){
$.setBodyBg();
} // ------------------------------------------------------
// ---------------------插入弹出层-----------------------
// ------------------------------------------------------ // 如果页面中已经缓存弹出层,直接显示
dialogBox = doc.getElementById( 'easyDialogBox' );
if( !dialogBox ){
dialogBox = $.createDialogBox();
body.appendChild( dialogBox );
} if( options.follow ){
var follow = function(){
$.setFollow( dialogBox, options.follow, options.followX, options.followY );
}; follow();
event.bind( win, 'resize', follow );
Dialog.data( 'follow', follow );
if( overlay ){
overlay.style.display = 'none';
}
options.fixed = false;
}
else{
$.setPosition( dialogBox, options.fixed );
}
dialogBox.style.display = 'block'; // ------------------------------------------------------
// -------------------插入弹出层内容---------------------
// ------------------------------------------------------ // 判断弹出层内容是否已经缓存过
dialogWrap = typeof options.container === 'string' ?
doc.getElementById( options.container ) :
$.createDialogWrap( options.container ); boxChild = dialogBox.getElementsByTagName('*')[0]; if( !boxChild ){
dialogBox.appendChild( dialogWrap );
}
else if( boxChild && dialogWrap !== boxChild ){
boxChild.style.display = 'none';
body.appendChild( boxChild );
dialogBox.appendChild( dialogWrap );
} dialogWrap.style.display = 'block'; var eWidth = dialogWrap.offsetWidth,
eHeight = dialogWrap.offsetHeight,
widthOverflow = eWidth > docWidth,
heigthOverflow = eHeight > docHeight; // 强制去掉自定义弹出层内容的margin
dialogWrap.style.marginTop = dialogWrap.style.marginRight = dialogWrap.style.marginBottom = dialogWrap.style.marginLeft = '0px'; // 居中定位
if( !options.follow ){
dialogBox.style.marginLeft = '-' + (widthOverflow ? docWidth/2 : eWidth/2) + 'px';
dialogBox.style.marginTop = '-' + (heigthOverflow ? docHeight/2 : eHeight/2) + 'px';
}
else{
dialogBox.style.marginLeft = dialogBox.style.marginTop = '0px';
} // 防止select穿透固定宽度和高度
if( isIE6 && !options.overlay ){
dialogBox.style.width = eWidth + 'px';
dialogBox.style.height = eHeight + 'px';
} // ------------------------------------------------------
// --------------------绑定相关事件----------------------
// ------------------------------------------------------
var closeBtn = doc.getElementById( 'closeBtn' ),
dialogTitle = doc.getElementById( 'easyDialogTitle' ),
dialogYesBtn = doc.getElementById('easyDialogYesBtn'),
dialogNoBtn = doc.getElementById('easyDialogNoBtn'); // 绑定确定按钮的回调函数
if( dialogYesBtn ){
event.bind( dialogYesBtn, 'click', function( event ){
if( options.container.yesFn.call(self, event) !== false ){
self.close();
}
});
} // 绑定取消按钮的回调函数
if( dialogNoBtn ){
var noCallback = function( event ){
if( options.container.noFn === true || options.container.noFn.call(self, event) !== false ){
self.close();
}
};
event.bind( dialogNoBtn, 'click', noCallback );
// 如果取消按钮有回调函数 关闭按钮也绑定同样的回调函数
if( closeBtn ){
event.bind( closeBtn, 'click', noCallback );
}
}
// 关闭按钮绑定事件
else if( closeBtn ){
event.bind( closeBtn, 'click', self.close );
} // ESC键关闭弹出层
if( !options.lock ){
event.bind( doc, 'keyup', escClose );
}
// 自动关闭弹出层
if( options.autoClose && typeof options.autoClose === 'number' ){
timer = setTimeout( self.close, options.autoClose );
}
// 绑定拖拽(如果弹出层内容的宽度或高度溢出将不绑定拖拽)
if( options.drag && dialogTitle && !widthOverflow && !heigthOverflow ){
dialogTitle.style.cursor = 'move';
Dialog.drag( dialogTitle, dialogBox );
} // 确保弹出层绝对定位时放大缩小窗口也可以垂直居中显示 if( !options.follow && !options.fixed ){
var resize = function(){
$.setPosition( dialogBox, false );
};
// 如果弹出层内容的宽度或高度溢出将不绑定resize事件
if( !widthOverflow && !heigthOverflow ){
event.bind( win, 'resize', resize );
}
Dialog.data( 'resize', resize );
} // 缓存相关元素以便关闭弹出层的时候进行操作
Dialog.data( 'dialogElements', {
overlay : overlay,
dialogBox : dialogBox,
closeBtn : closeBtn,
dialogTitle : dialogTitle,
dialogYesBtn : dialogYesBtn,
dialogNoBtn : dialogNoBtn
});
}, close : function(){
var options = Dialog.data( 'options' ),
elements = Dialog.data( 'dialogElements' ),
event = Dialog.event; clearTimer();
// 隐藏遮罩层
if( options.overlay && elements.overlay ){
elements.overlay.style.display = 'none';
}
// 隐藏弹出层
elements.dialogBox.style.display = 'none';
// IE6清除CSS表达式
if( isIE6 ){
elements.dialogBox.style.removeExpression( 'top' );
} // ------------------------------------------------------
// --------------------删除相关事件----------------------
// ------------------------------------------------------
if( elements.closeBtn ){
event.unbind( elements.closeBtn, 'click' );
} if( elements.dialogTitle ){
event.unbind( elements.dialogTitle, 'mousedown' );
} if( elements.dialogYesBtn ){
event.unbind( elements.dialogYesBtn, 'click' );
} if( elements.dialogNoBtn ){
event.unbind( elements.dialogNoBtn, 'click' );
} if( !options.follow && !options.fixed ){
event.unbind( win, 'resize', Dialog.data('resize') );
Dialog.removeData( 'resize' );
} if( options.follow ){
event.unbind( win, 'resize', Dialog.data('follow') );
Dialog.removeData( 'follow' );
} if( !options.lock ){
event.unbind( doc, 'keyup', escClose );
}
// 执行callback
if(typeof options.callback === 'function'){
options.callback.call( extend );
}
// 清除缓存
Dialog.removeData( 'options' );
Dialog.removeData( 'dialogElements' );
}
}; return extend; }; // ------------------------------------------------------
// ---------------------DOM加载模块----------------------
// ------------------------------------------------------
var loaded = function(){
win.easyDialog = easyDialog();
}, doScrollCheck = function(){
if ( doc.body ) return; try {
docElem.doScroll("left");
} catch(e) {
setTimeout( doScrollCheck, 1 );
return;
}
loaded();
}; (function(){
if( doc.body ){
loaded();
}
else{
if( doc.addEventListener ){
doc.addEventListener( 'DOMContentLoaded', function(){
doc.removeEventListener( 'DOMContentLoaded', arguments.callee, false );
loaded();
}, false );
win.addEventListener( 'load', loaded, false );
}
else if( doc.attachEvent ){
doc.attachEvent( 'onreadystatechange', function(){
if( doc.readyState === 'complete' ){
doc.detachEvent( 'onreadystatechange', arguments.callee );
loaded();
}
});
win.attachEvent( 'onload', loaded );
var toplevel = false;
try {
toplevel = win.frameElement == null;
} catch(e) {} if ( docElem.doScroll && toplevel ) {
doScrollCheck();
}
}
}
})(); })( window, undefined ); // 2012-04-12 修复跟随定位缩放浏览器时无法继续跟随的BUG
// 2012-04-22 修复弹出层内容的尺寸大于浏览器当前屏尺寸的BUG

easydialog.js的更多相关文章

  1. easyDialog参数配置说明

    easyDialog不依赖框架,使用起来很简单,只要引入easydialog.js文件就可以使用了: // 引入easyDialog <script src="easydialog.j ...

  2. 网站建设常用JQuery插件整理

    1.jQuery.lazyload 作用:延迟加载网站图片,常用于电商网站.图片展示网站,对于提高网站打开速度比较有效. 2.Owl Carousel 作用:图片滚动特效.响应式传送带插件,特点是支持 ...

  3. vue项目导入外部css样式和js文件

    <template> <div id="app" > </div> </template> <script src=" ...

  4. easyDialog 简单、实用的弹出层组件

    easyDialog 简单.实用的弹出层组件 使用背景 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的.最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找 ...

  5. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  6. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  7. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  8. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  9. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

随机推荐

  1. RunLoop-b

    RunLoop 是 iOS 和 OSX 开发中非常基础的一个概念,这篇文章将从 CFRunLoop 的源码入手,介绍 RunLoop 的概念以及底层实现原理.之后会介绍一下在 iOS 中,苹果是如何利 ...

  2. Javascript系列之在HTML中使用JavaScript

    本文主要包括以下几方面内容: 1)使用<script>元素 2)嵌入脚本和外部脚本 3)文档模式对JavaScript的影响 4)考虑禁用JavaScript的场景 只要一提到把Javas ...

  3. 用硬件(Verilog)实现二进制码和格雷码的转换

    格雷码(Gray code)是1880年由法国工程师Jean-Maurice-Emlle Baudot发明的一种编码,是一种绝对编码方式,典型格雷码是一种具有反射特性和循环特性的单步自补码,它的循环. ...

  4. android中使用intent来实现Activity带数据跳转

    大家都知道startActivity()是用来切换跳转Activity的.如果想要在另个Activity中出书数据的话.只需要在源activity中使用intent.putExtra()方法传出数据. ...

  5. 转:使用Mongo Connector和Elasticsearch实现模糊匹配

    原文来自于:http://www.csdn.net/article/2014-09-01/2821485-how-to-perform-fuzzy-matching-with-mongo-connec ...

  6. Eclipse 代码自动补全

    使用Eclipse开发Android时,发现代码补全功能太差,完全不像VS似的,输入一个字母就出现代码提示. 下面是在Eclipse中实现类似VS代码补全的方法: ①打开Eclipse->Win ...

  7. 关于Unity3D中的版本管理 .

    关于Unity3D中的版本管理 使用Unity3D也有一段时间了,由于团队一直使用SVN进行版本管理,现总结一下: (1) Unity3D的二进制资源必须加锁进行版本控制,因为它没办法merge: ( ...

  8. C#程序设计基础——类、对象、方法

    类与对象 类 类是一种构造,通过使用该构造,用户可以将其他类型的变量.方法和事件组合在一起,从而创建自定义类型.类就像一个蓝图,它定义类型的数据和行为. 对象 定义类之后,便可通过将类加载到内存中来使 ...

  9. Light OJ 1025 - The Specials Menu(区间DP)

    题目大意:     给你一个字符串,问有多少种方法删除字符,使得剩下的字符是回文串. 有几个规定: 1.空串不是回文串 2.剩下的字符位置不同也被视为不同的回文串.如:AA有三种回文串 A, A, A ...

  10. 【模拟】Codeforces 711B Chris and Magic Square

    题目链接: http://codeforces.com/problemset/problem/711/B 题目大意: N*N的矩阵,有且只有一个0,求要把这个矩阵变成幻方要填什么正数.无解输出-1.幻 ...