Angularjs与weui的握手
引子
自从开通了sf的文章专栏,总想在这个专栏里写些自己的东西。不久前,微信推出了自己的一套UI,我看有很多开发者将其套用在了一些前端框架中,比如react、vue。最近自己在学习Angularjs,所以,也想把这个UI整合到这个框架,这几天试了一下,简单的套用了一个功能,现在分享给大家,分离做的不好,请高手指点。
适合读者
有一定的Angularjs基础,并且了解ngRoute、ngAnimate的人群。
包含文件
整合的时候,参照官方的演示页面,自己也做了一个演示页面,完全使用Angularjs做的,没有引用其它框架。下面先说明一下引入的文件。
使用angular.min.js 1.4.9
使用angular-route.min.js 1.4.9
使用angular-animate.min.js 1.4.9
使用weui.min.css 0.4.0
一开始想与官方的演示页面一样做一个单页面的,开发之后发现,把所有内容放到一个文件里显得杂乱,所以,使用了Angularjs的路由功能,把各个小功能独立成页面,在需要时加载进来。此处使用模板加载功能来实现。于是,导航页面代码就显示很干净,如果想要使用哪部分的功能代码,直接使用相对应的html页面及js脚本文件即可,方便、快捷。
下是导航页面的代码:
<!DOCTYPE html>
<html lang="en" ng-app="weuiapp"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>WeUI</title><link rel="stylesheet" href="./css/weui.css" />
</head>
<style type="text/css">
.home,
.view {position: absolute;width: 100%;left: 0;top: 0;
}
</style><body ng-controller="home"><div class="home" ng-if="homeShow"><div class="weui_grids"><a href="#/button" class="weui_grid js_grid" data-id="button" ng-click="showBlock('button')"><div class="weui_grid_icon"><img src="./images/icon_nav_button.png" alt=""></div><p class="weui_grid_label">Button</p></a><a href="#/cell" class="weui_grid js_grid" data-id="cell" ng-click="showBlock('cell')"><div class="weui_grid_icon"><img src="./images/icon_nav_cell.png" alt=""></div><p class="weui_grid_label">Cell</p></a><a href="#/toast" class="weui_grid js_grid" data-id="toast" ng-click="showBlock('toast')"><div class="weui_grid_icon"><img src="./images/icon_nav_toast.png" alt=""></div><p class="weui_grid_label">Toast</p></a><a href="javascript:;" class="weui_grid js_grid" data-id="dialog" ng-click="showBlock('dialog')"><div class="weui_grid_icon"><img src="./images/icon_nav_dialog.png" alt=""></div><p class="weui_grid_label">Dialog</p></a><a href="javascript:;" class="weui_grid js_grid" data-id="progress" ng-click="showBlock('progress')"><div class="weui_grid_icon"><img src="./images/icon_nav_progress.png" alt=""></div><p class="weui_grid_label">Progress</p></a><a href="#/msg" class="weui_grid js_grid" data-id="msg" ng-click="showBlock('msg')"><div class="weui_grid_icon"><img src="./images/icon_nav_msg.png" alt=""></div><p class="weui_grid_label">Msg</p></a><a href="#/article" class="weui_grid js_grid" data-id="article" ng-click="showBlock('article')"><div class="weui_grid_icon"><img src="./images/icon_nav_article.png" alt=""></div><p class="weui_grid_label">Article</p></a><a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet" ng-click="showBlock('actionsheet')"><div class="weui_grid_icon"><img src="./images/icon_nav_actionSheet.png" alt=""></div><p class="weui_grid_label">ActionSheet</p></a><a href="#/icons" class="weui_grid js_grid" data-id="icons" ng-click="showBlock('icons')"><div class="weui_grid_icon"><img src="./images/icon_nav_icons.png" alt=""></div><p class="weui_grid_label">Icons</p></a><a href="#/panel" class="weui_grid js_grid" data-id="panel" ng-click="showBlock('panel')"><div class="weui_grid_icon"><img src="./images/icon_nav_panel.png" alt=""></div><p class="weui_grid_label">Panel</p></a><a href="javascript:;" class="weui_grid js_grid" data-id="tab" ng-click="showBlock('tab')"><div class="weui_grid_icon"><img src="./images/icon_nav_tab.png" alt=""></div><p class="weui_grid_label">Tab</p></a><a href="#/searchbar" class="weui_grid js_grid" data-id="searchbar" ng-click="showBlock('searchbar')"><div class="weui_grid_icon"><img src="./images/icon_nav_search_bar.png" alt=""></div><p class="weui_grid_label">SearchBar</p></a></div></div><div class="view" ng-view ng-if="viewShow"></div><script type="text/javascript" src="./js/angular.min.js"></script><script type="text/javascript" src="./js/angular-animate.min.js"></script><script type="text/javascript" src="./js/angular-route.min.js"></script><script type="text/javascript" src="./js/toast.js"></script><script type="text/javascript" src="./js/example.js"></script>
</body></html>
以上代码大部分来自官方的首页代码,由于要使用Angularjs,所以增加了相应的属性,包括ngApp,ngController,ngClick,ngIf以及显示功能演示页面的ngView。
代码中,ngClick中使用了showBlock函数,参数是当前点击的功能字符串,这个函数的参数在使用路由功能后,没有使用,仅仅是在此函数中增加了隐藏与显示导航部分以及功能演示部分的代码,详情请查看下面的脚本代码。
angular.module('weuiapp', ['ngAnimate', 'ngRoute']).config(function($routeProvider) {$routeProvider.when('/', {controller: 'home',templateUrl: ''}).when('/button',{controller: 'button',templateUrl: 'button.html'}).when('/cell', {controller: 'cell',templateUrl: 'cell.html'}).when('/toast', {controller: 'toast',templateUrl: 'toast.html'}).when('/msg', {controller: 'msg',templateUrl: 'msg.html'}).when('/article', {controller: 'article',templateUrl: 'article.html'}).when('/icons', {controller: 'icons',templateUrl: 'icons.html'}).when('/panel', {controller: 'panel',templateUrl: 'panel.html'}).otherwise({redirectTo: '/'})}).controller('home', function($scope) {$scope.homeShow = true;$scope.viewShow = false;$scope.showBlock = function() {$scope.homeShow = false;$scope.viewShow = true;}}).controller('toast', ['$scope', '$interval', toast]).animation('.aweui-show', ['$animateCss', toastAnimate]).animation('.home', ['$animateCss', function($animateCss) {return {enter: function(element, doneFn) {return $animateCss(element, {from: { left: '100%', top: 0, opacity: 0 },to: { left: 0, top: 0, opacity: 1 },duration: .3});},leave: function(element, doneFn) {return $animateCss(element, {from: { left: 0, top: 0, opacity: 1 },to: { left: '-100%', top: 0, opacity: 0 },duration: .3});}}}]).animation('.view', ['$animateCss', function($animateCss) {return {enter: function(element, doneFn) {return $animateCss(element, {from: { left: '100%', top: 0, opacity: 0 },to: { left: 0, top: 0, opacity: 1 },duration: .3});},leave: function(element, doneFn) {return $animateCss(element, {from: { left: 0, top: 0, opacity: 1 },to: { left: '-100%', top: 0, opacity: 0 },duration: .3});}}}])
$scope.showBlock = function() {$scope.homeShow = false;$scope.viewShow = true;
}
这一段便是函数要实现的功能代码,分别控制变量homeShow以及viewShow来实现导航与功能演示两部分的显示与隐藏。
.animation('.home', ['$animateCss', function($animateCss) {return {enter: function(element, doneFn) {return $animateCss(element, {from: { left: '100%', top: 0, opacity: 0 },to: { left: 0, top: 0, opacity: 1 },duration: .3});},leave: function(element, doneFn) {return $animateCss(element, {from: { left: 0, top: 0, opacity: 1 },to: { left: '-100%', top: 0, opacity: 0 },duration: .3});}}
}])
以上是导航部分显示时的动画效果代码。导航部分初始化为绝对定位,让其在消失前先做一个向左移出显示区域,并且渐隐的动画。当查看完功能演示,回到导航时,进行动画反转。这里使用的ngAnimate的$animateCss服务,并且使用了此服务提供的进入事件enter以及移出事件leave。其它的动画功能与其相同。
$routeProvider.when('/', {controller: 'home',templateUrl: ''}).when('/button',{controller: 'button',templateUrl: 'button.html'}).when('/cell', {controller: 'cell',templateUrl: 'cell.html'}).when('/toast', {controller: 'toast',templateUrl: 'toast.html'}).when('/msg', {controller: 'msg',templateUrl: 'msg.html'}).when('/article', {controller: 'article',templateUrl: 'article.html'}).when('/icons', {controller: 'icons',templateUrl: 'icons.html'}).when('/panel', {controller: 'panel',templateUrl: 'panel.html'}).otherwise({redirectTo: '/'})
这是路由服务,对应html中的a标签href属性,所以,此程序中没有使用showBlock函数的参数,已经没有用处了,此函数只是为了增加了动态效果而创造的。
下面,再来看看功能演示部分的页面代码。
<div class="page"><div class="hd"><h1 class="page_title">Toast</h1></div><div class="bd spacing"><a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showToast()">点击弹出Toast</a><a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showLoadingToast()">点击弹出Loading Toast</a></div><!--BEGIN toast--><div id="toast" ng-if="toastHide" class="aweui-show"><div class="weui_mask_transparent"></div><div class="weui_toast"><i class="weui_icon_toast"></i><p class="weui_toast_content">已完成</p></div></div><!--end toast--><!-- loading toast --><div id="loadingToast" ng-if="loadingToastHide" class="weui_loading_toast aweui-show"><div class="weui_mask_transparent"></div><div class="weui_toast"><div class="weui_loading"><div class="weui_loading_leaf weui_loading_leaf_0"></div><div class="weui_loading_leaf weui_loading_leaf_1"></div><div class="weui_loading_leaf weui_loading_leaf_2"></div><div class="weui_loading_leaf weui_loading_leaf_3"></div><div class="weui_loading_leaf weui_loading_leaf_4"></div><div class="weui_loading_leaf weui_loading_leaf_5"></div><div class="weui_loading_leaf weui_loading_leaf_6"></div><div class="weui_loading_leaf weui_loading_leaf_7"></div><div class="weui_loading_leaf weui_loading_leaf_8"></div><div class="weui_loading_leaf weui_loading_leaf_9"></div><div class="weui_loading_leaf weui_loading_leaf_10"></div><div class="weui_loading_leaf weui_loading_leaf_11"></div></div><p class="weui_toast_content">数据加载中</p></div></div>
</div>
这就是加载等待提示功能的演示页面代码,一共两种样式,其一,显示文字;其二,有一个加载等待的动画并且有提示文字显示。
页面有两个按钮,功能就是分别呼出这两种样式,每种样式呼出后,停留3秒后自动消失。
在导航页面的js中,有一个控制器和一个动画函数调用了此功能页面脚本代码中的函数,分别是控制器函数toast()
以及动画函数toastAnimate()
。脚本文件的代码如下。
//toast控制器
function toast($scope, $interval) {$scope.toastHide = 0;$scope.loadingToastHide = 0;$scope.showToast = function() {$scope.toastHide = 1;$interval(function() {$scope.toastHide = 0;}, 3000, 1);}$scope.showLoadingToast = function() {$scope.loadingToastHide = 1;$interval(function() {$scope.loadingToastHide = 0;}, 3000, 1);}
}//显示与隐藏时的动画,使用ngAnimate中的$animateCss服务
function toastAnimate($animateCss) {return {enter: function(element, doneFn) {return $animateCss(element, {from: { opacity: 0 },to: { opacity: 1 },duration: .3});},leave: function(element, doneFn) {return $animateCss(element, {from: { opacity: 1 },to: { opacity: 0 },duration: .3});}}
}
到此,导航和一个功能演示的页面就已经实现了。由于大部分UI是静态的,没有动态,所以只需要将官方的演示照搬即可。需要增加动态代码的,现在已只做了这一个,后续还会陆续增加至完成。
代码开源地址
代码已经上传至github上,感兴趣的朋友可以点击查看,代码同时也上传到个人的服务器上,说明中有链接地址,可以直接点击查看效果。
由于项目刚刚成立,很多东西没有完善,还有很多不如意的地方,请谅解。更希望能得到您的帮助与指正。
项目地址:https://github.com/limeng0403/Angularjs-weui
Angularjs与weui的握手相关推荐
- WildFly上具有AngularJS的Java EE 7和Java WebSocket API(JSR 356)
这篇博客文章描述了用于WebSocket协议的Java API(JSR 356) (这是Java EE 7平台的四个最新JSR之一),并提供了部署在WildFly 8上并可以在OpenShift上在线 ...
- /id_xndu5otm2mdq0.html,WEUI应用之JS常用信息提示弹层的封装
weUI应用,自己用JS封装了几个常用的信息提示的弹层 测试页面的代码在后面有贴出 几个弹层如下图 HTML页面代码:weUI-test 测试 weui.min.css代码:@font-face{fo ...
- 从TCP三次握手说起——浅析TCP协议中的疑难杂症
PeterWang_bupt 贡献值:2 等級:L1 0 发布 0 评论 1 顶 发布链接发布图文 全部主题 我关注的主题 GEEKNEWS Rust Swift 全栈工程师 /home Pres ...
- TCP三次握手和四次挥手的解释
基础知识 在TCP层,有个FLAGS字段,这个字段有以下几个标识:SYN, FIN, ACK, PSH, RST, URG. 其中,对于我们日常的分析有用的就是前面的五个字段. 它们的含义是: SYN ...
- AngularJS和DataModel
通常,在AngularJS中使用JSON作为存储数据的模型.我们可能这样在controller中写model: app.controller('BookController',['$scope',fu ...
- AngularJS 杂项知识点
1.要用ngChange要同时使用ngModel,下拉选择获取当前选中值. 2.打包代替动态加载(js文件) requirejs真正的价值在于模块化,不是动态加载,angularjs本身有模块化机制, ...
- angularjs post 跨域
web api搞好了:用Ajax妥妥的:但是前端用的AngulagJS,也懒得再换为Ajax了: 但是问题来了:提示: 已拦截跨源请求:同源策略禁止读取位于 http://x.x.x.x:port/a ...
- AngularJS 指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- TCP/IP协议三次握手与四次握手流程解析
原文链接地址:http://www.2cto.com/net/201310/251896.html TCP/IP协议三次握手与四次握手流程解析 TCP/IP协议的详细信息参看<TCP/IP协议详 ...
最新文章
- 又有两所一流高校加入“不返校”阵营,非毕业年级学生,开学时间待定!
- VTK:Rendering之AmbientSpheres
- JAVA基础知识系列---进程、线程安全
- 【python】逻辑运算符总结
- 业务中台01:中台解决方案本质在解决什么问题?
- 2021抖音电商商家经营方法论白皮书
- 说说普通人挣钱的思路
- Window10环境下的Jupyter notebook安装与打开默认路径的修改
- docker安装mysql主从视频教程_docker安装mysql主从
- 给 datepicker 设定日期格式
- python ---ConfigParser
- Android 开发中eclipse 下 DDMS 视图中 sdcard 中文件导入的处理
- 项目管理(PMP)认证介绍
- C语言—— 符号函数
- c盘满了怎么办?如何快速清理内存(6个方法)
- 精准测试系列产品白皮书2020版
- doctrine2 mysql_php – Doctrine2和MySQL分区
- STM32F105双CAN双FIFO通讯心得体会
- 傲游研发中心在京成立
- 闲鱼是如何实践一套完整的埋点自动化验证方案的?