有没有Bootstrap3.3 动态添加和关闭 tab的方案

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

/**

* 增加标签页

*/

function addTab(options) {

//option:

//tabMainName:tab标签页所在的容器

//tabName:当前tab的名称

//tabTitle:当前tab的标题

//tabUrl:当前tab所指向的URL地址

var exists = checkTabIsExists(options.tabMainName, options.tabName)

if(exists){

$("#tab_a_"+options.tabName).click()

} else {

$("#"+options.tabMainName).append('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this)">×</button>'+options.tabTitle+'</a></li>')

//固定TAB中IFRAME高度

mainHeight = $(document.body).height() - 5

var content = ''

if(options.content){

content = option.content

} else {

content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'

}

$("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>')

$("#tab_a_"+options.tabName).click()

}

}

/**

* 关闭标签页

* @param button

*/

function closeTab (button) {

//通过该button找到对应li标签的id

var li_id = $(button).parent().parent().attr('id')

var id = li_id.replace("tab_li_","")

//如果关闭的是当前激活的TAB，激活他的前一个TAB

if ($("li.active").attr('id') == li_id) {

$("li.active").prev().find("a").click()

}

//关闭TAB

$("#" + li_id).remove()

$("#tab_content_" + id).remove()

}

/**

* 判断是否存在指定的标签页

* @param tabMainName

* @param tabName

* @returns {Boolean}

*/

function checkTabIsExists(tabMainName, tabName){

var tab = $("#"+tabMainName+" >#tab_li_"+tabName)

//console.log(tab.length)

return tab.length >0

}

很多时候，如果你的项目需要的是一个轻量级的轮播，不需要很多的功能。同时你的项目是采用Bootstrap，（一个最流行的开源前端框架）的话。你可以参考一下bootstrap官方组件。介绍Animate.css

为了让我自己写的动画效果值得称赞，我用一个非常有名的开源的CSS3动画库，被形象的称为animate.css。 Dan Eden写的。

这是让我能专注于手头的任务，而不是解释CSS3动画的代码。

用Animate.css 需要2个步骤：

在html文档中引入animate.min.css。

在网页中要加动画的元素上添加animated yourchosenanimation类。

接下来你用Animate.css网站上的看到的关于动画的类名，代替yourchosenanimation。

引入Bootstrap轮播组件

Bootstrap轮播组件有三个主要的部分。

轮播指示显示幻灯的页面数量，给用户提供一个视觉线索，并提供可以滑动的导航。

轮播条目，一个叫.carousel-inner的类，包含在外边框的里边。代表每一个独立的滑块。每个图片里边的都可以放置图片。也可以添加标题。还可以在html元素上添加carousel-caption类名。Bootstrap会有自带的样式。我们可以通过这些元素添加动画。

最后，是轮播控制箭头，功能是可以使用户前后滑动。

<select id="ddlResourceType" onchange="getvalue(this)">

</select>

动态删除select中的所有options：

document.getElementById("ddlResourceType").options.length=0

动态删除select中的某一项option：

document.getElementById("ddlResourceType").options.remove(indx)

动态添加select中的项option:

document.getElementById("ddlResourceType").options.add(new Option(text,value))

上面在IE和FireFox都能测试成功，希望以后你可以用上。

其实用标准的DOM *** 作也可以，就是document.createElement，appendChild，removeChild之类的。

取值方面

function getvalue(obj)

{

var m=obj.options[obj.selectedIndex].value

alert(m)//获取value

var n=obj.options[obj.selectedIndex].text

alert(n)//获取文本

}

---