【angularjs】使用angular搭建PC端项目,开关按钮
方法一(使用指令)
1.指令(angular-ui-switch.js)
angular.module('uiSwitch', []) app.directive('switch', function(){
return {
restrict: 'AE'
, replace: true
, transclude: true
, template: function(element, attrs) {
var html = '';
html += '<span';
html += ' class="switch' + (attrs.class ? ' ' + attrs.class : '') + '"';
html += attrs.ngModel ? ' ng-click="' + attrs.disabled + ' ? ' + attrs.ngModel + ' : ' + attrs.ngModel + '=!' + attrs.ngModel + (attrs.ngChange ? '; ' + attrs.ngChange + '()"' : '"') : '';
html += ' ng-class="{ checked:' + attrs.ngModel + ', disabled:' + attrs.disabled + ' }"';
html += '>';
html += '<small></small>';
html += '<input type="checkbox"';
html += attrs.id ? ' id="' + attrs.id + '"' : '';
html += attrs.name ? ' name="' + attrs.name + '"' : '';
html += attrs.ngModel ? ' ng-model="' + attrs.ngModel + '"' : '';
html += ' style="display:none" />';
html += '<span class="switch-text">'; /*adding new container for switch text*/
html += attrs.on ? '<span class="on">'+attrs.on+'</span>' : ''; /*switch text on value set by user in directive html markup*/
html += attrs.off ? '<span class="off">'+attrs.off + '</span>' : ' '; /*switch text off value set by user in directive html markup*/
html += '</span>';
return html;
}
}
});
2.css(angular-ui-switch.css)
.switch {
background: #fff;
border: 1px solid #dfdfdf;
position: relative;
display: inline-block;
box-sizing: content-box;
overflow: visible;
width: 52px;
height: 30px;
padding: 0px;
margin: 0px;
border-radius: 20px;
cursor: pointer;
box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
transition: 0.3s ease-out all;
-webkit-transition: 0.3s ease-out all;
top: -1px;
}
/*adding a wide width for larger switch text*/
.switch.wide {
width:80px;
}
.switch small {
background: #fff;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
width: 30px;
height: 30px;
position: absolute;
top: 0px;
left: 0px;
transition: 0.3s ease-out all;
-webkit-transition: 0.3s ease-out all;
}
.switch.checked {
background: rgb(100, 189, 99);
border-color: rgb(100, 189, 99);
}
.switch.checked small {
left: 22px;
}
/*wider switch text moves small further to the right*/
.switch.wide.checked small {
left:52px;
}
/*styles for switch-text*/
.switch .switch-text {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
} .switch .off {
display:block;
position: absolute;
right: 10%;
top: 25%;
z-index: 0;
color:#A9A9A9;
} .switch .on {
display:none;
z-index: 0;
color:#fff;
position: absolute;
top: 25%;
left: 9%;
} .switch.checked .off {
display:none;
} .switch.checked .on {
display:block; } .switch.disabled {
opacity: .50;
cursor: not-allowed;
}
3.在apps.js中注入
var app = angular.module('app', ['uiSwitch'])
4.index.html引入相关文件
<link rel="stylesheet" href="../angular-ui-switch.css"/>
<script src="../angular.min.js"></script>
<script src="../angular-ui-switch.js"></script>
<script src="app.js"></script>
5.应用:
<form data-ng-controller="MyController">
<switch name="enabled" ng-model="enabled" ng-change="changeCallback"></switch>
<p>
<button ng-click="enabled=!enabled">Toggle</button>
</p>
<p>
Enabled: {{ enabled }}
</p>
<!--Examples of using switch text on/off values. These values can be anything. First example shows basic on/off--> <switch name="onOff" ng-model="onOff" on="on" off="off"></switch>
<p>
<button ng-click="onOff=!onOff">Toggle</button>
</p>
<p>
Enabled: {{ onOff }}
</p> <!--Examples of using the nonsense words lorem/ipsum in the on/off values. Because these are wider, added an option "wide" class to allow for more room-->
<switch name="yesNo" ng-model="yesNo" on="lorem" off="ipsum" class="wide"></switch>
<p>
<button ng-click="onOff=!onOff">Toggle</button>
</p>
<p>
Enabled: {{ yesNo }}
</p> <!--Examples of using switch disabled states. -->
<switch name="disabled" ng-model="disabled" disabled="true"></switch>
<p>
<button ng-click="disabled=!disabled">Toggle</button>
</p>
<p>
Enabled: {{ disabled }}
</p>
</form>
6.附录---目录结构
7.效果图:
方法二(使用背景图和ng-class)
html
<span class="wrap" ng-class="{true:'on',false:'off'}[isOn]" ng-click="isOn = !isOn"></span>
css
.wrap{
display:block;
width:68px;
height:40px;
background-size: cover;
cursor: pointer;
}
.on{
background:url(../on.png) no-repeat; }
.off{
background:url(../off.png) no-repeat;
}
js
$scope.isOn = false;//默认为关闭状态
效果:
相关链接:
个人资料:
作者:smile.轉角
QQ:493177502
【angularjs】使用angular搭建PC端项目,开关按钮的更多相关文章
- 【angularjs】使用ionic+angular 搭建移动端项目,字体适配
解析: 首先,rem是以html为基准. 一般的,各大主流浏览器的font-size默认值为16px,此时1rem=16px.如果此时将rem与px进行换算很麻烦,比如0.75rem=12px. 为了 ...
- 曾经的pc端项目踩到的一些兼容性的坑及其解决方案
曾经公司pc端项目一直最低兼容到IE7,要求和chrome下浏览效果一致,真心坑坏了我和另外一个小伙伴(另一个小伙伴以前也没处理过兼容问题).不过还好,在这里真心感谢鑫哥博客的详解,从底层原理讲到了具 ...
- react 开发 PC 端项目(一)项目环境搭建 及 处理 IE8 兼容问题
步骤一:项目环境搭建 首先,你不应该使用 React v15 或更高版本.使用仍然支持 IE8 的 React v0.14 即可. 技术选型: 1.react@0.14 2.bootstrap3 3. ...
- vue脚手架搭建移动端项目--flexible.js
通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...
- pc端的企业网站(IT修真院test9)详解一个响应式完成的pc端项目
一:引入bootstrap框架 昨天一直被bootstrap栅格系统折磨. why? 我本来想一边码字,一边学习栅格布局的.but不成功.这时我头脑已经昏了. 下午,我查看了bootstrap的官网, ...
- vue PC端项目中解决userinfo问题
在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...
- angular --- s3core移动端项目(三)
angular.module('myApp') .directive('listActive',functon(){ return { restrict:'A', scope:{ listActive ...
- angular --- s3core移动端项目(二)
product-ctrl.js angular.modules('myApp').controller('ProductCtrl',['$scope','$rootScope','$timeout', ...
- angular --- s3core移动端项目
因为记性不好的原因做个草稿笔记 app.js中 var myApp = angular.module('myApp',['ui.router','oc.lazyLoad','ngAnimate','数 ...
随机推荐
- spring-framework-中文文档三:依赖注入DI
5.4依赖性 典型的企业应用程序不包含单个对象(或Spring的说法中的bean).即使最简单的应用程序也有几个对象一起工作来展示最终用户将其视为一个连贯的应用程序.下一节将介绍如何从定义许多独立的b ...
- Go开发之路 -- strings以及strconv的使用
strings的使用 HasPrefix 语法: strings.HasPrefix(s, prefix string) bool // 判断字符串s是否以prefix开头 // 判断一个url是否以 ...
- 【读书笔记】iOS-使用钥匙串保护数据
一,将应用从设备上删除时,并不会删除其钥匙串项,这使得调试工作困难得多.模拟器有一个Reset Contents and Settings选项,可用于将钥匙串项移除.因此,强烈建议在模拟器上确定Key ...
- 【代码笔记】Web-JavaScript-Javascript对象
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- python3 os模块
os模块就是对操作系统进行操作,这个模块提供了一种使用操作系统相关功能的可移植方式.1.系统信息 posix.uname_result(sysname='Linux', nodename='liang ...
- LNMP的配置与优化
一.LNMP的下载 LNMP一键安装包是一个用Linux Shell编写的可以为CentOS/RadHat/Fedora.Debian/Ubuntu/Raspbian/Deepin VPS或独立主机安 ...
- ionic提示弹框
//提示框 .factory('TipsPort', function ($ionicPopup) { var TipsPort = function (tipsText, SureFunction, ...
- css的定义、用法、注释、命名规则、书写规范
什么是css: css全名是层叠样式表(Cascading Style Sheets) CSS的作用:给html标签添加"样式",样式定义了如何显示 HTML 元素 标签是可以由自 ...
- 这几天上海移动网络可以直接打开 Google Play 了
这几天上海移动网络可以直接打开 Google Play (谷歌应用商店)了. 速度还不错.基本无延迟. 想当初,为了防止国内应用市场里的木马或恶意软件,想从 Google Play 应用市场下载,折腾 ...
- 上传github文件及所出现的问题
上传github所发现的问题 准备工作 使用 git bush 输入下面的命令 git config --global user.email "you@example.com" g ...