CSS サイドバー、ng-click で選択されたevent_html/css_WEB-ITnoseを定義します

この短いエッセイは、サイドバーの書き方とng-clickクリック選択イベントを記録しています。このプロジェクトでは jQuery を参照できないためです。したがって、ng-click 選択イベントは比較的愚かな方法で実装されています。

以下はHTMLページです

Press Ctrl+C to copy the code

Press Ctrl+C to copy the code

CSS部分はangularでブートストラップを導入しています ブートストラップ公式サイトとは若干異なります。 . angularjs 公式 Web サイトのダウンロードに直接アクセスできます。

自分で書いたCSSスタイルもあります。同時に angular.min.js が導入されました。このプロジェクトではネストされたルーティングも使用する必要があるため、ui-router.js が導入されています。

自分で書いた app.js もあります。私の構造に従って順番にjsをインポートするだけです。

以下はサイドバーの CSS スタイルです:

/* SIDERBAR STYLE */.siderbar{ background-color: #3b3934; border-right: 1px solid #2a251c; position: fixed; left: 0px; margin-top: 0px; height: 100%; width: 80px;}.siderbar hr{ border: 0; background-color: rgba(255,255,255,0.08); height: 1px;}.sider-btn{ width: 80px; height: 80px; padding: 10%; margin-top: 2px;}.sider-btn p{ color: rgba(255,255,255,0.5); font-size: 10px; margin-top: 6px;}/* SIDERBAR ACTIVE */.sider-btn:active,.sider-btn.active { background-color: rgba(0,0,0,0.2);!important; border-radius: 0; outline: 0; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .125); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .125);}

次の画像は実行後です:

えっと、ng-click イベントについて言及するのを忘れていました。実行すると、クリックイベントがなくなっていることがわかりました~~~

タグのクラスに {{clickStyle2}} と ng-click="click2()" を追加しました。

同時に、次のように app.js でいくつかのステートメントを作成しました

 <a href="" class="sider-btn btn btn-lg {{clickStyle2}}" ng-click="click2()" style="color: rgba(255,255,255,0.8)"> <span class="glyphicon glyphicon-plus" style="margin-top: 8px"></span> <p>设计</p> </a>

上記の js の部分は主にネストされたルーティングに使用されます。無視しても問題ありません。これをここに置いたのは、主にクリック イベントにステートメント myApp があるためです。

ネストされたルーティングは私が作成しようとしているので、あなたと共有します。