1

SQL Serverからリストを生成し、新旧のレコードに基づいてリストをフィルタリングし、Webページのそれぞれのカテゴリに表示しています。新旧のレコードに固有のリストの箇条書きを表示したいと思います。Imが現在取得しているのは、各カテゴリのすべてのレコードを相互にマッシュアップしたものです。リストアイテムのアイコンは、グリフィコンを使用して、いくつかの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>

このソリューションを実行するためのアイデアや他の方法はありますか？

4

1 に答える 1

1
  • popover に必要なbootstrap-tooltip.jsを忘れないでください。
  • 新しいdata-contentに属性のみを追加します。 <li>
  • 初期化しない場合 、ポップオーバーのセレクターは<li>s および remove パラメーター用である必要があります。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>

この例も参照してください。

于 2012-06-08T13:21:12.633 に答える