Question

我想问一下如何在Facebook和Twitter上制作通知部分，当我们点击按钮时它会显示所有通知。我目前正在使用BootStrap和Jquery开发社交应用程序。任何人都有教程或可以给我如何做到这一点的来源？感谢

Answer 1

如果你想向某人发送通知，我会使用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">
	<meta content='width=device-width, initial-scale=1' name='viewport'>
	<link href='/style.css' media='all' rel='stylesheet' type='text/css'>
	<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
	<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<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);
  });
});
	</script>
	<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;
}
	</style>
  </head>
  <body>
  <div class="textBox"></div>
  <p><input type="text" placeholder="type something"></p>
  <button>Enter</button>
  </body>
</html>

Answer 2

如果您希望通知隐藏其简单。只需使用＆＃39; fadeToggle（）＆＃39;还有一个这样的按钮：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
	<meta content='width=device-width, initial-scale=1' name='viewport'>
	<link href='/style.css' media='all' rel='stylesheet' type='text/css'>
	<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
	<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<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);
  });
});
	</script>
	<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;
}
	</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>

＆＃13;

通知部分，如Facebook和Twitter

2 个答案: