jquery UI dialog 和tab 初次使用

原本还想tab该怎么实现,后来问了朋友,使用UI自带的就可以了。

找到http://jqueryui.com/demos/ 官方这个demo网站。找下来。

然后发现css样式在那个jquery-ui.css里边。

先做的tab,就一边朝着一边修改,只是发现各种css对应哪个就花了许久。选定,默认,静态,焦点。都各不相同,倒是为扩展做了准备。

做好了发现ie下会有边框,问了朋友,加了:focus {
outline: none;
}

就解决了。

然后ie下适配又和chrome不一样,唉,适配ie6,7,8需要单独写样式。好在有之前的朋友写另一个网站的范例

<!–[if lt IE 7 ]> <body class=”ie6″> <![endif]–>
<!–[if IE 7 ]> <body class=”ie7″> <![endif]–>
<!–[if IE 8 ]> <body class=”ie8″> <![endif]–>
<!–[if IE 9 ]> <body class=”ie9″> <![endif]–>
<!–[if (gt IE 9) ]> <body class=”home”> <![endif]–>
<!–[!(IE)]><!–>
<body class=”notIE home”> <!–<![endif]–>

直接拿来用就行了。

之后就是删删改改,确定各种边界。然后因为要考虑分辨率的自适应,所以所有宽度尺寸都没法固化。百分比也还好。

就是有一块需要用jq单独赋值宽度。

$(“.pad-font”).css({
“color”:”white”,
“width”:$(window).width()*0.4
});

之后就是增加弹出框。

其实用demo就足够了。无非是增加一些尺寸限定。

$(function() {
$( “#dialog” ).dialog({
autoOpen: false,
height:340,
width:305,
modal:false,
show: {
effect: “blind”,
duration: 1000
},
hide: {
effect: “blind”,
duration: 1000
}
});

大概就这么多吧?不过,要找不同ie测试,真是头疼啊。

此条目发表在js分类目录。将固定链接加入收藏夹。