近期工作中使用到的插件总结
表格插件 ng-table
功能:
表格:支持分页、查找、排序等 地址.
使用:
1.安装
bower install ng-table
2.引入
在首页中引入ng-table脚本文件
<script src="bower_components/ng-table/dist/ng-table.min.js"></script>
3.在需要使用的模块中引入 ngTable
在module 中引入ngTable模块,在chontroller中引入NgTableParams
var module = angular.module('myStore', ['ui.router', 'ngTable']).controller('WxPages', ['$scope', '$http', 'NgTableParams', '$mdDialog',function($scope, $http, NgTableParams, $mdDialog)
4.初始化
在chontroller中初始化NgTable,表格中的数据必须通过getData参数来获取,在函数中通过$defer返回值,(官方还提供了data参数,但是实际中可能因为使用中无效)
params参数提供了分页查询所需的page(当前页数)、count(每页显示数量)参数
$scope.tableParams = new NgTableParams({page: 1, // show first pagecount: 10 // count per page}, {total: data.length,getData: function($defer, params) {var newDate = data.slice((params.page() - 1) * params.count(), params.page() * params.count());$defer.resolve(newDate);}});
5.页面使用
在标签内添加 ng-table="tableParams"绑定参数,标题通过title传递,需注意添加两层引号
<table class="table table-hover " ng-table="tableParams"><tr ng-repeat="item in $data track by item.id" align="center"><td title="'#'">{{item.id}}</td><td title="'操作'"><a href="#wxPageEdit/{{item.id}}">编辑</a><a href="" ng-click="showConfirm($event,item.id)">删除</a></td><td title="'标题'">{{item.title}}</td><td title="'浏览量'">{{item.pv}}</td><td title="'创建时间'">{{item.createDate}}</td></tr></table>
富文本编辑器 百度的ueditor
基本
功能强大的富文本编辑器,配置和扩展功能强大 地址.
使用
1.下载
地址.
文档.
2.引入
在页面中引入
<!-- 配置文件 -->
<script src="bower_components/ueditor/ueditor.config.js"></script>
<!-- 主文件 -->
<script src="bower_components/ueditor/ueditor.all.min.js"></script>
<!-- 样式渲染 -->
<script src="bower_components/ueditor/ueditor.parse.min.js"></script>
3.使用
在代码中通过 UE.getEditor('container',params)形式生成编辑器,container为放置ueditor的元素的id,toolbars:[]数组为要显示的菜单项,详细列表见ueditor.config.js文件
通过监听contentChange事件,监测文本内容的变化,赋值给预览界面
var ue = UE.getEditor('edit-rich-text', {toolbars: [['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', , 'strikethrough', 'removeformat', 'autotypeset', 'blockquote', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|','paragraph', 'fontfamily', 'fontsize', '|','justifyleft', 'justifycenter', 'justifyright', '|','link', '|',// 'insertimage','emotion', 'insertvideo', 'background', '|','horizontal', '|','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',]],elementPathEnabled: false,});var htm = null;ue.on('contentChange', function() {html = ue.getContent();if (html.length > 0) {$('.custom-richtext').html(html);}});
4.扩展
富文本编辑器中的图片上传功能,配置较为复杂,界面也不符合需求,所以借助插件提供的扩展功能,增加一个图标,调用自己写的图片管理界面,实现图片的上传和选择
UE.registerUI('button', function(editor, uiName) {//注册按钮执行时的command命令,使用命令默认就会带有回退操作editor.registerCommand(uiName, {execCommand: function() {alert('execCommand:' + uiName)}});//创建一个buttonvar btn = new UE.ui.Button({//按钮的名字name: "上传图片",//提示title: "上传图片",//添加额外样式,指定icon图标,这默认使用原本图片上传的iconcssRules: 'background-position: -380px 0;',//点击时执行的命令onclick: function() {//这里可以不用执行命令,做你自己的操作也可//调用我自己写的模态框$scope.showImgUpload();}});//因为你是添加button,所以需要返回这个buttonreturn btn;});<!-- angular material的对话框 -->
$scope.showImgUpload = function(ev) {var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;$mdDialog.show({controller: ImgDialogController,templateUrl: 'store/common/imageUploadDialog.html',parent: angular.element(document.body),targetEvent: ev,clickOutsideToClose: true,fullscreen: useFullScreen})// 可以获取dialog传递回来的值,此处为图片路径.then(function(result) {var imgSrc = 'images/' + result;ue.setContent('<img src="' + imgSrc + '" alt="" style="width:100%">', true);}, function() {// 用户点击取消的});$scope.$watch(function() {return $mdMedia('xs') || $mdMedia('sm');}, function(wantsFullScreen) {$scope.customFullscreen = (wantsFullScreen === true);});};
angular-material
参考官方文档.
主要使用了 datepicker和dialog
图片上传,在线预览裁剪头像ng-img-crop
参考官方文档.
<!-- 页面 --><div class="img-pro lflex" ng-show="avaImg"><div class="flex1"><div class="image-box-before lflex flex-c "><img-crop image="avaImg" area-type="{square}" result-image="myCroppedImage"></img-crop></div><input type="file" name="" id="avaImg" fileread="avaImg" style="visibility: hidden"></div><div class="flex1"><h4 class="title">头像预览</h4><div class="img-preview"><img ng-src="{{myCroppedImage}}" /></div><div class="img-preview circle"><img ng-src="{{myCroppedImage}}" /></div></div>
</div><!-- 脚本 -->
// 保存用户上传图标的base64编码 原图
$scope.avaImg = "";
// 处理后的图片
$scope.myCroppedImage = '';
转载于:https://www.cnblogs.com/NearTheSea/p/5500631.html
近期工作中使用到的插件总结相关推荐
- python在日常工作处理中的应用-近期工作中应用Python的一些经验总结
本文由Markdown语法编辑器编辑完成. 1. Python 在来新公司前,也间断地接触过Python编程,比如医学影像处理的图像库VTK就已经有Python的实现:Paraview也可以开启Pyt ...
- 近期工作中遇到的问题及其解决办法
最近的一个月的工作相对于三月份刚进公司时候的我改善了许多.最大的感观就是在bug的处理上. 之前的工作中多多少少也会遇到许多bug,虽然也能解决,但是大多数是的解决方法都是同学.朋友等相关人提供帮助, ...
- 关于近期工作中遇到的各种问题总结
关于echarts画地图遇到的问题 1. 散点图画不上 其实很简单,我的业务需要做切换,我需要在点击按钮后在地图上画上所需的数据,在配置项中即需要两个series,一个是map的series ,另一个 ...
- 近期工作中Oracle常用的sql
1.oracle中的exists 和not exists 用法详解 exists表示()内子查询语句返回结果不为空说明where条件成立就会执行主sql语句,如果为空就表示where条件不成立,sql ...
- 产品工作中的沟通注意事项小总结
一个项目.一个产品得确定"一个"接口人 不然会出现这样的情况: [场景重现] 实施B:XX问题解决了吗~ 产品汪:诶?这个问题的解决办法已经和实施A说了啊,还发了邮件 实施B:我不 ...
- uploadify html5 java_工作中碰到uploadify插件两个版本:HTML5和Flash
最近工作中碰到上传文件插件使用问题:在工作中碰到app嵌套html5页面中使用上传文件问题,因为之前使用的是stream上传插件(http://www.twinkling.cn/),但是该插件跨域传输 ...
- IntelliJ IDEA在java开发工作中的使用总结(实用插件,快捷键,debug等)
今天总结一下idea在工作中一些实用的小技巧(记得多少学多少,之后会继续更新补充).如果您有一些小技巧,插件,也欢迎在评论区中分享出来~ 1.插件篇 1.Alibaba java coding Gui ...
- 近期找工作中,发一下我的个人简历
我从2002年元月开始参加工作,至今已有5年工作经历.在这5年时间里,我从事过网页编辑.书稿编写.课件/软件程序代码编写(C#. ActionScript.JavaScript.FCS.Java).课 ...
- 工作中使用到的单词(软件开发)_2022-02-26_备份
■原文 工作中使用到的单词(软件开发)_sun0322-CSDN博客 目录 ■常用链接 ■2020/03/15 (最初整理 242个单词) 2020 6/28 整理 2020 6/29 整理 20 ...
最新文章
- Facebook开源最大规模并行语料,45亿语料,覆盖576种语言对
- 第19/24周 锁升级(Lock Escalations)
- 青龙羊毛——悦读(教程)
- OpenCV图像处理——iOS端人脸检测
- cassandra可视化工具_程序员绘图工具——PlantUML
- 博客搬家到github啦
- Android开发检测网络是否连接
- linux内存管理方式,简要概括Linux内存管理的方式
- 使用Data studio开发opengauss数据库
- 使用gulp安装智图压缩图片
- 高频故障-office背景有水印的解决方案
- 关于面向对象的真面目
- 工商管理企业经营战略知识归纳
- java高级实训输出张三李四_假设某数据库表中有一个姓名字段,查找姓名为张三和李四的条件是...
- 阿里云弹性云桌面安装失败问题解决记录(.net framework 4.6.2 or later:Error Code: 12029)
- SpringBoot word文件转pdf
- 搭建个人网站没有公网IP地址可以吗?
- 查看家庭组组计算机用户名密码,win7系统查看家庭组密码的办法介绍
- 零知识证明:一个略微严肃的科普
- JS读取Excel时日期格式错误
热门文章
- Check Dependency 2(一个检查.net部署文件完整性及一致性工具)
- html向后端发送请求
- cannot find or load main class org.apache.flink.api.scala.FlinkShell
- hbase shell显示时间与系统时间不同
- 误操作导致系统只剩下lo
- 所谓的inference场景与深度学习终端加速器以及边缘计算和雾计算
- 详解 KDTree(转)
- spark RDD 的map与flatmap区别说明(转)
- 《机器学习》 周志华学习笔记第八章 集成学习(课后习题)python实现
- 有用的网址集合, IT杂谈