1.组件的动态添加,div的复制
对组件的动态处理是动态网页的必备技能。这种情况基本无法避免。就好比如客户需要填写表单,但具体要几个表单呢你是未知的,很多人的处理方式就是静态的陈列。比如直接写好十个表单放在网页上。这样的用户体验真的很差,我们需要根据客户的需求去动态的添加组件。当然有create方法去一个个创建,那当组件很多很复杂的时候呢?所以我们需要用一个div去把需要的组件框起来,直接一下子复制div中所有的组件。这里举个简单的小例子。去复制被需求的几个组件。
<html>
<body>
<h1>选择需要复制的次数</h1>
<div id="d1">
<select id="s1" οnchange="myfunction()" />
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
</div>
<div id="father">
<label>我是等待被复制的div</label>
<button type="button">按钮</button>
<label>文本框</label><input type="text">
</div>
<p>下面是被复制的</p>
<div id="son"></div>
<div id="son2"></div>
<div id="son3"></div>
<script>
function myfunction(){
var select = document.getElementById("s1");
//获得当前选中的值
var value = select.value;
if(value==2){
var fatherDiv = document.getElementById("father");
var sonDiv = document.getElementById("son");
var sonDiv2 = document.getElementById("son2");
//将fatherDiv中的所有内容 包括HTML标签 给son
sonDiv.innerHTML = fatherDiv.innerHTML;
sonDiv2.innerHTML = fatherDiv.innerHTML;
}
else if(value==3){
var fatherDiv = document.getElementById("father");
var sonDiv = document.getElementById("son");
var sonDiv2 = document.getElementById("son2");
var sonDiv3= document.getElementById("son3");
//将fatherDiv中的所有内容 包括HTML标签 给son
sonDiv.innerHTML = fatherDiv.innerHTML;
sonDiv2.innerHTML = fatherDiv.innerHTML;
sonDiv3.innerHTML = fatherDiv.innerHTML;
}
}
</script>
</body>
</html>
运行结果如图:
这里的select框也用到了onchange的方法,虽然例子简单但体现了动态的思想。
缺点:当你的组件很复杂,例如伸缩框,Tab窗等,每个按钮都有自己的索引,每个表框都有自己的id,这个复制过去后,里面的索引id等都没有改变,会发生组件的冲突。而且复制出来的组件在源码里是没有的,想单独去更改复制出来的组件的某个功能是比较麻烦的。
2.组件的隐藏,div的隐藏与更改
为了方便源码的更改,但又想实现页面的“动态”,这里可以用一个小方法。将需要的组件陈列好,隐藏起来,当客户需要的时候再展现出来。
<html>
<body>
<h1>选择需要复制的次数</h1>
<div id="d1">
<select id="s1" οnchange="Hidden()" />
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
</div>
<div id="father">
<label>我是等待被复制的div</label>
<button type="button">按钮</button>
<label>文本框</label><input type="text">
</div>
<p>下面是被复制的</p>
<div id="son1" style="display:none">
<label>我是等待被复制的div 但我可以和父类不一样</label>
<button type="button">按钮</button>
<label>文本框</label><input type="text">
</div>
<div id="son2" style="display:none">
<label>我是等待被复制的div 但我可以和父类不一样也和上面的不一样</label>
<button type="button">按钮</button>
<label>文本框</label><input type="text">
</div>
<script>
function Hidden() {
var select = document.getElementById("s1");
var div1 = document.getElementById("son1");
var div2 = document.getElementById("son2");
//1.获得当前选中的值
var value = select.value;
if (value == 2) {
div1.style.display = '';
} else if (value == 3) {
div1.style.display = '';
div2.style.display = '';
}
}
</script>
</body>
</html>
可以看到文本的内容可以发生改变,和上面的方法不一样不再是单纯的复制。用户使用起来也有动态的感觉。但其实本质还是静态的网页。优点就是方便修改,可以做的种类很多。缺点也很明显,如何要100个甚至1000个表单呢?难道要提前写好这么多然后隐藏吗?
批量处理组件的隐藏与显示
当需要隐藏的组件的数量较少时,可以直接用if语句判定。如下面的程序。根据用户对下拉框内容的选择来决定显示有几个DBR组件的显示:
function selectDBR(s,db1,db2,db3){
var select=document.getElementById(s);
var value=select.value;
var DB1=document.getElementById(db1);
var DB2=document.getElementById(db2);
var DB3=document.getElementById(db3);
if(value==1){
DB2.style.display='none';
DB3.style.display='none';
}
if(value==2){
DB2.style.display='';
DB3.style.display='none';
}
if(value==3){
DB2.style.display='';
DB3.style.display='';
}
}
但是当某类组件数量达到一定值,比如说10个甚至100个。每次if后面的函数体内容就都需要修改,甚至获得这个组件的id也十分陈长。在这里提供一个方法。将要隐藏的某一类组件的id的命名格式统一化,例如下面多个panel的id我都设置成了“it+number“的形式。
<div class="panel panel-info" id="it1">
<div class="panel panel-info" id="it2" style="display:none">
<div class="panel panel-info" id="it3" style="display:none">
<div class="panel panel-info" id="it4" style="display:none">
<div class="panel panel-info" id="it5" style="display:none">
<div class="panel panel-info" id="it6" style="display:none">
批量处理是,可以用for循环,这里的在循环内根据id来修改的语句比较有意思
function Hidden(){
var select=document.getElementById("s1");
var value=select.value;
var size=select.length;
for(var i=1;i<=value;i++)
document.getElementById("it"+i).style.display='';
}
上面两种方法都是十分实用的,可以快速的完成客户的某些需求。适当的更改或者两种方法的结合带来的效果会更好。
3.补充.动态的修改进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 交替的进度条</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 50%;" id="task">
<span class="sr-only">60% 完成(成功)</span>
</div>
<button type="button" οnclick="change()">GO!</button>
</div>
<script>
function change(){
var UP=90;
document.getElementById("task").style.width=UP+"%";
document.getElementById("task").className="progress-bar progress-bar-danger";
}
</script>
</body>
</html>
解析:
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
这些分别是:设置初始值,设置最小值、最大值。
动态的函数写的很简单,但关键的就是更改style的width,这里有很多细节。
如果直接使用实数去更改width时:
document.getElementById("id1").style.width="100px";
document.getElementById("id1").style.width="10%";
使用参数更改width要额外用双信号加单位
document.getElementById("id1").style.width=x+"px";
document.getElementById("id1").style.width=x+"%";