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

博客实战2018年10月9日

马聪 15558002279的博客
马聪 15558002279的博客原创
2018年10月11日 16:08:13653浏览
  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;
    	}
    }

    运行实例 »

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议