如何根据条件显示带有唯一项目符号的无序列表？

Question

I am generating a list from sql server, filtering it based on new and old records and displaying them in their respective categories on the webpage. 我正在从sql server生成一个列表，根据新旧记录对其进行过滤，并在网页上的相应类别中显示它们。 I want to show unique list bullets for old and new records. 我想显示新旧记录的唯一列表项目符号。 What Im currently getting is a mashup of every record from each category on top of eachother. 我目前正在获得的是将每个类别中的每个记录彼此融合在一起。 The icons for the list items are coming from some twitter bootstrap css, using glyphicons. 列表项的图标使用glyphicons来自某些twitter引导CSS。 The new records also have a popover that displays on hover. 新记录还具有一个悬停时显示的弹出窗口。 The list-generating code 列表生成代码

foreach($resultArray as $category_name => $items)
{
    echo '<h3>'. $category_name.'</h3><ul>';
foreach($items as $itemid => $itemDetails)
    {
    ?>
    <li class="<?php if(strtotime($itemDetails['posted']) > (strtotime('-30   days'))){echo 'icon-star';} else {echo '';} ?>" data-content="This item is new on Corkboard. Check it out!" data-original-title="New Item">
    <?php 
echo '<a href="newGenView.php?id='.$itemid.'">'.$itemDetails['name'].' - '.$itemDetails['description'].'</a>';
    ?>
    </li>
<?php
}//foreach
echo '</ul>';
}//foreach
?>

And, I have these script tags: 而且，我有以下脚本标签：

<script type="text/javascript" src="assets/js/bootstrap-popover.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
    $(this).popover(options);
});
</script>

Any ideas or other ways to do this solution? 有什么想法或其他方式可以实现此解决方案吗？

Answer 1

Don't forget the bootstrap-tooltip.js , which is required for popover . 不要忘记bootstrap-tooltip.js ，这是popover 必需的。
Only add the data-content attributes to the new <li> . 仅将data-content属性添加到新的 <li> 。
The selector for popover should be for the <li> s and remove parameter options , if you don't initialize it. 如果未初始化，则用于popover的选择器应用于<li>并删除参数options 。
I would move the icons into <i> like in the bootstrap description . 我将像引导描述中那样将图标移动到<i>中。
I've added some styling rules. 我添加了一些样式规则。

The final html could be: 最终的html可能是：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <style type='text/css'>
        ul { list-style: none inside none; margin: 0; }
        li { display: inline; }
    </style>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
    <script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
    <script type='text/javascript'>
        $(document).ready(function() { $('li').popover(); });
    </script>
</head>
<body>
    <h3>category_name</h3>
    <ul>
        <li>
            <i class="icon-minus"></i>
            <a href="newGenView.php?id=1">name1 - description1</a><br />
        </li>
        <li data-content="This item is new on Corkboard. Check it out!" data-original-title="New Item">
            <i class="icon-star"></i>
            <a href="newGenView.php?id=2">name2 - description2</a><br />
        </li>
    </ul>
</body>
</html>

Also see this example . 另请参见此示例。

如何根据条件显示带有唯一项目符号的无序列表？

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-06-08 13:21:12

如何根据条件显示带有唯一项目符号的无序列表？

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-06-08 13:21:12

解决方案1
1 已采纳 2012-06-08 13:21:12