UI笔记——杂（不定时更新）

树形设计者

浏览: 17475 次
性别:
来自: 南京

最近访客更多访客>>

皮匠X臭

yuanchaobin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

1.如何在button上设置鼠标触碰样式

2.在页面中添加时间js代码（时时）

3.页面加载状态

4.固定页面元素位置不随滚动条滚动

5.iframe获取子元素高度，父类自适应

6.利用jquery滚动到导航条时固定(fixed)在顶部

7.DIV和Table的水平、垂直居中

8.JS各种获取控件ID的方法

9.JS判断浏览器类型与版本

10.给span宽度的CSS完美方法

11.密码框显示文字

11.-------------------------------------------------------------------------------------

<input type="text" onfocus="changeTip(this);"id="passText"name="passText"value="请输入密码"/>
        <input style="display:none;"type="password" onblur="changeTip(this);"id="pass"placeholder=""name="pass"value=""/>
        <script type="text/javascript">
        function changeTip(th){
            var passText =document.getElementById('passText');
            var pass =document.getElementById('pass');
            if(th.id =='pass'){

                if(th.value ==''||th.value.length ==0){
                    passText.style.display='';
                    pass.style.display='none';
                }

            }else{
                passText.style.display='none';
                pass.style.display='';
                pass.focus();
            }

        }
    </script>

10.-------------------------------------------------------------------------------------

span{

display:-moz-inline-box;
display:inline-block;

width:XXXX;

}

9.-------------------------------------------------------------------------------------

1、判断浏览器是否为IE
        document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0；
        navigator.userAgent.indexOf("MSIE")>0 ? 'IE' : 'others'：navigator.userAgent是描述用户代理信息。
        navigator.appName.indexOf("Microsoft") != -1 ? 'IE' : 'others'：navigator.appName描述浏览器名称信息。
2、判断IE版本
        navigator.appVersion.match(/6./i)=="6." ? 'IE6' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE6；
        navigator.userAgent.indexOf("MSIE 6.0")>0 ? 'IE7' : 'other version'：同上；
        navigator.appVersion.match(/7./i)=="7." ? 'IE7' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE7；
        navigator.userAgent.indexOf("MSIE 7.0")>0 ? 'IE7' : 'other version'：同上；
        navigator.appVersion.match(/8./i)=="8." ? 'IE8' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE8；
        navigator.userAgent.indexOf("MSIE 8.0")>0 ? 'IE8' : 'other version'：同上。
3、JS获取浏览器信息
        浏览器代码名称：navigator.appCodeName
        浏览器名称：navigator.appName
        浏览器版本号：navigator.appVersion
        对Java的支持：navigator.javaEnabled()
        MIME类型（数组）：navigator.mimeTypes
        系统平台：navigator.platform
        插件（数组）：navigator.plugins
        用户代理：navigator.userAgent

DEMO:
Js代码
<script language="JavaScript">
    
</script>

8.-------------------------------------------------------------------------------------

普通状态中JS获取控件ID
document.getElementById('controlID');
JS获取父窗口控件ID
window.parent.document.getElementById("controlID");
JS获取iframe中控件ID
window.frames['iframeID'].document.getElementById("controlID");
JS获取传入页面中控件ID
opener.document.getElementById('controlID').value;

7.-------------------------------------------------------------------------------------

这段时间的项目工作接触了比较多的页面设计问题，现对图片和文字在DIV、Table中的水平、垂直居中问题做个总结。
一般图片的居中问题容易解决，我的解决方法是通过样式设置：
background-image:url(path) //链接图片的路径
background-repeat:repeat; //设置图片是否是否水平、垂直延展。可用的参数有：repeat、repeat-X、repeat-Y和no-repeat。
background-position:bottom center;这个就是设置图片的具体位置，第一个是水平，第二就是垂直方向的。还可以使用具体的像素（为当前容器里的绝对像素）。
文字的水平居中很容易设置
在CSS中使用Text-align:就可以了
Table还可以用align:
DIV的垂直居中：首先获取当前DIV的高度h，然后设置line-height:h;vertical-align:middle.这样文字就可以垂直居中显示。
Table好象对上述设置不支持，所以直接在Table标记里添加一属性：valign：middle。同时还要设置padding-top一值，我见网上有说设置padding-top :2px就可以了，我在项目中也是这个像素。但我不知道这个像素值是否跟当前的tr高度有关。

