Awesome Open Source
Awesome Open Source

事情是这样的

经常的,我们界面上的查询框、ajax方式加载的列表等界面, 在跳转某个页面再返回时,界面已经不是最终操作的效果 (查询输入条件没了,最明显的是用了select2插件的select,列表原来的第五页变成又回到第一页)

用了弹出窗modal的方式,可是显示出来,整个页面效果跟UI设计已经不是一个格调了。

总想耍点小聪明,做个不像弹出窗的弹窗吧。。。

使用是这样的

申明

1.依赖jquery.js

2.支持模块化方式使用

3.只基于chrome测试过

可以这么用

1.引入js

<script src="//cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script src="domtwins.js"></script>

2.选择占位div进行初始化:注意不能用body

var opts = {
    iframeFit:true,
    history:false
}
var domTwins = $(".sec1").DomTwins(opts);

var domTwins = new DomTwins($(".sec1"),opts);

参数表示 iframeFit:当使用iframe加载显示页面时,iframe是否自适应子页面高度。默认值为true history:是否支持后退前进操作,支持H5才有效,并且页面中只有一个DomTwins对象能生效。建议只有在切换整屏页面的时候才使用。默认值为false

###3.打开加载新的url

domTwins.open(
	"child.html",
	function(dt,closeParams){
        console.info("onclose",dt,closeParams);
 	}
);

4.关闭

iframe子页面child.html中自关闭

DomTwins.closeThis(oncloseParams);

注:child.html需要引入domtwins.js,若不引入也可以使用

parent.postMessage({ type:"close",data:oncloseParams },"*");

iframe子页面child.html中自关闭(废弃,只支持同域)

parent.DomTwins.parentClose(window,oncloseParams);

注:其中的入参为child.html下的window或者dom均可,建议使用window

当前页关闭

domTwins.close(closeParams);

closeParams可以是任意值,最终传递给onclose回调

也可以这么用

1.配置占位div属性dom-twins-id

2.配置按钮属性dom-twins-target,dom-twins-href,dom-twins-onclose,dom-twins-iframeFit,dom-twins-history

<div class="sec2" dom-twins-id="sec2">
    <div >
        <input type="button" id="view2" value="查看"
               dom-twins-target="sec2" dom-twins-onclose="onclose"
               dom-twins-href="child.html">
    </div>
</div>

定义onclose函数(全局的 (/ □ ),你肯定会开骂...

function onclose(dt,oncloseParams){
    console.info("onclose",dt,oncloseParams);
}

好吧,开个onclose函数注册的,开心点,想怎么做都行

DomTwins.registerCloseMethod("onclose",
    function(dt,oncloseParams){
        console.info("myCloseMethod",dt,oncloseParams);
    }
);

3.引入js

<script src="//cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script src="domtwins.js"></script>
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,058,025
Js (1,058,024
Dom (10,542
Ajax (7,696