js、jquery、css使用过程中学到的一些方法技巧
快速查看
| 1 | 动态创建script/link/style标签 |
| 2 | 在不适合使用iframe的情况下，让页面像iframe那样能分块滚动 |
| 3 | 鼠标在元素上时显示tip风格的提示信息 |
//动态创建link var link=document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setAttribute("href", url); var heads = document.getElementsByTagName("head"); if(heads.length) heads[0].appendChild(link); else document.documentElement.appendChild(link); //动态创建style var style=document.createElement("style"); style.setAttribute("type", "text/css"); if(style.styleSheet){// IE style.styleSheet.cssText = cssString; } else {// w3c var cssText = document.createTextNode(cssString); style.appendChild(cssText); } var heads = document.getElementsByTagName("head"); if(heads.length) heads[0].appendChild(style); else document.documentElement.appendChild(style); //动态创建script var script=document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", "JustWalking.js"); var heads = document.getElementsByTagName("head"); if(heads.length) heads[0].appendChild(script); else document.documentElement.appendChild(script);
2、在不适合使用iframe的情况下，让页面像iframe那样能分块滚动
由于页面中用到了jquery-jstree插件，
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/inc.jsp" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>所有菜单资源</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script language="javascript"> $(function(){ //计算当前页面的高度、宽度 var clientHeight, clientWidth; if($.browser.msie){ //如何是IE浏览器document.body.clientHeight属性得到窗口高度 clientHeight = document.body.clientHeight; clientWidth = document.body.clientWidth; } else{// w3c clientHeight = self.innerHeight; clientWidth = self.innerWidth; } //客户区高度减去#menuTree div距离客户区顶部的距离 clientHeight = clientHeight - $("#menuTree").position().top; //动态创建#menuTree div的css var css = "#menuTree {width:" + clientWidth + "px;height:" + clientHeight+ "px;overflow:scroll;}"; var style=document.createElement("style"); style.setAttribute("type", "text/css"); if(style.styleSheet){// IE style.styleSheet.cssText = css; } else {// w3c var cssText = document.createTextNode(css); style.appendChild(cssText); } var heads = document.getElementsByTagName("head"); if(heads.length) heads[0].appendChild(style); else document.documentElement.appendChild(style); });
// 其他代码... </script> </head> <body> <a href="system/acl!allMenuResource.action?params">菜单授权</a> <a href="system/acl!allActionResource.action?params">操作授权</a> <a href="javascript:auth()">保存授权</a> | <a href="javascript:permit_all()">全部允许</a> <a href="javascript:deny_all()">全部拒绝</a> <a href="javascript:extends_all()">全部继承</a> <a href="javascript:cancel_all()">全部取消</a> <hr/> <div id="menuTree"> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <s:iterator value="#menuIds"> <td width="150" valign="top"> <div id="menuTree_<s:property/>"></div> </td> </s:iterator> </tr> </table> </div> </body> </html>
首先为提示块定义默认样式：
<style type="text/css"> <!-- /* 定义提示信息块宽度、字体颜色、默认不显示、内边距、边框、背景色 */ #tooltip{ width:120px; color:black; display:none; padding:5px; border:1px solid black; background-color:#FFFFCC; } --> </style>
在鼠标下方显示提示，并跟随鼠标移动：
<script type="text/javascript"> $(function(){ //为文本框添加提示信息 $("input").hover(function(e){//mouseover var x = e.pageX + 10; var y = e.pageY + 20; var myTitle = "以字母、数字、下划线开头，6~16个字符，区分大小写"; var tooltipHtml = "<div id='tooltip'>" + myTitle + "</div>"; //创建提示框 $("body").append(tooltipHtml); //添加到页面中 $("#tooltip").css({ "top": y + "px", "left": x + "px", "position":"absolute",//很重要，缺少该属性#tooltip将会位于奇怪的位置 }).show("fast");//设置提示框的坐标，并显示 }, function(){//mouseout $("#tooltip").remove(); }).mousemove(function(e){//tip跟随鼠标移动，比较耗费系统资源，并且效果不太流畅，如无必要不推荐使用
$("#tooltip").css({
"top": (e.pageY + 20) + "px",
"left": (e.pageX + 10) + "px"
});
}); }); </script>
如果觉得在鼠标下方遮盖了其他元素，可以在元素前或后添加提示信息，只需要对mouseover事件的处理函数进行如下修改：
var x = e.target.offsetLeft + e.target.offsetWidth + 10; var y = e.target.offsetTop + 20;
好吧，昨天下载了jquery-ui，发现有现成的tooltip插件可以用，真方便啊_(:3」∠)_
4、单击div上传文件，并且页面中不显示<input type="file"/>
<script type="text/javascript"> $(function(){ $(".imageView").click(function(){ $("#avatar").click(); }); }); </script> <style type="text/css"> <!-- #avatar{ width: 0px; height: 0px; position: absolute; top: -20px; left: -20px; } --> </style> <form id="uploadForm" action="system/login.action" method="post" enctype="multipart/form-data"> <input type="hidden" name="method:userInfoInput"/> <div><input type="file" name="avatar" id="avatar"/></div> </form> <div class="imageView">选择你要上传的 头像</div>
4、var args = Array.prototype.slice.call(arguments); 的作用
这儿主要说明的是javascript中call()方法和arguments对象的作用，看了一些网上的东西，大致上了解整个语句的运作流程了。
首先说说call的用法：
//call的作用是调用object对象上的method方法，但在调用的时候，用obj对象替换object
//object是window的时候通常是省略的
object.method.call(obj, arg1,...);
//上面的方法等同于obj.method(arg1,...);obj自身是可以没有定义method这个方法的
//因此var args = Array.prototype.slice.call(arguments);就相当于
var args = arguments.slice();
另一个要说的就是arguments对象了，arguments对象是函数实参的副本
function a(x, y){ //在这儿看到的arguments就是指的x, y //arguments类似于数组，但并不是真的数组，不能直接调用slice()方法
//所以才用了Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
//此时args[0]是x的值，args[1]是y的值
}
浙公网安备 33010602011771号