|
锁定老帖子 主题：X-WebOS的界面雏形
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (2)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-04-10
最后修改：2011-04-11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background : #000 ;
background-image : url(img/bg_body.jpg) ;
}
.webos {
padding : 0px ;
margin : 0px ;
width : 100% ;
position : absolute ;
top : 0px ;
left : 0px ;
overflow : hidden ;
border : 0px ;
background-image : url(img/bg.jpg) ;
height : 124px ;
}
.webos .logo {
padding : 0px ;
margin-top : 10px ;
width : 10% ;
height : 100px ;
line-height : 100px ;
font-size : 23px ;
font-family : arial ;
font-weight : bold ;
text-align : center ;
color : #ff0033 ;
float : left ;
}
.webos ul {
padding : 0px ;
margin : 0px ;
list-style-type : none ;
width : 90% ;
border : 0px ;
overflow : hidden ;
float : right ;
}
.webos ul li {
padding : 0px ;
margin-left : 8px ;
margin-top : 10px ;
margin-bottom : 14px ;
width : 89px ;
height : 100px ;
line-height : 176px ;
float : left ;
background-repeat : no-repeat ;
background-position : 15px 12px ;
text-align : center ;
font-size : 15px ;
font-family : arial ;
font-weight : bold ;
color : yellow ;
text-decoration : none ;
cursor : pointer ;
}
.quick-box {
padding :0px ;
margin : 0px ;
border : 1px solid #fff ;
position : absolute ;
}
.title {
padding-left : 10px ;
margin : 0px ;
height : 32px ;
line-height : 32px ;
font-size : 13px ;
font-family : arial ;
font-weight : bold ;
color : #fff ;
background-image : url(img/bg.jpg) ;
border-bottom : 1px solid #fff ;
}
.content {
padding-left: 12px ;
padding-right: 10px ;
padding-top : 10px ;
padding-bottom : 14px ;
margin : 0px ;
background : #333 ;
color : #000 ;
}
.active {
border : 2px solid #fff ;
}
span.close {
padding : 0px ;
margin-right : 10px ;
widtn : 48px ;
height : 32px ;
line-height : 32px ;
font-size : 14px ;
font-family : arial ;
color : #fff ;
float : right ;
cursor : pointer ;
}
ul.message-list {
padding : 0px ;
margin : 0px ;
width : 360px ;
list-style : none ;
background : #4e514e ;
border : 1px solid #000 ;
overflow : hidden ;
background : #000 ;
}
ul.message-list li {
padding : 5px ;
margin : 0 auto ;
margin-bottom : 1px ;
width : 350px ;
line-height : 18px ;
font-size : 13px ;
font-family : arial ;
color : #000 ;
background : #fff ;
}
span.message_total {
padding : 0px ;
margin : 0 auto ;
font-size : 14px ;
font-family : arial ;
color : #000 ;
background : #ff0033 ;
display : block ;
width : 360px ;
height : 24px ;
line-height : 24px ;
text-align : center ;
}
.magic-box {
padding : 0px ;
margin : 0px ;
width : 450px ;
height : 320px ;
overflow : hidden ;
border : 2px solid #4e514e ;
background : #fff ;
position : absolute ;
display : none ;
}
</style>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
var config = {
logo : "X-WebOS" ,
navigator : [
{type : "type_personal" ,name : "个人资料" , icon : "personal.png"} ,
{
type : "type_message" ,
name : "短信息" ,
icon : "message.png" ,
texts : [
"你好张三!" ,
"最近好吗?最近好吗?最近好吗?最近好吗?最近好吗?最近好吗?最近好吗?最近好吗?" ,
"有时间电话联系(*^__^*) 嘻嘻……" ,
"你的电话是多少？告诉我一下，有事找你，(*^__^*) 嘻嘻……"
]
} ,
{name : "联系人" , icon : "contact.png"} ,
{name : "记事本" , icon : "note.png"} ,
{name : "宠物管理" , icon : "pet.png"} ,
{name : "皮肤设置" , icon : "theme.png"} ,
{name : "游戏中心" , icon : "game.png"} ,
{name : "时 钟" , icon : "clock.png"} ,
{name : "信息搜索" , icon : "search.png"} ,
{name : "更多应用" , icon : "app.png"} ,
{name : "设 置" , icon : "settings.png"} ,
{name : "退 出" , icon : "exit.png"}
]
} ;
WebOS.load(config) ;
}) ;
var WebOS = function(){
function _quickBox(t,jq){
var quickBox = $("<div></div>")
.addClass("quick-box")
.appendTo("body") ;
var title = $("<div></div>")
.addClass("title")
.html(t)
.appendTo(quickBox)
.click(function(){
}) ;
var content = $("<div></div>")
.addClass("content")
.appendTo(quickBox) ;
var close = $("<span></span>")
.addClass("close")
.html("X")
.appendTo(title)
.click(function(){
$(this).parents(".quick-box").remove() ;
}) ;
if(jq){
jq.appendTo(content) ;
}
else{
content.html("你好世界 。。。 。。。") ;
}
var _top = parseInt(document.documentElement.clientHeight / 2 - content.height() / 2 - 80) ;
var _left = parseInt(document.documentElement.clientWidth / 2 - content.width() / 2) ;
var _css = {
top : _top + "px" ,
left : _left + "px" ,
display : "none"
} ;
quickBox.css(_css) ;
quickBox.fadeIn() ;
} ;
function load(config){
var nav = config.navigator ;
var _logotext = config.logo ;
var _div = $("<div></div>")
.addClass("webos")
.appendTo("body") ;
var _logo = $("<div></div>")
.addClass("logo")
.html(_logotext)
.appendTo(_div) ;
var _ul = $("<ul></ul>")
.appendTo(_div) ;
for(var i=0;i<nav.length;i++){
var item = nav[i] ;
var type = item.type ;
var name = item.name ;
var icon = "img/web_os_icon/" + item.icon ;
var _li = $("<li></li>")
.html(name)
.appendTo(_ul)
.css("backgroundImage","url(" + icon + ")")
.mouseover(function(){
$(this).addClass("active") ;
})
.mouseout(function(){
$(this).removeClass("active") ;
}) ;
_press(_li,item) ;
}
} ;
function _press(jq_dom,item){
jq_dom.click(function(){
_do(item,$(this)) ;
})
}
function _do(item,jq){
var type = item.type ;
if("type_personal" == type){
_quickBox(jq.text(),null) ;
}
else if("type_message" == type){
var texts = item.texts ;
var message = $("<ul></ul>")
.addClass("message-list") ;
for(var j=0;j<texts.length;j++){
var text = texts[j] ;
$("<li></li>")
.html(text)
.appendTo(message) ;
}
$("<span></span>")
.addClass("message_total")
.html("共 " + texts.length + " 条信息")
.appendTo(message) ;
_quickBox(jq.text(),message) ;
}
} ;
return {
load : load
} ;
}() ;
</script>
</head>
<body>
<!--
<div class="webos">
<ul>
<li>个人资料</li>
<li>短信息</li>
<li>联系人</li>
<li>记事本</li>
<li>宠物管理</li>
<li>皮肤设置</li>
<li>游戏中心</li>
<li>时 钟</li>
<li>信息搜索</li>
<li>更多应用</li>
<li>设 置</li>
<li>退 出</li>
</ul>
</div>
-->
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-04-12
|
| 返回顶楼 | |
|
发表时间：2011-04-13
挺漂亮的 源码开发吗？哈哈
|
| 返回顶楼 | |
|
发表时间：2011-04-13
呵呵！ div + css
|
| 返回顶楼 | |
|
发表时间：2011-04-13
楼主这是要做什么，界面不错~~
|
| 返回顶楼 | |
|
发表时间：2011-04-13
真厉害
lz 最近很活跃 出品好多好东西 |
| 返回顶楼 | |
|
发表时间：2011-04-13
呵呵，就是自己练习一下！多多交流啊大家,多给建议！
|
| 返回顶楼 | |
|
发表时间：2011-04-13
看起来像WebQQ2的风格..
|
| 返回顶楼 | |
|
发表时间：2011-04-13
呵呵！过奖了！
|
| 返回顶楼 | |
|
发表时间：2011-04-13
界面再漂亮也算不得OS吧 只是界面像吧了 支持动态安装应用么
|
| 返回顶楼 | |
