Is there a CSS library which mimics the iPhone grouped UITableView?_问答_开发者

Is there a CSS library which mimics the iPhone grouped UITableView?

开发者 https://www.devze.com 2023-01-03 02:32 出处：网络

Is there a CSS library which mimics the iPhone grouped UITableView? I want to build a nice looking table which looks exactly like the grouped UITableView. As there are multiple text styles within the

Is there a CSS library which mimics the iPhone grouped UITableView?

I want to build a nice looking table which looks exactly like the grouped UITableView. As there are multiple text styles within the each line of text, and I don't need any interactivity except scroll开发者_开发知识库ing, it seems it would be easier to build with HTML and display it in a UIWebView. Is there a css library which matches this need?

Closest I found was this: http://code.google.com/p/iphone-universal/ .

However, with very basic CSS knowledge, maybe paired with basic Photoshop (or other editor) skills you should be able to make something that looks pretty much like the iPhone UI. It's fairly simple.

If you're willing to use jQuery instead of CSS, jqTouch is a neat way to get iPhone look-and-feel on a webpage:

http://jqtouch.com/

maybe a bit late but if anyone comes here after you can do this:

body
                {
                    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAABCAIAAABhfAhTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRDgxQTgwM0NDQ0IxMUUyQTZBQUIwNzJBQjVBQzMxQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRDgxQTgwNENDQ0IxMUUyQTZBQUIwNzJBQjVBQzMxQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFEODFBODAxQ0NDQjExRTJBNkFBQjA3MkFCNUFDMzFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjFEODFBODAyQ0NDQjExRTJBNkFBQjA3MkFCNUFDMzFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+aF4v3QAAABZJREFUeNpiPHr6MgNuwM7BBmcDBBgAYwsCesD5i4oAAAAASUVORK5CYII=);
                }

<!DOCTYPE html>
<!-- UITableView HTML5 .. http://jqtouch.com/ minimal code (your own backend) -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<style>

body {
  background: #f7f4f0;
}

h1, h1 a, h1 a:hover {
  text-indent: 9px;
  font-size: 18px;
  color: #FFFFFF;
  padding-top: 18px;
  text-decoration: none;
}

div#jqt ul li {
  background: #f7f4f0;
  color: #754719;
  margin-top:30px;
  list-style-position: outside;
  list-style-type: none;
  font-size: 15px;
  border-bottom: 1px solid #00308f;
}

div#jqt .toolbar {
  background: #00308f;
  border: 0;
  border-bottom: 1px solid #000;
  margin-top: -20px;
}

div#jqt .toolbar .btn2 {
  -webkit-border-radius: 5px;
  -webkit-border-image: none;
  display: block;
  background: rgba(40, 29, 25, .4) none !important;
  padding: 6px;
  border: 1px solid #372823;
  float: left;
  color: #FFFFFF;
  -webkit-box-shadow: rgba(255,255,255, .4) 0 1px 0;
  text-decoration: none;
  position: absolute;
  top: 5px;
  right: 18px;
  font-size: 18px;
  display: inline;
}

</style>
</head>
<body>
	
<div id="jqt">
    <div id="home">
        <div class="toolbar">
            <a href="#" ><h1>Back</h1></a>
            <a href="#" class="btn2 slideup">&nbsp; &#10010; &nbsp;</a>
            <a href="/" class="btn2 slideup" style="margin-right:54px;">Edit</a>
        </div><!-- .toolbar -->
        <ul>
            <li>Cell 1</li>
            <li>Cell 2</li>
            <li>Cell 3</li>
        </ul>
    </div><!-- #home -->
</div><!-- #jqt -->

</body>
</html>