CSS侧边栏,ng-click定义选中事件_html/css_WEB-ITnose
程序员文章站
2022-05-20 11:55:09
...
本篇小随笔,记录下侧边栏的写法和ng-click点击选中事件。因为这个工程不让引用jQuery。所以ng-click选中事件用了一个比较笨的方法实现的。
下面是HTML页面
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码
css部分引入了angular里面的bootstrap,它和bootstrap官网里面的还是有点区别的,可以直接去angularjs官网下载。
还有就是自己写的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的事件了,您如果按照上面的运行,发现点击事件没有了~~~
设计
我在标签的class中增加了{{clickStyle2}} 和 ng-click="click2()"这两项。
同时我再app.js做了一些声明,具体如下
var myApp = angular.module("myApp", ['ui.router']);myApp.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/Home"); $stateProvider .state("Home", { url: "/Home", templateUrl: "Home.html" });});//USE CLICKSTYLE SIDERBAR CLICKmyApp.controller("myindexController",function($scope){ $scope.clickStyle1 = "active"; $scope.click1 = function(){ $scope.clickStyle2 = $scope.clickStyle3 = $scope.clickStyle4= $scope.clickStyle5 = ""; $scope.clickStyle1 = "active"; } $scope.click2 = function(){ $scope.clickStyle1 = $scope.clickStyle3 = $scope.clickStyle4= $scope.clickStyle5 = ""; $scope.clickStyle2 = "active"; } $scope.click3 = function(){ $scope.clickStyle2 = $scope.clickStyle1 = $scope.clickStyle4= $scope.clickStyle5 = ""; $scope.clickStyle3 = "active"; } $scope.click4 = function(){ $scope.clickStyle2 = $scope.clickStyle3 = $scope.clickStyle1= $scope.clickStyle5 = ""; $scope.clickStyle4 = "active"; } $scope.click5 = function(){ $scope.clickStyle2 = $scope.clickStyle3 = $scope.clickStyle4= $scope.clickStyle1 = ""; $scope.clickStyle5 = "active"; }});
js上面部分主要是用于嵌套路由的,大家可以不管。我这边放出来主要是因为我的click事件中有个声明myApp。
嵌套路由这快等我写出来了,在和大家一起分享。
推荐阅读
-
固定右侧边栏滚动特效_html/css_WEB-ITnose
-
想实现一个像csdn论坛的侧边栏显示和隐藏效果遇到困难_html/css_WEB-ITnose
-
纯CSS兑现侧边栏/分栏高度自动相等_html/css_WEB-ITnose
-
求助HTML高手radio如何响应失去选中事件_html/css_WEB-ITnose
-
unity游戏开发之服务器与客户端或页面流转之自定义交互事件_html/css_WEB-ITnose
-
CSS侧边栏,ng-click定义选中事件_html/css_WEB-ITnose
-
如何实现双击选中文本背景色自定义效果_html/css_WEB-ITnose
-
求助HTML高手radio如何响应失去选中事件_html/css_WEB-ITnose
-
CSDN的隐藏侧边栏功能是怎么实现的?_html/css_WEB-ITnose
-
CSDN的隐藏侧边栏功能是怎么实现的?_html/css_WEB-ITnose