search

博客列表 >博客实战2018年10月9日

博客实战2018年10月9日

马聪 15558002279的博客
马聪 15558002279的博客原创
2018年10月11日 16:08:13651浏览

  1. 首页：


  2. 实例

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="/dist/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="/dist/js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/dist/js/main.js"></script>
<title>首页</title>
</head>
<style>
.body{margin:0;padding:0}
.fl{float:left}
.fr{float:right}
.top{height:90px;}
.top .top_title{font-size:40px;line-height:90px;}
.top .search{width:300px;height:90px;line-height:90px;margin-left:30px;}
.top .search input{float: unset;}
.top .login-reg{width:200px;height:90px;line-height:90px;}
.news_item{width:100%;height:100px;border-bottom:1px solid lightgrey;margin-bottom:10px;}
.news_item div{height:90px;line-height:90px;}
.news_item img{width:120px;}
</style>
<body>
<!-- 头部 -->
<div class="bg-primary top">
<div>
<span class="top_title fl">xxx的博客</span>

<div class="search fl">
<div>
  <input type="text" placeholder="输入博客名称搜索">
  <span>
        <button class="btn btn-default" type="button">搜索</button>
      </span>
</div>
</div>
<div class="login-reg fr">
<button class="btn btn-success" onclick="login()">&nbsp;登录&nbsp;</button>
<button class="btn btn-warning">&nbsp;发布博客&nbsp;</button>
</div>
</div>
</div>
<div>
<div>
<ul class="nav nav-pills nav-stacked">
<li role='presentation'><a href='#'>内容选项</a></li>
<br>
  <?php
  for ($i=0; $i < 11; $i++) { 
   echo "<li role='presentation'><a href='#'>Profile".$i."</a></li>";
  }
  ?>
</ul>
</div>
<div>
<div class="col-sm-4 col-md-offset-8 border">
<ul class="nav nav-pills">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<hr><hr>

<?php
for ($i=0; $i < 8; $i++) { 
?>

<div>
<div>
<img src="http://japan.people.com.cn/NMediaFile/2015/0107/MAIN201501070808000365751804505.jpg" alt="">
</div>
<div>
<div style="width:100%;height:60px;line-height:30px;overflow:hidden;">
<a href="">IdentityServer4实战 - 谈谈 JWT Token 的安全策略IdentityServer4实战 - 谈谈 JWT Token 的安全策实战<<<<</a>
</div>
<div style="width:100%;height:40px;line-height:40px;">
<span>30次浏览</span><span>2018-10-08 21:33:33</span>
</div>
</div>
<div class="col-md-2 col-md-offset-1">
<a href="">详细>></a>
</div>
</div>
<?php
}
?>
<div>
<nav aria-label="Page navigation">
  <ul>
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">上一页</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
     <li><a href="#">下一页</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
</div>
</div>
</div>
<script>
function login(){
UI.alert({title:'提示标题',msg:'提示内容',icon:'error'})
// UI.open({title:'提示标题'})
}
</script>
</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    2.弹出框js


  3. 实例

    var UI = {
	alert:function(obj){
		//属性有： title:标题，msg:提示内容,icon,显示图标
		var title = (obj == undefined || obj.title == undefined) ? '系统消息' : obj.title;
		var msg = (obj == undefined || obj.msg == undefined) ? '' : obj.msg;
		var icon = (obj == undefined || obj.icon == undefined) ? 'warn' : obj.icon;

		var html = this.get_html()
		html = html.replace('{title}',title).replace('{msg}',msg).replace('{icon}',icon)
		$('body').append(html)
		$('#uiModal').modal({backdrop:'static'})
		// $('#uiModal').modal('show');
		$('#uiModal').on('hidden.bs.modal', function (e) {
		 	this.remove()
		})
	},

	get_html:function(){
			var html = '<div class="modal fade" tabindex="-1" role="dialog" id="uiModal">\
					<div class="modal-dialog" role="document">\
					<div class="modal-content">\
					  <div class="modal-header">\
					    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\
					    <h4 class="modal-title">{title}</h4>\
					  </div>\
					  <div class="modal-body">\
					    <p><img src="/dist/img/{icon}.png" style="margin-right:10px;" />{msg}</p>\
					  </div>\
					  <div class="modal-footer">\
					    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>\
					    <button type="button" class="btn btn-primary">确认</button>\
					  </div>\
					</div>\
					</div>\
					</div>';
			return html;
	},
	open:function(obj){
		//属性有： title:标题，url:打开url,icon,显示图标，width：宽度,height:高度
		var title = (obj == undefined || obj.title == undefined) ? '系统消息' : obj.title;
		var url = (obj == undefined || obj.msg == undefined) ? 'http://www.bootcss.com' : obj.url;
		var icon = (obj == undefined || obj.icon == undefined) ? 'warm' : obj.icon;
		var width = (obj == undefined || obj.width == undefined) ? 500 : obj.width;
		var height = (obj == undefined || obj.height == undefined) ? 400 : obj.height;

		var html = this.get_win()
		html = html.replace('{title}',title).replace('{url}',url).replace('{width}',width).replace('{height}',height)
		$('body').append(html)
		$('#uiModal').modal({backdrop:'static'})
		// $('#uiModal').modal('show');
		$('#uiModal').on('hidden.bs.modal', function (e) {
		 	this.remove()
		})
	},
	get_win:function(){
			var html = '<div class="modal fade" tabindex="-1" role="dialog" id="uiModal">\
					<div class="modal-dialog" role="document">\
					<div class="modal-content" style="width:{width}px">\
					  <div class="modal-header">\
					    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\
					    <h4 class="modal-title">{title}</h4>\
					  </div>\
					  <div class="modal-body" style="height:{height}px">\
					    <iframe style="width:100%;height:100%" frameborder="0" scrolling="auto" src="{url}"></iframe>\
					  </div>\
					  <div class="modal-footer">\
					    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>\
					    <button type="button" class="btn btn-primary">确认</button>\
					  </div>\
					</div>\
					</div>\
					</div>';
			return html;
	}
}

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

上一条：一个简单的网站后台界面，实现不少于三个页面的展示(0928)下一条：PHP开发中涉及到emoji表情的几种处理方法
首页、js模态框
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多