通知部分喜歡在Facebook和Twitter

-2

我想問如何做一個像Facebook和Twitter的通知部分，當我們點擊按鈕它顯示出所有的通知。我目前使用BootStrap和Jquery開發社交應用程序。任何人都有教程或可以給我如何做到這一點的來源？感謝通知部分喜歡在Facebook和Twitter

來源

2016-05-21 Noah Skull Weijian

如果你想將通知發送給別人，我會用什麼語言，如SQL和PHP，但如果你不想送什麼東西給任何人繼承人一個例子你：

的關鍵，這是使用jquery的val（）得到一個輸入的值，然後用text方法再次在屏幕上附加一些東西。

繼承人的代碼來做到這一點：

提示：研究你不明白，我建議您搜索，並把W3Schools的，因爲它是一個非常好的地方學習代碼的所有部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
\t <meta content='width=device-width, initial-scale=1' name='viewport'> 
 
\t <link href='/style.css' media='all' rel='stylesheet' type='text/css'> 
 
\t <link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'> 
 
\t <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
\t <script> 
 
$(document).ready(function() { 
 
var text; 
 
var newDiv; 
 
    $("button").click(function() { 
 
    text = $("input").val(); 
 
    newDiv = $("<div/>"); 
 
    $(newDiv).text(text); 
 
    $(newDiv).addClass("newDiv"); 
 
    $(".textBox").append(newDiv); 
 
    }); 
 
}); 
 
\t </script> 
 
\t <style> 
 
.textBox { 
 
    width: 800px; 
 
    height: 200px; 
 
    overflow: auto; 
 
    background-color: #d1d1e0; 
 
    border: 2px solid #6699ff; 
 
    border-radius: 5px; 
 
} 
 
.newDiv { 
 
    display: block; 
 
    background-color: #5d5d89; 
 
    margin-bottom: 5px; 
 
    border-radius: 5px; 
 
} 
 
p { 
 
    float: left; 
 
} 
 
\t </style> 
 
    </head> 
 
    <body> 
 
    <div class="textBox"></div> 
 
    <p><input type="text" placeholder="type something"></p> 
 
    <button>Enter</button> 
 
    </body> 
 
</html>

來源

2016-05-21 05:01:13 Swift

它更像是一個聊天室對不起，希望它有助於雖然因爲我的長相醜陋 – Swift

如果你想通知隱藏它的簡單。只要使用「fadeToggle（）」和一個按鈕是這樣的：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
\t <meta content='width=device-width, initial-scale=1' name='viewport'> 
 
\t <link href='/style.css' media='all' rel='stylesheet' type='text/css'> 
 
\t <link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'> 
 
\t <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
\t <script> 
 
$(document).ready(function() { 
 
var text; 
 
var newDiv; 
 
    $(".show").click(function() { 
 
    $(".textBox, .newDiv").fadeToggle(); 
 
    }); 
 
    $(".enter").click(function() { 
 
    text = $("input").val(); 
 
    newDiv = $("<div/>"); 
 
    $(newDiv).text(text); 
 
    $(newDiv).addClass("newDiv"); 
 
    $(".textBox").append(newDiv); 
 
    }); 
 
}); 
 
\t </script> 
 
\t <style> 
 
.textBox { 
 
    width: 800px; 
 
    height: 200px; 
 
    overflow: auto; 
 
    background-color: #d1d1e0; 
 
    border: 2px solid #6699ff; 
 
    border-radius: 5px; 
 
    display: none; 
 
} 
 
.newDiv { 
 
    display: block; 
 
    background-color: #5d5d89; 
 
    margin-bottom: 5px; 
 
    border-radius: 5px; 
 
} 
 
.enter { 
 
    float: left; 
 
} 
 
p { 
 
    float: left; 
 
} 
 
\t </style> 
 
    </head> 
 
    <body> 
 
    <div class="textBox"></div> 
 
    <p><input type="text" placeholder="type something"></p> 
 
    <button class="enter">Enter</button> 
 
    <button class="show">show notifications</button> 
 
    </body> 
 
</html>

來源

2016-05-21 05:19:44 Swift

使用引導到它的樣式 – Swift

通知部分喜歡在Facebook和Twitter

回答

相關問題