入力したURLのURLプレビューボックスを作成しました。
プレビューはdivボックスに表示されます。右上に閉じるオプションを追加します。ユーザーがクリックしたときにボックスが無効になるようにする方法。
これが私の fiddle です。
<a class="fragment" href="google.com">
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
codeはphp
の中にあります
最も簡単な方法(要素を削除すると仮定)
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
これをdiv
内に追加します。 ここの例 です。
このようなものを使用することもできます
window.onload = function(){
document.getElementById('close').onclick = function(){
this.parentNode.parentNode.parentNode
.removeChild(this.parentNode.parentNode);
return false;
};
};
閉じるボタンのCss
#close {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
次のようなホバー効果を追加できます
#close:hover {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
color:#fff;
}
this one のようなもの。
divコンテナのidを使用すると簡単です(閉じるボタンを<a>
内に配置しませんでした。すべてのブラウザで適切に機能するからです。
<div id="myDiv">
<button class="close" onclick="document.getElementById('myDiv').style.display='none'" >Close</button>
<a class="fragment" href="http://google.com">
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
</div>
更新されたFIDDLE
あなたのHTMLは次のようになります(ボタンを追加しただけです):
<a class="fragment" href="google.com">
<button id="closeButton">close</button>
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
以下を追加する必要がありますCSS:
.fragment {
position: relative;
}
#closeButton {
position: absolute;
top: 0;
right: 0;
}
次に、ボタンを実際に機能させるには、次のjavascriptを追加する必要があります。
document.getElementById('closeButton').addEventListener('click', function(e) {
e.preventDefault();
this.parentNode.style.display = 'none';
}, false);
ここでは、アンカーがリンクをたどらないようにe.preventDefault()
を使用しています。
これを使用できます jsFiddle
そしてHTML:
<div id="previewBox">
<button id="closeButton">Close</button>
<a class="fragment" href="google.com">
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
</div>
WithJS(jquery required):
$(document).ready(function() {
$('#closeButton').on('click', function(e) {
$('#previewBox').remove();
});
});
JQueryソリューション:閉じたい要素内にこのボタンを追加します。
<button type='button' class='close' onclick='$(this).parent().remove();'>×</button>
または「ちょうど」非表示にする:
<button type='button' class='close' onclick='$(this).parent().hide();'>×</button>
jQuery( "#your_div_id")。remove(); HTML DOMから対応する要素を完全に削除します。したがって、リフレッシュせずに別のイベントでdivを表示する場合、AJAXを使用しない限り、削除された要素を取得することはできません。
jQuery( "#your_div_id")。toggle( "slow");また、予期しない結果が生じる可能性があります。例として、閉じるボタン(以前のdivと同じ閉じる機能を使用する)で別のdivを生成するdivの要素を選択すると、望ましくない動作をする可能性があります。
AJAXを使用しない場合、閉じるボタンの適切なソリューションは次のようになります
HTML________________________________________________________________________
<div id="your_div_id">
<span class="close_div" onclick="close_div(1)">✖</span>
</div>
JQUERY_______________________________________________________________________
function close_div(id) {
if(id === 1) {
jQuery("#your_div_id").hide();
}
}
これで、希望どおりに別のイベントが発生したときにdivを表示できます... :-)
あなたのフィドルを更新しました: http://jsfiddle.net/xftr5/11/ 希望、すべてが明確ですか
$(document).ready(function() {
$('.fragment i').on('click', function(e) { $(e.target).closest('a').remove(); });
});
JQueryを追加し、<i>
をクローズトリガーとして挿入しました...