如何根据条件显示包含唯一项目符号的无序列表
How to display a unordered list with unique bullets based on condition?
我正在从sql服务器生成一个列表,根据新旧记录对其进行过滤,并将它们显示在网页上各自的类别中。我想显示新旧记录的唯一列表项目符号。我目前得到的是每个类别中每条记录的混搭。列表项的图标来自一些使用glyphicons的twitter引导css。新记录还具有悬停时显示的弹出框。列表生成代码
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
?>
而且,我有这些脚本标签:
<script type="text/javascript" src="assets/js/bootstrap-popover.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(this).popover(options);
});
</script>
有什么想法或其他方法可以做这个解决方案吗?
- 不要忘记 bootstrap-tooltip.js,这是弹出窗口所必需的。
- 仅将
data-content
属性添加到新<li>
。 - 弹出框的选择器应该用于
<li>
s,如果不初始化它,则删除参数options
。 - 我会像引导程序描述中一样将图标移动到
<i>
中。 - 我添加了一些样式规则。
最终的 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>
另请参阅此示例。
相关文章:
- 在slitify中制作二级项目符号的动画
- 设置单击项目符号导航后不起作用的间隔
- 为图像滑块jquery添加项目符号功能
- 在生成的标题列表中隐藏项目符号
- 在HTML5画布中为学校项目构建一个表情符号
- 如何查看项目符号I'我在画布上拍摄
- 更改js中的li项目符号颜色
- 使用功能更改文本并包含项目符号图像
- 未显示 Jssor 项目符号导航器
- 需要在 JavaScript 中调用一个方法,当在 SharePoint 日历中单击更多项目旁边的三角形符号时
- 为什么项目符号图显示十进制数,而我们的范围为1
- 如何根据条件显示包含唯一项目符号的无序列表
- 项目符号导航中的 JSSOR 滑块错误
- 如何从可拖动元素中删除项目符号
- 如何在项目符号列表中插入背景(图片)元素,其 URL 写入相邻的项目符号列表中
- 如何使图像滑块的项目符号在活动时看起来不同
- 如何让我在我的画廊中针对 setInterval 单击项目符号
- amCharts:动态更改项目符号颜色
- 从 JSON 数据创建 HTML 项目符号列表时出现问题
- D3.js项目符号图 - 如何以 precentage(n%) 而不是仅以值 (n) 输出范围/x 轴值