JS:
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
一。
功能描述:点右边的垃圾桶图标,左边的多行输入框内容被清空,,,支持页面中多个这样的功能
HTML:
<div class="delbox">
<div class="shmsbox"><textarea name="" class="msk"></textarea></div>
<div class="delpic" onclick="delwby(this);"><img src="img/del.png" /></div>
<div class="clear"></div>
</div>
CSS:
.delbox{ 65.5%; height:53px; *height:50px; background-color:#3d66a5; border:solid 1px #cacaca;}
.delbox .shmsbox{ 95%; height:53px;*height:50px; float:left; background-color:#fff;}
.delbox .shmsbox .msk{ 99%; height:auto; border:0; }
.delbox .delpic{ 5%; height:auto; float:left; text-align:center; cursor:pointer;}
.delbox .delpic img{ auto; height:auto; padding-top:16px; margin-left:1px; }
js:
function delwby(obj){
$(obj).parent().find("textarea",".msk").first().val('');
}
注: $(obj).parent().find 对象的父对象 .parent() 在父对象下寻找 .find('')
二,增加一条功能
HTML:
<div id="outplan" class="planbox">
<div>要增加(复制)的内容</div>
<div>要增加(复制)的内容</div><!--复制内容一-->
</div>
<div id="albtn">增加一条</div>
js:
$(document).ready(function(){
$("#albtn").click(function(){
var tabtr="<div>要增加(复制)的内容</div>";
$("#outplan").append(tabtr);
});
})
注:被复制内容和要增加的内容要在同一DIV里
$("#outplan").append(“<b>Hello World!</b>”)在元素结尾插入内容
$("<b>Hello World!</b>").appendTo("#outplan");
$("#outplan").prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。
$("<b>Hello World!</b>").prependTo("#outplan");
三,点击选中行,弹出窗口,背景变灰
HTML:
<tr class="modalLink" onclick="bgs(this);">
<td>刘春燕</td>
<td>其它</td>
<td>2015-01-12 08:02:00</td>
<td>2015-01-15 06:10:00</td>
<td>初始化</td>
<td>未完结</td>
<td></td>
</tr>
<tr class="modalLink" onclick="bgs(this);">
<td>刘春燕</td>
<td>飞机</td>
<td>2015-01-12 08:02:00</td>
<td>2015-01-15 06:10:00</td>
<td>申核通过</td>
<td>完结</td>
<td>2015-01-11 08:02:00</td>
</tr>
JS:<script type='text/javascript' src='js/jquery.modal.js'></script>
<script type='text/javascript' src='js/site.js'></script>
function bgs(obj){
// alert("sdrase");
// $(obj).find("td").attr("style","BACKGROUND-COLOR:#e6e7eb").siblings("tr").find("td").attr("style","BACKGROUND-COLOR:#fff");
// $("#tcbox1").fadeIn(100)
// $(".overlay").animate({ opacity:.6},10);
$(obj).addClass("trss").siblings("tr").removeClass("trss");
}
四,分页
html:
<div class="allpage">
<div class="nopage">下一页</div>
<div class="pages">9</div>
<div class="pages">8</div>
<div class="pages">7</div>
<span class="hidepage">...</span>
<div class="pages">3</div>
<div class="pages">2</div>
<div class="onpage">1</div>
<div class="pages">上一页</div>
</div>
css:
.allpage{ auto; height:20px; margin-top:20px; padding:0px 20px;}
.pages{ auto; height:auto; float:right; margin-right:5px; border:solid 1px #b2b2b2; padding:2px 6px; }
.pages:hover{ background-color:#3865a4; color:#fff;}
.hidepage{ auto; height:20px; line-height:20px; float:right; margin-right:5px; display:block;}
.nopage{ auto; height:auto; float:right; margin-right:5px; border:solid 1px #b2b2b2; padding:2px 6px; background-color:#9f9f9f; color:#fff;}
.onpage{ auto; height:auto; float:right; margin-right:5px; border:solid 1px #b2b2b2; background-color:#3865a4; padding:2px 6px; color:#fff;}
五,点击第一个多选按钮全选或全不选,,滚动条功能
html:
<div class="linklist">
<div class="lltit">
<div class="lldx"><input name="" type="checkbox" value="" onclick="if(this.checked==true) { checkAll('cusm'); } else { clearAll('cusm'); }" /></div>
<div class="llword">我的客户</div>
<div class="clear"></div>
</div>
<div id="Scroller-1" class="Scroller-1">
<ul id="Scrollbar" class="Scrollbar">
<li>
<div class="lidx"><input name="cusm" type="checkbox" value="" /></div>
<div class="liname">刘春燕</div>
<div class="clear"></div>
</li>
<li>
<div class="lidx"><input name="cusm" type="checkbox" value="" /></div>
<div class="liname">刘春燕</div>
<div class="clear"></div>
</li>
<li>
<div class="lidx"><input name="cusm" type="checkbox" value="" /></div>
<div class="liname">刘春燕</div>
<div class="clear"></div>
</li>
</ul>
<div id="pannel" class="pannel">
<div id="drag" class="dragbox"></div>
</div>
</div>
<div class="lltit">
<div class="lldx"><input name="" type="checkbox" value="" onclick="if(this.checked==true) { checkAll('coll'); } else { clearAll('coll'); }" /></div>
<div class="llword">我的同事</div>
<div class="clear"></div>
</div>
<div id="Scroller-2" class="Scroller-1" style="border-bottom:solid 1px #cacaca;">
<ul id="Scrollbar2" class="Scrollbar">
<li>
<div class="lidx"><input name="coll" type="checkbox" value="" /></div>
<div class="liname">刘春燕</div>
<div class="clear"></div>
</li>
<li>
<div class="lidx"><input name="coll" type="checkbox" value="" /></div>
<div class="liname">刘春燕</div>
<div class="clear"></div>
</li>
<li>
<div class="lidx"><input name="coll" type="checkbox" value="" /></div>
<div class="liname">刘春燕</div>
<div class="clear"></div>
</li>
</ul>
<div id="pannel2" class="pannel">
<div id="drag2" class="dragbox"></div>
</div>
</div>
</div>
css:
.freembox .mesdate .linklist{ 29%; height:auto; float:left; margin-left:1%; }
.freembox .mesdate .linklist .lltit{ 131px; height:40px; margin:0 auto; background-color:#f7f7f7; border:solid 1px #cacaca; }
.freembox .mesdate .linklist .lltit .lldx{ auto; height:auto; float:left; margin-top:11px; *margin-top:10px; margin-left:5px;_margin-left:3px;}
.freembox .mesdate .linklist .lltit .llword{ auto; height:40px; float:left; margin-left:11px; *margin-left:10px; line-height:40px; font-weight:bold; color:#3b64a4;}
.Scroller-1{ 131px; height:170px; border-left:solid 1px #cacaca; border-right:solid 1px #cacaca; position:relative; margin:0 auto; overflow: hidden;}
.Scrollbar{ 120px; height:auto; _padding-top:10px; position:absolute; top:0px; left:0; z-index:10px; }
.Scrollbar li{ 120px; height:16px; padding-top:10px;_padding-top:0px; }
.Scrollbar li .lidx{ auto; height:auto; float:left; margin-left:5px;}
.Scrollbar li .liname{ auto; height:auto; float:left; margin-left:9px; }
.pannel{11px; height:170px; top:0; right:0; background-color:#d0d0d0; position:absolute; z-index:11px;}
.dragbox{ 10px; height:51px; background-color:#fff; left:1px; cursor:pointer; position:absolute;}
js:
function checkAll(name) {
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++){
if((el[i].type=="checkbox") && (el[i].name==name)){
el[i].checked = true;
}
}
}
function clearAll(name) {
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++){
if((el[i].type=="checkbox") && (el[i].name==name)){
el[i].checked = false;
}
}
}
<script src="js/scroll1.js" type="text/javascript"></script>
<script src="js/scroll2.js" type="text/javascript"></script>