ブートストラップページングスタイルを使用する yii について-PHPチュートリアル-php.cn

ブートストラップページングスタイルを使用する yii について

不言

リリース： 2023-04-01 13:22:02

オリジナル

1760 人が閲覧しました

この記事では、主にブートストラップページングスタイルを使用した Yii の例を紹介します。その内容は非常に優れているので、参考として共有します。

Bootstrap は、Twitter によって開始されたフロントエンド開発用のオープンソースツールキットです。これは Twitter デザイナーの Mark Otto と Jacob Thornton によって開発された CSS/HTML フレームワークです。 Bootstrap は、動的 CSS 言語 Less で記述されたエレガントな HTML および CSS 仕様を提供します。 Bootstrap は発売以来非常に人気があり、NASA の MSNBC (Microsoft National Broadcasting Company) Breaking News など、GitHub 上の人気のオープンソースプロジェクトとなっています。

この記事では、Yii がブートストラップページングスタイルをどのように使用するかを紹介します。興味のある学生は参照してください。

yii にはページングクラスとページスタイルが付属していますが、yii ブートストラップで開発されたプロジェクトの場合、yii を変更せずにブートストラップページングスタイルを使用するにはどうすればよいですか?

この記事では、yii ページングでブートストラップスタイルを適用する場合、主に yii CLinkPager サンプルコードの htmlOptions と selectedPageCssClass の 2 つの属性を使用する非常に簡単な方法を紹介します。

public function actionIndex()
{
 $cid = intval($_GET[&#39;cid&#39;]);

 $criteria = new CDbCriteria();
 $criteria->addCondition("t.status=1");
 $criteria->addCondition("cid=&#39;$cid&#39;");
 $criteria->order="t.time desc";
 $count = Article::model()->count($criteria);
 $pager = new CPagination($count);
 $pager->pageSize=20;
 $pager->applyLimit($criteria);
 $lists = Article::model()->findAll($criteria);

 $this->render(&#39;index&#39;,array(&#39;lists&#39;=>$lists,"pager"=>$pager));
}

ログイン後にコピー

上記のコードは yii ページングを実装し、$pager ページングオブジェクトをビューに渡します。もう一度ビューコードを見てみましょう

ビューコード

<nav>
<?php
$this->widget(&#39;CLinkPager&#39;,array(
    &#39;header&#39;=>&#39;&#39;,
    &#39;firstPageLabel&#39; => &#39;首页&#39;,
    &#39;lastPageLabel&#39; => &#39;末页&#39;,
    &#39;prevPageLabel&#39; => &#39;上一页&#39;,
    &#39;nextPageLabel&#39; => &#39;下一页&#39;,
    &#39;pages&#39; => $pager,
    &#39;maxButtonCount&#39;=>8,
    &#39;cssFile&#39;=>false,
    &#39;htmlOptions&#39; =>array("class"=>"pagination"),
    &#39;selectedPageCssClass&#39;=>"active"
 )
 );
?>
</nav>

ログイン後にコピー

上記のビューコードでは、次の点に注意する必要があります。

1. in

2 では、yii によって生成されたページング p のクラス名を指定します。ここでは、selectedPageCssClass を使用します。オプションは現在選択されているページを指定します。ここではブートストラップの active

4 を使用します。また、cssFile を false に設定し、ページング CSS スタイルファイルをロードしないようにする必要があります。以下に示すように、ブートストラップ公式 Web サイトによって提供されるページングコードにリンクします。

最終的なレンダリング