CNET CiUI IV
In addition to a javascript library and a CSS stylesheet, the CNET CiUI-Dev download, ciui-0.1.tar.gz, contains a file named index.htm which shows how to use the menu framework. The header section of index.htm configures the iPhone viewport and inserts CiUI javascript and style sheets.
***
***
Within the body of index.htm is a menu consisting of HTML list item tags and anchor tags using the go_forward class attribute.
***
Hoping to learn more about the operation of CiUI, I copied index.htm and turned it into a database driven PHP page - replacing static list tags with a PHP function call. Within the PHP function, the WordPress database gets queried for the ten latest weblog posts. These are formatted as list items and wrapped with anchor tags of the go_forward variety.
Here’s a link to the working demo page. Use iPhone’s Safari or Firefox to view the demo.
The main page is shown below. It’s just CiUI’s index.htm with static list item tags for menu options. Options 1 and 2 currently function. Option 1 displays the main page of iPhone Cafe. Option 2 displays recent iPhone Cafe posts pulled from the database.
Selecting Recent Posts on the main menu calls a PHP page using anchor tags where class=go_forward. The following SQL then runs against WordPress:
SELECT p.id AS id,
p.post_title AS post_title,
p.post_content AS post_content,
p.post_category AS post_category,
p.post_date AS post_date,
DATE_FORMAT(p.post_date, ‘%b %D %Y %I:%i%p’) as post_date_f
FROM wp_posts AS p
ORDER BY p.post_date DESC
Each row of the answer set has post_title wrapped with HTML like so:
***
$shortPostTitle = substr($post_title, 0, 30);
$title_text = <<<EOT
<li><a href=’$wproot/ipGetOnePost.php?id=$id’ class=”go_forward” title=”$post_title”>$shortPostTitle</a></li>
EOT;
print “$title_text”;
Here’s the result…..
***
