如何使用jQuery Mobile创建两列网格和两列布局
jQuery Mobile提供了基于CSS的列,是响应性的。网格的宽度为100%,网格没有背景色、边框和填充。
网格中包含元素,这些元素可以使用ui-block-a或ui-block-b或ui-block-c或ui-block-d类使其并排浮动。网格中的列是等宽的。在2列网格中,两个网格的宽度将各为50%。对于样式设计,我们可以使用ui-bar类。
CDN Links:
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css” />
<script src=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js”></script>
步骤:
- 将上述CDN链接添加到HTML页面。
- 在正文中,创建一个类别为ui-grid-a的div元素。
- 在div元素中,创建两个div元素,第一个div的类别为ui-block-a,第二个div的类别为ui-block-b。
- 设置主体的线高为0。
示例 1:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
<style>
body {
line-height: 0 !important;
}
</style>
</head>
<body>
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="height:50px">
<p>Column 1</p>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b" style="height:50px">
<p>Column 2</p>
</div>
</div>
</div>
</body>
</html>
输出:
例子2:下面的代码演示了提交和取消按钮,它们是互联网世界中非常常见的按钮。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
<style>
fieldset {
border: 0;
}
.submit {
background-color: rgb(38, 134, 158);
}
.cancel {
background-color: rgb(233, 155, 10);
}
</style>
</head>
<body>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<a class="ui-btn cancel">CANCEL</a>
</div>
<div class="ui-block-b">
<a class="ui-btn submit">SUBMIT</a>
</div>
</fieldset>
</body>
</html>
输出: