X-WebOS的界面雏形

ziyuewang

浏览: 40107 次
性别:
来自: 济南

最近访客更多访客>>

gaokuitai

kingwell.leng

幽幽潭中叶

honlin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-04 ( 21)
更多存档...

博客分类：

JavaScript练习

WebOS jQuery JavaScript CSS 游戏

<!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>

查看图片附件

分享到：

自己写的TagBOX---随机变换的字体颜色和大 ... | 右键小菜单练习---JavaScript

2011-04-10 20:00
浏览 1202
评论(15)
论坛回复 / 浏览 (15 / 8121)
分类:Web前端
查看更多

15 楼 ziyuewang 2011-04-13

谢谢！(*^__^*) 嘻嘻……

14 楼 dsjt 2011-04-13

很漂亮，只是色调有点偏暗！

13 楼 ziyuewang 2011-04-13

谢谢大家的建议

12 楼小格的冬天 2011-04-13

界面是挺漂亮，功能有待加强

11 楼 denger 2011-04-13

.mouseover(function(){
                                $(this).addClass("active") ;
                            })
                            .mouseout(function(){
                                $(this).removeClass("active") ;
                            }) ;

使用下面的写法要简洁很多。
.hover(function(){
                                $(this).addClass("active") ;
                            },function(){
                                $(this).removeClass("active") ;
                            });

10 楼 ziyuewang 2011-04-13

刚开始写O(∩_∩)O~

9 楼 zuiyanwangyue 2011-04-13

界面再漂亮也算不得OS吧只是界面像吧了支持动态安装应用么

8 楼 ziyuewang 2011-04-13

呵呵！过奖了！

7 楼 witcheryne 2011-04-13

看起来像WebQQ2的风格..

6 楼 ziyuewang 2011-04-13

呵呵，就是自己练习一下！多多交流啊大家,多给建议！

5 楼 pywepe 2011-04-13

真厉害
lz 最近很活跃出品好多好东西

4 楼 qinglintan 2011-04-13

楼主这是要做什么，界面不错~~

3 楼 ziyuewang 2011-04-13

呵呵！ div + css

2 楼 fxz_2008 2011-04-13

挺漂亮的源码开发吗？哈哈

1 楼 ziyuewang 2011-04-12

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论