6.-------------------------------------------------------------------------------------

一、利用js制作
html 代码：
代码如下:
<link href="css/base.css" media="all" rel="stylesheet" type="text/css" />
<br />
<style type="text/css">
<br />
.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}<br />
.header{height:150px;}<br />
#nav{padding:10px;position:relative;top:0;background:black;width:1000px;}<br />
a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}<br /></style>
<br />
<br />
<br />
<div class="wrapper"><br />
<div class="header"> </div>
<br />
<div id="nav"><br />
<a href="#">11111</a><br />
<a href="#">22222</a><br />
<a href="#">33333</a><br />
<a href="#">44444</a><br />
<a href="#">55555</a></div>
</div>

menuFixed.js 代码：
代码如下:
function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < height){
obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}

这个方法也好也不好，好处在于不用引用什么，方法比较简单，只是切换relative和fixed，坏处也很明显并且很严重，就是页面如果比较长，滚动返回的时候，固定的层变没了。

二、利用jquery
<div style="background: #999; height: 500px"> </div>
<br />
<div id="fixedMenu" style="width: 100%; background: #eee">菜单</div>
<br />
<div style="background: #999; height: 900px"> </div>
<br />
<script type="text/javascript" src="http://www.niwo8.com/statics/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var ie6 = /msie 6/i.test(navigator.userAgent)
        , dv = $('#fixedMenu'), st;
        dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
        $(window).scroll(function () {
            st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
            if (st >= parseInt(dv.attr('otop'))) {
                if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果
                    dv.css({ position: 'absolute', top: st });
                }
                else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
            } else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
        });
    });
</script>
复制以上代码到空页面中，就能看看到效果。这种方法需要引用jquery.js库，jquery.js库最好选用比较新版的，好像1.2.3版本以前的不能正常产生效果。当前代码中的jquery.js库是1.8.0版本的（2013年4月19日），如果库链接失效，请自行下载jquery.js库。

当然了，如果你的导航在页面顶端，就不用那么麻烦了，直接定义position:fixed就可以了。另外，如果你希望更美观些，可以利用CSS3增加阴影，或者增加透明度。

5.-------------------------------------------------------------------------------------

<iframe id="iframepage" width="100%" height="100%" frameBorder="0" scrolling="no" src="Index.html" onload="Javascript:SetCwinHeight()"></iframe>

//start iframe自适应高度
function SetCwinHeight() {
    var iframeid = document.getElementById("iframepage"); //iframe id
    iframeid.height = "10px";//先给一个够小的初值,然后再长高.
    if (document.getElementById) {
        if (iframeid && !window.opera) {
            if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
                iframeid.height = iframeid.contentDocument.body.offsetHeight;
            } else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
                iframeid.height = iframeid.Document.body.scrollHeight;
            }
        }
    }
}
window.onload = SetCwinHeight();
//end iframe自适应高度

4.-------------------------------------------------------------------------------------

.fixed{
display:block;
position:fixed;
}

3.-------------------------------------------------------------------------------------

document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.

2.-------------------------------------------------------------------------------------

1.-------------------------------------------------------------------------------------

<INPUT TYPE="submit" style="cursor: hand" value="hand">
auto          ：标准光标
default       ：标准箭头
hand          ：手形光标
wait          ：等待光标
text          ：I形光标
vertical-text ：水平I形光标
no-drop       ：不可拖动光标
not-allowed   ：无效光标
help          ：?帮助光标
all-scroll    ：三角方向标
move          ：移动标
crosshair     ：十字标

分享到：

【转】- 按回车键实现登录-- JS实现 | UI笔记——把网站变成非凡的品牌

2013-07-03 21:05
浏览 502
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论