前端常用功能记录(一)

发表于:2015-4-01 10:18

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:单曲荨环    来源:51Testing软件测试网采编

  一直没有勇气来写与前端相关的博客,着实因为前端太烂。直至近几天把《暗时间》这本书看完,才鼓起勇气。
  不愿意写的原因着实许多,主要因为网上与前端相关的资料太多了,而且各种成熟的框架都有了,写这些东西略显"浅薄"。anyway,记录一些通用的东西还有一些细节,对掌握基础功能还是有帮助的。
  主要记录一些常用的前端的功能(express框架,ejs模板引擎),不过运行的前提需要引入一些前端包,如jquery,bootstrap,datatables等等。若引入特殊的包下面会提到。
  tab之间切换
  这里仅以2个tab为例,多个tab切换类似。
  场景:选择不同的tab会切换到对应的tab,同时,两个tab对应不同的下拉框,当选择不同的panel是,下拉框的内容动态生成。
  包:select2.js
html:
<div class="col-lg-4">
<div class="panel panel-default">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="Tab1" class="active"><a href="#">面板1</a></li>
<li id="Tab2"><a href="#">面板2</a></li>
</ul>
</div>
</div>
<label class="col-lg-2">下拉选项:</label>
<div class="col-lg-4">
<select style="width:80%" class="select2" id="dropdown">
<option></option>
</select>
</div>
js:
$(document).ready(function() {
$(".select2").select2(
{
placeholder: "请选择"
}
);
var option1 = ['赵','钱','孙','李']
var option2 = ['周','吴','郑','王']
$('#Tab1').click(function(){
$('.nav li').removeClass('active');
$('#Tab1').addClass('active');
//绑定Tab1的option
$('#dropdown').empty() //清空选项值
$('#dropdown').append('<option></option>');
//动态给select添加option选项
for(var i in option1) {
var option = $('<option value="' + option1[i] + '">').html(option1[i]);
$('#dropdown').append(option);
}
});
$('#Tab2').click(function(){
$('.nav li').removeClass('active');
$('#Tab2').addClass('active');
//绑定Tab2的option
$('#dropdown').empty()
$('#dropdown').append('<option></option>');
for(var i in option2) {
var option = $('<option value="' + option2[i] + '">').html(option2[i]);
$('#dropdown').append(option);
}
});
});
</script>
31/3123>
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号