JQuery 常用积累(五)Datetimepicker和Lodop
阅读目录
- 1.Datetimepicker
- 2.Lodop
web项目中日期选择器和打印这两个功能是非常常见,将项目中使用的日期选择器和打印控件,在这里总结归纳,为方便后面使用。
1.Datetimepicker
a.官方API:
http://www.bootcss.com/p/bootstrap-datetimepicker/
里面有详细的Datetimepicker介绍,包括支持的方法、设置的选项、事件.....
b.项目集成Datetimepicker实例:
这是一款依赖与bootsrap样式的控件,所以你项目中需要引入的js如下:
<script src="/style/css/bootstrap.min.css" type="text/javascript"></script> <script src="/style/css/bootstrap-datetimepicker.min.css" type="text/javascript"></script>
前端需添加的HTMl:
<div class="controls input-append date form_date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <input id="kssj" class="vbDate" type="text" value="<%=time%>" readonly><span class="add-on"><i class="icon-th"></i></span> </div>
js初始化控件方法:
$(".form_date").datetimepicker({ format : 'yyyy-mm-dd', autoclose : true, todayBtn : true, todayHighlight : true, minView : 2, language : 'zh-CN' });
2.Lodop
a.官方API:
http://www.lodop.net/demo.html
里面有详细的odop介绍,包括支持的方法、设置的选项、事件、页面打印实例...
b.项目集成Lodop实例:
引入js:
<script src="/style/js/LodopFuncs.js" type="text/javascript"></script>
HTML给个点击事件,js 中调用的方法也比较简单:
function doPrintView() { var LODOP = getLodop(); LODOP.PRINT_INIT("购物单"); LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4'); LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW", true);LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", 100 + "%"); var top = ((0.35433070866141736 + 0.35433070866141736) * 25.4) + 'mm'; var left = 0.2362204724409449 * 25.4 + 'mm'; var right = 'RightMargin:' + 0.2362204724409449 * 25.4 + 'mm'; var bottom = 'BottomMargin:' + ((0.35433070866141736 + 0.31496062992125984) * 25.4) + 'mm';LODOP.ADD_PRINT_HTM(top, left, right, bottom, $('#printContainer').html()); LODOP.PREVIEW(); }
总结:对于一个web项目中建议将上述两个控件的初始化函数,放入公共JS中,随着项目前端页面增多,维护成本会小的很多,在需要用到的地方只需要调用公共方法就可以。
作者:Orson
出处:http://www.cnblogs.com/java-class/
如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的【推荐】
如果,您希望更容易地发现我的新博客,不妨点击一下左下角的【关注我】
如果,您对我的博客内容感兴趣,请继续关注我的后续博客,我是【Orson】
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段 声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
转载:http://www.cnblogs.com/java-class/p/4885555.html
JQuery 常用积累(五)Datetimepicker和Lodop相关推荐
- JQuery 常用积累(六)ZTree
阅读目录 1. Ztree 主要的特点 2. Web 前端 3. Web 后端 Web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树...... 历手三四个项目有大有小,采用的树前端都是 ...
- python各个解释器的用途-常用的五种Python解释器|老男孩网络Python学习课程
Python是一门解释器语言,代码想运行,必须通过解释器执行,Python存在多种解释器,分别基于不同语言开发,每个解释器有不同的特点,但都能正常运行Python代码,以下是常用的五种Python解释 ...
- jquery 常用选择器和方法以及遍历(超详细)
jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...
- html5类选择器用什么表示,HTML_揭秘常用的五类CSS选择器用法,有许多新手朋友不知道在什么 - phpStudy...
揭秘常用的五类CSS选择器用法 有许多新手朋友不知道在什么情况下运用什么样的CSS选择器,针对新手朋友,对CSS选择器作一些简单的说明,这里重点介绍一下最常用的五类CSS选择器的使用. 本文向大家描述 ...
- JQuery常用的代码片段
2019独角兽企业重金招聘Python工程师标准>>> JQuery常用的代码片段 JQuery在当前众多网站开发中都有用到.他简易的操作以及对各个浏览器的兼容性,被广大的开发者一致 ...
- jQuery常用选择器有哪些?
jQuery常用选择器有哪些? jQuery里面使用最频繁的选择器应该就是 id选择器$('#element-id') class选择器$('.class-name') 标签选择器$('element ...
- jquery常用技巧及常用方法列表
jquery常用技巧及常用方法列表 1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquer ...
- jquery常用事件——幕布
jquery常用事件: https://mubu.com/doc/yIEfCgCxy0 转载于:https://www.cnblogs.com/zwq-/p/10013673.html
- jQuery学习(五)—课堂实训题专栏
jQuery学习(五)- 课堂实训题专栏 实训一 实训二 实训3 累了累了,睡觉了 ZZZZZ 本期结束,我们下回见!
最新文章
- 发微信模版消息换行用\n
- C++知识点1——基础
- 途牛自营门市超500家 单笔订单交易额最高近300万元
- codeforces contest 1140(D~G)
- oracle 10g rac数据库,oracle 10g rac安装报错集锦
- 第9章 逻辑回归 学习笔记 下
- python include目录,python pip指定库目录和include目录
- ae2020英文改中文_AE2020 菜单中英文翻译对照表(小白必备AE菜单字典)
- linux ftp下载geo,GEO数据下载及处理详细过程
- javascript-cropper插件翻译笔记
- Python 3程序开发指南 (第二版) 中文PDF下载 Programming in Python 3, 2rd Ed - Python - 大家论坛 -...
- 【大学生软件测试基础】薪资管理制度 - 因果图 - 测试用例
- Polar码的C语言实现之比特反序重排篇
- 情感分析-英文电影评论
- 如何用切片工具做html网页,ps中的切片工具怎么用,怎么将html文本添加到切片...
- 2022美亚杯电子数据取证大赛-个人赛
- python解决洛谷小写字母转化为大写字母
- 情以何堪的伤感QQ日志分享:一句话,了断一切
- 最简单的基于FFMPEG+SDL的音频播放器 ver2 (采用SDL2.0)
- 除了加班、掉头发,程序员还在承受些什么?