毕设中巩固的技术(二)Bootstrap常用组件实例

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012345283/article/details/34497877

拿来就用的组件就不介绍了,这里主要讲解一下Bootstrap官方文档写的不那么易于理解的组件。

1、顶部导航栏上的搜索框

Bootstrap官方提供的默认样式是这样的:


这个搜索框看上去有两个问题:①按钮和搜索内容隔的太远了,最好可以放到一起 ②搜索按钮最好用一个放大镜的小图标

于是我们对这个搜索框进行改写。

<form class="navbar-form navbar-left" role="search" id="searchForm">
	<div class="form-group">
		<i class="fa fa-search"></i>
		<input type="text" class="form-control" placeholder=Search name="searchKeyWord" id="search-text">
	</div>
</form>
#searchForm {
	margin: 12px 0;
	background: #BBBBBB;
	border-radius: 10px;
}
#search-text {
	width: auto;
	padding: 0 12px;
	height: 26px;
	background: #BBBBBB;
	vertical-align: middle;
	border-radius: 10px;
	border: 0;
}
input#search-text:focus {
	border-radius: 10px;
}

实现好的效果如下:


2、弹出框的用法

这个应该算Bootstrap比较坑爹的组件了,先来看看它的用法

名称 类型 默认值 描述
animation boolean true 为popover增加一个渐变动画的效果
html boolean false popover的content可以使用html
placement string | function 'right' popover出现的位置,选项可以是: - top | bottom | left | right | auto.
selector string false 这个比较有用,当页面上有动态生成的元素时,指定了selector的匹配规则可以匹配到新添加的元素。类似于jquery里$('body').on('click', ".rest", function(){}).
trigger string 'click' popover如何被触发,选项有: - click | hover | focus | manual
title string | function '' popover的标题
content string | function '' popover的内容
delay number | object 0

延时 delay: { show: 500, hide: 100 }

show指定的是出现之前的延时,hide指定是隐藏前的延时

container string | false false

官方文档上说是防止在窗口缩放大小的时候让popover有一个可以依赖的点。但是我实验了一下好像没什么作用,希望大家有知道的告诉下。

下面来说说它坑爹的地方:仔细看title和content的类型,写的是string|function。看到function,第一反应这个值应该是可变的,但是不幸的是,popover只是在页面刚刚载入的时候生成内容,之后内容就不变了。

我们可以来试试:

$(function() {
	$('#test').popover( {
		'title' : getDynamicTitle(),
		'content' : getDynamicContent(),
		'trigger' : 'click'
	});
});

function getDynamicContent() {
	return new Date();
}

function getDynamicTitle() {
	return new Date();
}

发现生成的popover的时间总是固定的,就是刚载入页面的那个时间。这就大大限制了这个组件的功能,不过也有方法来弥补。

我们可以弹出框之后再通过ajax把内容填充进去,为了增强用户体验,可以在读取数据的时候先弄个载入动画放到这个popover里。

我们这里用popover实现一个简单的购物车:

$('#cartBtn').popover( {
	html : true,
	placement : "bottom",
	trigger : "click",
	content : "您的购物车还是空的,先去挑选美食吧"
}).on("click", function(e) {
	getCartData();
});

getCartData方法则会通过ajax与后台交互得到数据并塞到popover中,这样便实现了popover动态载入内容,实现效果如下:



阅读更多
换一批

没有更多推荐了,返回首页