【css 3+JavaScript】:優雅なダイアログボックス
9711 ワード
効果:
プレゼンテーションアドレス:http://codepen.io/anon/pen/BNjYrR
======2015/5/11======
最適化スクロールバー(scroll):デフォルトのスクロールバーは醜いので、最適化を我慢できません.
::-webkit-scrollbar { width: 14px; height: 14px;}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent;}
::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;}
::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;}
::-webkit-scrollbar-corner { background: transparent;}
最適化前:
最適化後:
次の情報は、ネットワークに基づいています.:-webkit-scrollbarスクロールバー全体部分 :-webkit-scrollbar-buttonスクロールバー両端のボタン :-webkit-scrollbar-track外層軌道 :-webkit-scrollbar-track-piece内層軌道、スクロールバー中間部分(除去) :-webkit-scrollbar-thumb(ドラッグ?スライダ?スクロールバーの中でドラッグできるもの、腫れていますか?) :-webkit-scrollbar-cornerコーナー :-webkit-resizer右下のドラッグブロックを定義するスタイル :horizontal–horizontal擬似クラス水平方向のスクロールバー に適用:vertical–vertical擬似クラス垂直方向のスクロールバー に適用:decrement–decrement擬似クラスは、ボタンおよび内層軌道(track piece)に適用されます.ボタンまたはインナーレールがウィンドウの位置を小さくするかどうかを示すために使用されます(たとえば、垂直スクロールバーの上、水平スクロールバーの左側など). :increment–increment擬似クラスはdecrementと同様に、ボタンまたは内層レールがウィンドウの位置(垂直スクロールバーの下や水平スクロールバーの右など)を大きくするかどうかを示すために使用されます. :start–start擬似クラスもボタンとスライダに適用されます.オブジェクトがスライダの前面に配置されるかどうかを定義します. :end–start擬似クラスと同様に、オブジェクトがスライダの後ろに配置されているかどうかを示します. :double-button–この擬似クラスは、ボタンおよび内層軌道に使用されます.1つのボタンがスクロールバーの同じ端に置かれているかどうかを判断するための1対のボタンの1つです.内層軌道の場合、内層軌道が1対のボタンに隣接しているかどうかを示します. :single-button–double-button擬似クラスに似ています.ボタンの場合、ボタンがスクロールバーのセグメントに独立しているかどうかを判断するために使用されます.内層軌道では、内層軌道がsingle-buttonに近いかどうかを示します. :no-button–内側レールに使用され、内側レールがスクロールバーの端末にスクロールするかどうかを示します.たとえば、スクロールバーの両端にボタンがない場合です. :corner-present–スクロールバーのフィレットが表示されるかどうかを示すすべてのスクロールバーレールに使用します. :window-inactive–スクロールバーを適用するページコンテナ(要素)が現在アクティブになっているかどうかを示すすべてのスクロールバーレールに使用されます.(webkitの最近のバージョンでは、この擬似クラスは::selection擬似要素にも使用できます.webkitチームは、それを拡張し、標準的な擬似クラスに推進する計画があります) また、:enabled、:disabled、:hover、:activeなどの擬似クラスもスクロールバーに使用できます.
具体的なdemoについては、ここではもうしません.ネット上にはすでに多くのdemoが参考になります.例えば、Webkit公式のこれ、具体的なオンラインプロジェクトにも既成の例があります.例えば、QQ空間のサインがポップアップボックスや豆弁の右側の詳細欄(ある情報のコメントが多い場合に表示されます).
特筆すべきは、webkitのこの偽クラスと偽要素の実現は非常に強く、クラス目は少し多いが、スクロールバーをページ要素として定義することができ、グラデーション、フィレット、RGBaなど、高級なCSS 3属性を使うこともできる.もちろん、画像をBase 64に変換することもできる.思う存分発揮できました.
CORE CODE:
プレゼンテーションアドレス:http://codepen.io/anon/pen/BNjYrR
======2015/5/11======
最適化スクロールバー(scroll):デフォルトのスクロールバーは醜いので、最適化を我慢できません.
::-webkit-scrollbar { width: 14px; height: 14px;}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent;}
::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;}
::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;}
::-webkit-scrollbar-corner { background: transparent;}
最適化前:
最適化後:
次の情報は、ネットワークに基づいています.
具体的なdemoについては、ここではもうしません.ネット上にはすでに多くのdemoが参考になります.例えば、Webkit公式のこれ、具体的なオンラインプロジェクトにも既成の例があります.例えば、QQ空間のサインがポップアップボックスや豆弁の右側の詳細欄(ある情報のコメントが多い場合に表示されます).
特筆すべきは、webkitのこの偽クラスと偽要素の実現は非常に強く、クラス目は少し多いが、スクロールバーをページ要素として定義することができ、グラデーション、フィレット、RGBaなど、高級なCSS 3属性を使うこともできる.もちろん、画像をBase 64に変換することもできる.思う存分発揮できました.
CORE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Talk Room</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
body{
font-family: "microsoft yahei";
background-color: #f7f7f7;
color: #666;
font-size: 13px;
line-height: 1.8em;
}
.roomArea{
width: 400px;
height: 500px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.room-content{
width: 100%;
height: 320px;
overflow-y:auto;
border-bottom: 1px solid #f7f7f7;
}
.opArea{
width: 100%;
}
.wordsInput{
width: 380px;
padding: 10px;
height: 80px;
margin-bottom: 20px;
border: 0;
outline: 0;
border-bottom: 1px solid #f7f7f7;
font-family: "microsoft yahei";
}
.btn{
float: right;
margin:0 6px;
padding: 5px 20px;
border: 0;
outline: 0;
border-radius: 3px;
background-color: #eb4f38;
color: #fff;
border: 1px solid transparent;
}
#offBtn{
background-color: #a9b7b7;
}
.inp{
width: 125px;
outline: 0;
height: 25px;
border: 0;
border-bottom: 1px solid #f7f7f7;
}
label{
margin-left: 10px;
}
.msg-list{
position: relative;
}
.msg-list li{
display:inline-block;
padding: 6px 0;
margin: 6px 0;
}
.words {
position: relative;
display: inline-block;
margin-left: 60px;
background-color: #00bb9c;
color: #fff;
padding: 5px 8px;
border-radius: 4px;
width: 240px;
min-height: 40px;
}
.words:before{
content: '';
position: absolute;
top:7px;
left:-6px;
border-style: solid;
border-width: 6px 12px 6px 0;
border-color: transparent #00bb9c transparent transparent;
}
.nickName {
position: absolute;
left: 10px;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #00bb9c;
display: inline-block;
line-height: 40px;
text-align: center;
color: #fff;
-webkit-box-shadow: 0 0 1px rgba(0,0,0,.3);
box-shadow: 0 0 1px rgba(0,0,0,.3);
}
.time {
float: right;
font-size: 12px;
color: #eee;
}
.oRight .nickName {
position: absolute;
right: 10px;
left: auto;
background-color: #56abe4;
}
.oRight .words{
background-color: #56abe4;
}
.oRight .words:before{
display: none;
}
.oRight .words:after{
content: '';
position: absolute;
top:7px;
right:-6px;
border-style: solid;
border-width: 6px 0 6px 12px ;
border-color: transparent transparent transparent #56abe4 ;
}
</style>
</head>
<body>
<div class="roomArea">
<div class="room-content" >
<ul class="msg-list" id="msgList">
</ul>
</div>
<div class="opArea">
<textarea class="wordsInput" id="txtInput" placeholder=" "></textarea>
<label for="inp"> :</label>
<input type="text" class="inp" id="inp">
<button class="btn" id="offBtn"> </button>
<button class="btn" id="sendBtn"> </button>
</div>
</div>
<!--js -->
<script type="text/javascript">
var oMsgList=document.getElementById('msgList');
var oTxtInput=document.getElementById('txtInput');
var oInp=document.getElementById('inp');
var oOffBtn=document.getElementById('offBtn');
var oSendBtn=document.getElementById('sendBtn');
var lastUserName = "";
oSendBtn.onclick=function addWords(){
if (oTxtInput.value=='') {
alert(' ');
oTxtInput.focus();
return false;
} else if (oInp.value=='') {
alert(' ');
oInp.focus();
return false;
} else{
oMsgList.innerHTML+="<li>"+"<span class='nickName'>"+oInp.value +"</span>" + "<span class='words'>"+oTxtInput.value+"<span class='time'>"+getTime()+"</span>"+"</span>" +"</li>";
// li
var i="";
var li_arr=document.getElementsByTagName('li');
// // tag li html
if (li_arr.length > 1) {
if (lastUserName === oInp.value) {
li_arr[li_arr.length -1].className = li_arr[li_arr.length -2].className;
}
if (!li_arr[li_arr.length -2].classList.contains('oRight') && lastUserName !== oInp.value) {
li_arr[li_arr.length -1].classList.add('oRight');
}
}
lastUserName = oInp.value;
oInp.value='';
oTxtInput.value='';
}
}
function getTime(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var time = year+'/'+month+'/'+day+' '+hours+':'+minutes+':'+seconds;
return time;
}
</script>
</body>
</html>