在widgetoneIDE环境下使用HTML5和jQueryMobile控件编写UI界面-九宫格

最新推荐文章于 2024-04-17 00:32:56 发布

Cheris2014

最新推荐文章于 2024-04-17 00:32:56 发布

阅读量792

点赞数

分类专栏： HTML5 文章标签： html5

HTML5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

一下代码为在widgetoneIDE环境下使用 HTML5 和jQueryMobile控件编写UI界面-九宫格界面，界面布局代码如下：

<!DOCTYPE html>
<html
class="ui-mobile landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-apple.css">
<link rel="stylesheet" href="css/ui-discuss.css">
<script src="js/zy_anim.js">
</script>
<script src="js/zy_control.js">
</script>
<script>
function window_open(url, winId)
{
var flag = 0x0; //0x0 标准不加密; 0x1 对话框 ; 0x2 加密;
uexWindow.open(winId, '0', url, '', '', '', flag);
}
</script>
<style>
.dis_btn_icon {
width: 18px;
height: 18px;
display: block;
}
.dis_btn_icon_af {
background-image: url(./images/photo.png);
background-color: none;
background-repeat: no-repeat;
-webkit-background-size: contain;
}
</style>
</head>
<body class="ui-mobile-viewport">
<div data-role="header"
class="ui-header ui-bar-iphone ui-header-fixed ui-bar-glass"style="">
<h3 class="ui-title" tabindex="0" role="heading" aria-level="1">
主页</h3>
<div class="ui-btn ui-btn-limit ui-btn-right"
style="width: 3em; height: 1.4em" οnclick="uexWindow.open()">
<div class="ui-btn-iphone-l"style="height: 2.0em">
<div class="ui-btn-iphone-r"style="height: 2.0em">
<div class="ui-btn-iphone-c"style="height:2.0em">
<span class="ui-btn-inner ui-btn-icon-notext"
style="height: 1em; width: 1.3em;padding-top:0.5em"> <span
class="dis_btn_icon dis_btn_icon_af">
</div>
</div>
</div>
</div>
</div>
<div id="page_3" class="ui-page ui-body-c ui-page-active dis-body-bg"style="">
<div class="ui-content ui-body-b ui-fixed-top ui-fixed-bottom dis-body-bg"
style=" padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<div class="ui-navbar "
style=" background: #E3E3E3";padding-bottom: 0px；height:40px">
<div class="ui-grid-a">
<div class="ui-block-a"style="width: 75%;padding-top:0.28em;padding-bottom:0.28em">
<div
class="ui-input-search ui-shadow-inset ui-corner-all ui-btn-shadow ui-icon-searchfield ui-body-d"
style="width: 90%;height:1.67em;">
<input placeholder="搜帖子" type="text" name="search-22"
id="search-22" value="" class="ui-input-text ui-body-null" /> <select
name="search" selectedIndex="0"
style="position: absolute; left: 0; top: 0; width: 2em; height: 100%; opacity: 0;"
id="search" οnchange="zy_slectmenu(this.id)">
<option value="item1">搜帖子</option>
<option value="item2">搜用户</option>
<option value="item3">搜日志</option>
<option value="item4">搜文章</option>
<option value="item5">搜相册</option>
</select>
</div>
</div>
<div class="ui-block-b"style="width: 25%;height:1.67em;">
<div class="ui-btn ui-btn-limit ui-btn-right"style="margin: 0em 0px;height:1.67em"οnclick="window_open('search/search-rz.html', 'search');">
<div class="ui-btn ui-btn-limit ui-btn-right"
style="margin: 0em 0em;padding-top:0.33em;padding-right:0.33em">
<div class="ui-btn-iphone-l" style="height:1.67em">
<div class="ui-btn-iphone-r" style="height:1.67em;">
<div class="ui-btn-iphone-c" style="height:1.67em;">
<span class="ui-btn-inner " style="height:1.67em;bottom: 0.5em"> <span class="ui-btn-text ui-small">搜索</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui-grid-auto">
<div class="ui-block-auto">
<div href="" data-role="button"
οnclick="uexWindow.open('forum_index', '0', 'forum/forum_index.html', '1', '', '', 0);"
class="ui-btn ui-btn-thumb ui-btn-corner-all ui-btn-f"
tabindex="0">
<span class="ui-thumb"
style="background-image: url(images/main/主页icon-论坛.png); bottom: 3.125em"></span>
<span class="ui-btn-inner ui-btn-corner-all"
style="padding-bottom: 0px; padding-top: 4.75em"> <span
class="ui-btn-text" style="font-size: .84em;"> 论坛 </span> </span>
</div>
</div>
<div class="ui-block-auto">
<div href="" data-role="button"
οnclick="uexWindow.open('friend_nearby', '0', 'friend/friend_nearby.html', '1', '', '', 0);"
class="ui-btn ui-btn-thumb ui-btn-corner-all ui-btn-f"
tabindex="0">
<span class="ui-thumb"
style="background-image: url(images/main/主页icon-附近的朋友.png); bottom: 3.125em"></span>
<span class="ui-btn-inner ui-btn-corner-all"
style="padding-bottom: 0px; padding-top: 4.75em;padding-left:0px;padding-right:0px"> <span
class="ui-btn-text" style="font-size: .84em;">附近的朋友</span> </span>
</div>
</div>
<div class="ui-block-auto" >
<div href="" data-role="button"
οnclick="uexWindow.open('portal', '0', 'portal/portal_index.html', '1', '', '', 0);"
class="ui-btn ui-btn-thumb ui-btn-corner-all ui-btn-f"
tabindex="0">
<span class="ui-thumb"
style="background-image: url(images/main/主页icon-门户.png); bottom: 3.125em"></span>
<span class="ui-btn-inner ui-btn-corner-all"
style="padding-bottom: 0px; padding-top: 4.75em"> <span
class="ui-btn-text" style="font-size: .84em;"> 门户 </span> </span>
</div>
</div>
<div class="ui-block-auto">
<div href="" data-role="button"
οnclick="uexWindow.open('friend', '0', 'friend/friend.html', '1', '', '', 0);"
class="ui-btn ui-btn-thumb ui-btn-corner-all ui-btn-f"
tabindex="0">
<span class="ui-thumb"
style="background-image: url(images/main/主页icon-好友.png); bottom: 3.125em"></span>
<span class="ui-btn-inner ui-btn-corner-all"
style="padding-bottom: 0px; padding-top: 4.75em"> <span
class="ui-btn-text" style="font-size: .84em;"> 好友 </span> </span>
</div>
</div>
<div class="ui-block-auto">
<div href="" data-role="button"
οnclick="uexWindow.open('message', '0', 'message/message_index.html', '1', '', '', 0);"
class="ui-btn ui-btn-thumb ui-btn-corner-all ui-btn-f"
tabindex="0">
<span class="ui-thumb"
style="background-image: url(images/main/主页icon-消息.png); bottom: 3.125em"></span>
<span class="ui-btn-inner ui-btn-corner-all"
style="padding-bottom: 0px; padding-top: 4.75em"> <span
class="ui-btn-text" style="font-size: .84em;"> 消息 </span> </span>
</div>
</div>
<div class="ui-block-auto">
<div href="" data-role="button"
οnclick="uexWindow.open('album', '0', 'album/album.html', '1', '', '', 0);"
class="ui-btn ui-btn-thumb ui-btn-corner-all ui-btn-f"
tabindex="0">
<span class="ui-thumb"
style="background-image: url(images/main/主页icon-相册.png); bottom: 3.125em"></span>
<span class="ui-btn-inner ui-btn-corner-all"
style="padding-bottom: 0px; padding-top: 4.75em"> <span
class="ui-btn-text" style="font-size: .84em;"> 相册 </span> </span>
</div>
</div>
<div class="ui-block-auto">
<div href="" data-role="button"
οnclick="uexWindow.open('blog', '0', 'blog/blog.html', '1', '', '', 0);"
class="ui-btn ui-btn-thumb ui-btn-corner-all ui-btn-f"
tabindex="0">
<span class="ui-thumb"
style="background-image: url(images/main/主页icon-日志.png); bottom: 3.125em"></span>
<span class="ui-btn-inner ui-btn-corner-all"
style="padding-bottom: 0px; padding-top: 4.75em"> <span
class="ui-btn-text" style="font-size: .84em;"> 日志 </span> </span>
</div>
</div>
<div class="ui-block-auto">
<div href="" data-role="button"
οnclick="uexWindow.open('record', '0', 'record/record.html', '1', '', '', 0);"
class="ui-btn ui-btn-thumb ui-btn-corner-all ui-btn-f"
tabindex="0" style="padding-bottom: 0px">
<span class="ui-thumb"
style="background-image: url(images/main/主页icon-记录.png); bottom: 3.125em"></span>
<span class="ui-btn-inner ui-btn-corner-all"
style="padding-bottom: 0px; padding-top: 4.75em"> <span
class="ui-btn-text" style="font-size: .84em;"> 记录 </span> </span>
</div>
</div>
<div class="ui-block-auto">
<div href="" data-role="button"
οnclick="uexWindow.open('more', '0', 'more/more.html', '1', '', '', 0);"
class="ui-btn ui-btn-thumb ui-btn-corner-all ui-btn-f" tabindex="0">
<span class="ui-thumb" style="background-image: url(images/main/主页icon-更多.png); bottom: 3.125em"></span>
<span class="ui-btn-inner ui-btn-corner-all" style="padding-bottom: 0px; padding-top: 4.75em"> <span
class="ui-btn-text" style="font-size: .84em;"> 更多 </span> </span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

复制代码

界面效果如图：

Cheris2014

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在widgetoneIDE环境下使用HTML5和jQueryMobile控件编写UI界面-九宫格

一下代码为在widgetoneIDE环境下使用HTML5和jQueryMobile控件编写UI界面-九宫格界面，界面布局代码如下： class="ui-mobile landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
复制链接

扫一扫