BootStrapのバウンド機能のシミュレーション
55241 ワード
BootStrapのバウンド機能のシミュレーション
今日のプロジェクトではBootStrapの弾枠機能を使う必要がありましたが、後日AngularJSに変更して開発する必要がある可能性があることを考慮して、AngularJSとBootStrapのjsファイルが衝突していることはよく知られています.BootStrapのjsファイルはjQueryに依存しているので、AngularJSで開発するとBootStrapさえ使えないことを意味します.ただし、UI-BootStrapは使えますが、UI-BootStrapにはあまり詳しくないので、この機能にパッケージされているかどうか分からないので、自分でBootStrapのような弾枠を書くつもりです.くだらないことは言わないで、テーマに入ります.
まず、jsファイルとcssファイルの2つのファイルが必要です.
私もどのサードパーティ製プラグインにも頼らずオリジナルで書いているので互換性が良いでしょう.
次のように呼び出されます.
ここでは、対応するプロパティについて簡単に説明します. data-afaPOP_target-弾枠を指すid. data-afaPOP_Direction-弾枠の方向を表します. data-popDiv-弾枠対応のラベルに書かれており、主にスタイルが与えられています. data-afaClosePOP-クリックをバインドしてバウンドを隠すイベント 一時的にこれらの属性についてイベントを定義し、バインドします.プロジェクトでは補足する機能が発見されていないので、一時的にはこのようにします.もちろん、後で最適化を続ける時間があります.
一部のバグはまだ修正する時間がありませんが、使用に影響しません...
コードを補完します.
html
css
js
もし兴味があれば一绪に勉强し合う歓迎のメッセージを话し合い、一绪にバグを直して、菜鸟一枚に注目しましょう!
今日のプロジェクトではBootStrapの弾枠機能を使う必要がありましたが、後日AngularJSに変更して開発する必要がある可能性があることを考慮して、AngularJSとBootStrapのjsファイルが衝突していることはよく知られています.BootStrapのjsファイルはjQueryに依存しているので、AngularJSで開発するとBootStrapさえ使えないことを意味します.ただし、UI-BootStrapは使えますが、UI-BootStrapにはあまり詳しくないので、この機能にパッケージされているかどうか分からないので、自分でBootStrapのような弾枠を書くつもりです.くだらないことは言わないで、テーマに入ります.
まず、jsファイルとcssファイルの2つのファイルが必要です.
<link rel="stylesheet" href="../afa_pop/afa_pop.css">
<script src="../afa_pop/afa_pop.js">script>私もどのサードパーティ製プラグインにも頼らずオリジナルで書いているので互換性が良いでしょう.
次のように呼び出されます.
<div class="list">
<div>
<p> leftp>
<span class="btn" id="a" data-afaPOP_target="a1" data-afaPOP_direction="left"> span>
<div id="a1" data-popDiv>
<input type="text">
<button> button>
div>
div>
<div>
<p> rightp>
<span class="btn" data-afaPOP_target="a2" data-afaPOP_direction="right"> span>
<div id="a2" data-popDiv>
<select>
<option value="0"> option>
<option value="1">Aoption>
<option value="2">Boption>
<option value="3">Coption>
select>
div>
div>
<div>
<p> topp>
<span class="btn" data-afaPOP_target="a3" data-afaPOP_direction="top"> span>
<div id="a3" data-popDiv>
<p>JavaScript p>
div>
div>
<div>
<p> bottomp>
<span class="btn" data-afaPOP_target="a4" data-afaPOP_direction="bottom"> span>
<div id="a4" data-popDiv>
<ul>
<li>asdli>
<li>asdli>
<li>asdli>
<li>asdli>
ul>
div>
div>
div>ここでは、対応するプロパティについて簡単に説明します.
一部のバグはまだ修正する時間がありませんが、使用に影響しません...
コードを補完します.
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="../afa_pop/afa_pop.css">
<style>
.list{
height:800px;
width: 50%;
overflow-y:auto;
border:1px solid #e1e1e1;
text-align: center;
margin:0 auto;
}
.list>div{
border-bottom:1px solid #000;
padding:5px;
}
style>
head>
<body>
<div class="list">
<div>
<p> leftp>
<span class="btn" id="a" data-afaPOP_target="a1" data-afaPOP_direction="left"> span>
<div id="a1" data-popDiv>
<input type="text">
<button> button>
div>
div>
<div>
<p> rightp>
<span class="btn" data-afaPOP_target="a2" data-afaPOP_direction="right"> span>
<div id="a2" data-popDiv>
<select>
<option value="0"> option>
<option value="1">Aoption>
<option value="2">Boption>
<option value="3">Coption>
select>
div>
div>
<div>
<p> topp>
<span class="btn" data-afaPOP_target="a3" data-afaPOP_direction="top"> span>
<div id="a3" data-popDiv>
<p>JavaScript p>
div>
div>
<div>
<p> bottomp>
<span class="btn" data-afaPOP_target="a4" data-afaPOP_direction="bottom"> span>
<div id="a4" data-popDiv>
<ul>
<li>asdli>
<li>asdli>
<li>asdli>
<li>asdli>
ul>
div>
div>
div>
body>
<script src="../afa_pop/afa_pop.js">script>
html>css
*[data-popDiv]{visibility:hidden;background-color:#fff;border:2px solid #000;border-radius: 5px;position:absolute;z-index: 9999;padding: 12px;}
*[data-popDiv] .horn{display: block;position: absolute;width: 15px;height: 15px;z-index: 9999;background-color: #fff;-webkit-transform: rotate(-45deg);}
*[data-popDiv] .horn_left{border-bottom: 2px solid #000;border-right: 2px solid #000;}
*[data-popDiv] .horn_right{border-top: 2px solid #000;border-left: 2px solid #000;}
*[data-popDiv] .horn_top{border-top: 2px solid #000;border-right: 2px solid #000;}
*[data-popDiv] .horn_bottom{border-bottom: 2px solid #000;border-left: 2px solid #000;}
*[data-hasShowPOP = 'true']{visibility:visible;animation: afa_showPOP 0.5s;-moz-animation: afa_showPOP 0.5s;-webkit-animation: afa_showPOP 0.5s;-o-animation: afa_showPOP 0.5s;}
*[data-hasShowPOP = 'false']{visibility:hidden;animation: afa_hidePOP 0.5s;-moz-animation: afa_hidePOP 0.5s;-webkit-animation: afa_hidePOP 0.5s;-o-animation: afa_hidePOP 0.5s;}
#afa_pop_mask{top: 0;left: 0;position:fixed;width: 100%;height: 100%;z-index: 999;}
/* */
@keyframes afa_showPOP
{
from {
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
to {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
}
@-moz-keyframes afa_showPOP /* Firefox */
{
from {
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
to {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
}
@-webkit-keyframes afa_showPOP /* Safari Chrome */
{
from {
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
to {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
}
@-o-keyframes afa_showPOP /* Opera */
{
from {
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
to {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
}
/* */
@keyframes afa_hidePOP
{
from {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
to {
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
}
@-moz-keyframes afa_hidePOP /* Firefox */
{
from {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
to {
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
}
@-webkit-keyframes afa_hidePOP /* Safari Chrome */
{
from {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
to {
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
}
@-o-keyframes afa_hidePOP /* Opera */
{
from {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
to {
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
}
js
/**
* Created by Administrator on 2016/5/3.
*/
window.onload = function(){
// ， css js
var hornHeight = 19,
hornWidth = 19,
scrollTop = 0,
scrollLeft = 0;
//
function init(){
var afaPOPs = document.querySelectorAll('[data-afaPOP_target]');
var afaClose = document.querySelectorAll('[data-afaClosePOP]');
//
for(var i = 0;i < afaPOPs.length;i++){
var curr = afaPOPs[i],
targetId = curr.dataset.afapop_target,
direction = curr.dataset.afapop_direction;
//
switch (direction){
case 'left' : setPOPDirection.left(document.getElementById(targetId));
setPosition.left(curr,document.getElementById(targetId));
break;
case 'right' : setPOPDirection.right(document.getElementById(targetId));
setPosition.right(curr,document.getElementById(targetId));
break;
case 'top' : setPOPDirection.top(document.getElementById(targetId));
setPosition.top(curr,document.getElementById(targetId));
break;
case 'bottom' : setPOPDirection.bottom(document.getElementById(targetId));
setPosition.bottom(curr,document.getElementById(targetId));
break;
}
//
!function(targetId,curr,direction){
curr.addEventListener('click',function(){
//
if(document.getElementById(targetId).getAttribute('data-hasShowPOP') == 'true'){
var mask = document.getElementById('afa_pop_mask');
if(mask){
document.body.removeChild(mask);
}
document.getElementById(targetId).setAttribute('data-hasShowPOP','false');
//
}else{
//
closeAllPOP(function(){
//
switch (direction){
case 'left' : setPosition.left(curr,document.getElementById(targetId));
break;
case 'right' : setPosition.right(curr,document.getElementById(targetId));
break;
case 'top' : setPosition.top(curr,document.getElementById(targetId));
break;
case 'bottom' : setPosition.bottom(curr,document.getElementById(targetId));
break;
}
// mask
var mask = document.createElement('div');
mask.id = 'afa_pop_mask';
document.body.appendChild(mask);
// mask ， body
document.getElementById('afa_pop_mask').addEventListener('click',function(){
// mask
closeAllPOP(function(){
document.body.removeChild(mask);
});
});
//
document.getElementById(targetId).setAttribute('data-hasShowPOP','true');
});
}
});
}(targetId,curr,direction);
}
//
for(var n = 0;n < afaClose.length;n++){
closePOP(afaClose[n]);
}
}
//
function closeAllPOP(callback){
var popDivs = document.querySelectorAll('[data-popDiv]');
for(var n =0;n 'data-hasShowPOP','false');
}
if(callback){
callback();
}
}
//
function closePOP(curr){
var id = curr.dataset.afaclosepop;
curr.addEventListener('click',function(){
document.getElementById(id).setAttribute('data-hasShowPOP','false');
})
}
//
var setPOPDirection = {
left : function(elem){
var popHeight = elem.offsetHeight,
popWidth = elem.offsetWidth,
horn = document.createElement('span');
horn.className = 'horn horn_left';
elem.appendChild(horn);
horn.style.top = (popHeight/2 - hornHeight/2) + 'px';
horn.style.left = (popWidth - hornWidth/2)-1 + 'px';
},
right : function(elem){
var popHeight = elem.offsetHeight,
horn = document.createElement('span');
horn.className = 'horn horn_right';
elem.appendChild(horn);
horn.style.top = (popHeight/2 - hornHeight/2) + 'px';
horn.style.left = (0 - hornWidth/2) + 'px';
},
bottom : function(elem){
var popWidth = elem.offsetWidth,
horn = document.createElement('span');
horn.className = 'horn horn_top';
elem.appendChild(horn);
horn.style.top = (0 - hornWidth/2) + 'px';
horn.style.left = (popWidth/2 - hornWidth/2) + 'px';
},
top : function(elem){
var popHeight = elem.offsetHeight,
popWidth = elem.offsetWidth,
horn = document.createElement('span');
horn.className = 'horn horn_bottom';
elem.appendChild(horn);
horn.style.top = (popHeight - hornWidth/2) - 2 + 'px';
horn.style.left = (popWidth/2 - hornWidth/2) + 'px';
}
};
//
var setPosition = {
left : function(curr,elem){
var elemHeight = elem.offsetHeight,
elemWidth = elem.offsetWidth,
currHeight = curr.offsetHeight,
currX = curr.offsetLeft,
currY = curr.offsetTop,
parentScrollTop = getTop(curr),
parentScrollLeft = getLeft(curr);
elem.style.left = currX - elemWidth - hornWidth - parentScrollLeft + 'px';
elem.style.top = currY - elemHeight/2 + currHeight/2 - parentScrollTop + 'px';
//
scrollTop = 0;
scrollLeft = 0;
},
right : function(curr,elem){
var elemHeight = elem.offsetHeight,
currHeight = curr.offsetHeight,
currWidth = curr.offsetWidth,
currX = curr.offsetLeft,
currY = curr.offsetTop,
parentScrollTop = getTop(curr),
parentScrollLeft = getLeft(curr);
elem.style.left = currX + currWidth + hornWidth + -parentScrollLeft + 'px';
elem.style.top = currY - elemHeight/2 + currHeight/2 - parentScrollTop + 'px';
//
scrollTop = 0;
scrollLeft = 0;
},
bottom : function(curr,elem){
var currHeight = curr.offsetHeight,
elemWidth = elem.offsetWidth,
currWidth = curr.offsetWidth,
currX = curr.offsetLeft,
currY = curr.offsetTop,
parentScrollTop = getTop(curr),
parentScrollLeft = getLeft(curr);
elem.style.left = currX - elemWidth/2 + currWidth/2 - parentScrollLeft + 'px';
elem.style.top = currY + currHeight + hornHeight - parentScrollTop + 'px';
//
scrollTop = 0;
scrollLeft = 0;
},
top : function(curr,elem){
var elemHeight = elem.offsetHeight,
elemWidth = elem.offsetWidth,
currWidth = curr.offsetWidth,
currX = curr.offsetLeft,
currY = curr.offsetTop,
parentScrollTop = getTop(curr),
parentScrollLeft = getLeft(curr);
elem.style.left = currX - elemWidth/2 + currWidth/2 - parentScrollLeft + 'px';
elem.style.top = currY - elemHeight - hornHeight - parentScrollTop + 'px';
//
scrollTop = 0;
scrollLeft = 0;
}
};
/*
* scrollTop scrollLeft
* ， scrollTop scrollLeft
* ，
*
* */
function getTop(e){
if(e.parentNode != null){
var scroll = e.parentNode.scrollTop;
scroll = scroll == undefined ? 0 : scroll;
scrollTop += scroll;
getTop(e.parentNode);
}
return scrollTop;
}
function getLeft(e){
if(e.parentNode != null){
var scroll = e.parentNode.scrollLeft;
scroll = scroll == undefined ? 0 : scroll;
scrollLeft += scroll;
getTop(e.parentNode);
}
return scrollLeft;
}
//
init();
//
window.addEventListener('resize',function(){
init();
});
}; もし兴味があれば一绪に勉强し合う歓迎のメッセージを话し合い、一绪にバグを直して、菜鸟一枚に注目しましょう!