关于图片使用绝对路径还是相对路径的几点思考

发表于1年前(Jun 18, 2016 4:54:56 PM)  阅读 667  评论 0

分类: 开发运维环境

标签: 绝对路径 相对路径 图片地址 lazyload 云存储

这篇文章主要是说说这么多年,笔者自架博客服务器以来,对于图片存储路径的一些经验。

首先,拥有专门的文件服务器,这是最好的解决方案。大型门户,大型电商毫无疑问都是使用的自己的文件服务器,这些服务器不仅拥有高效的读写性能,往往都合cnd想结合,对于图片很多的网站能提供很好的用户体验。另外很多都能对多媒体进行实时在线处理。举个例子,京东云提供的图片在线处理,以下是其官方说明文档的一部分:

图片处理是京东云提供的包括缩略图、水印、图片旋转等功能在内图片处理服务。用户可以在将图片上传到京东云存储后直接通过Rest API或SDK完成图片的缩放

......

Bootstrap同时弹出多个模态窗口Modal时的几个问题

发表于1年前(Jun 15, 2016 10:47:49 AM)  阅读 6040  评论 2

分类: WEB前端 JS

标签: modal 相互遮盖 偏移 溢出

Bootstrap中的modal组件是使用率比较高的组件之一,可modal本身对于同一个页面同时弹出多个modal的情况支持并不是很好,有些人说应该尽量避免同时弹出多个modal,应该关闭之前的modal再弹出新的modal,确实,弹出多个modal会导致页面看起来比较混乱,但不管出于什么原因,我们经常还是会碰到需要弹出多个modal的情况。

首先,碰到的第一个问题就是如果弹出多个modal,会出现相互遮盖的情况。bootstrap对modal的弹层固定了一个z-index,笔者使用的bootstrap版本为3.3.4,z-index值为1050,不同版本可能会不同。使用相同的z-index就会导致后面的弹出层无法遮住前面的弹出层的情况。这时,我们想,如果之后每个弹出层的z-index都能递增就好了,于是,笔者增加了如下代码:

        $(document).on('hidden.bs.modal','.modal',function(e){
     
......

当form表单中只有一个input元素时回车将自动提交表单

发表于1年前(Jun 6, 2016 9:42:18 AM)  阅读 546  评论 0

分类: WEB前端

标签: 表单回车提交 onsubmit

先说结论,当页面表单内只有一个input元素时,按回车,将会自动提交表单,进行页面跳转,这是浏览器的默认行为。有两个例外,一是如果这个表单还包含一个不可见的input元素,即display=none,浏览器认为这是两个元素,不会自动提交(据说火狐不这么认为,未验证)。二是,如果表单还包含type=hidden的元素,浏览器并不认为是一个“有效”元素,将依然执行只有一个元素自动提交原则。

好了,现在如果要控制这种行为,通过上面的描述可以看出,我们可以加一个style=none的元素来实现。如果是采用ajax提交的方法话,还可以通过给form添加onsubmit="return false;"来阻止默认提交行为。

下面是网友总结的form表单回车提交的几种情况,请读者自行验证:

1. 如果表单里有一个type=”submit”的按钮,回车键生效。
2. 如果表单里只有一个type=”text”的input,不管按钮是什么

......

jquery.zclip生成的flash坐标位置不对

发表于1年前(Jun 5, 2016 9:05:02 AM)  阅读 593  评论 0

分类: WEB前端 JS

标签: jquery.zclip ZeroClipboard 操作剪贴板 offsetParent scrollTop scrollLeft

出于安全的考虑,浏览器对代码操作的内容有所限制,像不允许不经用户同意就下载文件到本地,不经用户确定就进入全屏状态,不经用户点击就操作剪贴板等。今天要讲的内容就是关于操作剪贴板的。

由于各浏览器对操作剪贴板的支持不一致,有的甚至不支持操作剪贴板,如果要写一个通用的操作剪贴板的代码,几乎是不可能的事。现在比较完善的一个方案是采用flash的方式,ZeroClipboard就是用来解决跨浏览器操作剪贴板兼容的问题,jquery.zclip是其jquery插件的封装。

ZeroClipboard的原理就是将要点击的按钮,替换成一个透明的flash,然后用户点击按钮的时候,实际上是点击的flash文件,这时flash操作剪贴板完成复制功能,因为flash的跨浏览器特性,使得这一功能也不受浏览器类型影响。当然,前提是要装有flash插件。

示例代码:

            $(".op-link").zclip({
......

Mac OSX系统文件大小采用1000进制

发表于1年前(Jun 3, 2016 9:25:39 PM)  阅读 605  评论 0

分类: 开发运维环境

标签: 1000进制 文件大小统计

最近做一个web的文件管理系统,在显示文件大小时,将byte换算成kb或者mb时,发现跟操作系统显示的大小有误差。经过认真对比发现,原来笔者使用的Macbook,OSX系统文件大小采用的是1000进制换算,而我们常用的windows使用的是1024进制进行换算。网上查了不少资料,发现其实硬盘和U盘是存在1000进制的情况的,不过还是未能找到关于这方面的权威资料,在此先记录一下。

给Bootstrap Tags Input加上只读功能

发表于1年前(May 25, 2016 2:29:54 PM)  阅读 3451  评论 1

分类: WEB前端 JS

标签: Bootstrap-Tags-Input 标签云

Bootstrap Tags Input是一款针对Bootstrap UI的jquery插件,主要提供标签输入功能。它可以让用户很方便的创建标签,移除标签等:

但是Bootstrap Tags Input所有的标签都自带移除按钮,如果我们想隐藏移除按钮,像很多博客都有的标签云功能,即让标签变成不可编辑,会发现Bootstrap Tags Input并不支持。当然,用Bootstrap自带的label控件很容易就实现这样的功能,笔者这里主要介绍如果修改Bootstrap Tags Input插件,让它支持只读功能。

先贴出修改后的代码bootstrap-tagsinput.js:

/**
 * 2016-05-25
 *  增加allowEdit配置项,设置是否可以编辑tag
 *  增加allowClick配置项,添加了tagClick class,增加了手型鼠标样式
 *  增加onTagClick函数,设置点击
......

RMI CacheException - problem starting listener for RMICachePeer

发表于1年前(May 24, 2016 2:18:04 PM)  阅读 683  评论 0

分类: Java 异常

标签: Ehcache CacheException RMICachePeer

在tomcat下使用ehcache时,启动报错。在ehcache官网Tomcat Issues and Best Practices一文中有明确说:

I get the following error:

net.sf.ehcache.CacheException: Problem starting listener for RMICachePeer ... java.rmi.UnmarshalException: error unmarshalling arguments; nested exception is: java.net.MalformedURLException: no protocol: Files/Apache.

What is going on? This issue occurs to any RMI listener

......

使用requirejs引入jqGrid插件

发表于1年前(May 23, 2016 9:30:01 AM)  阅读 823  评论 0

分类: WEB前端 JS

标签: requirejs jqGrid grid.base jqGrid.locale

jqGrid是一个显示表格的jquery插件,除了能分页显示数据,还能进行过滤,行内编辑等等,几乎一切你能想到的功能,功能多,必然就庞大,其实我们经常使用的只是其中几个功能而已,所以很多人可能更愿意使用更加简单地表格控件。

requirejs是现今比较流行的js模块化的工具,可是使js按需加载,合并等一系列优化操作。

jqGrid官方文档中并没有说明如何使用requirejs引入jqGrid,只说明了传统的引入方式,简单来说就是下面几步:

<link rel="stylesheet" type="text/css" media="screen" href="path_to_ui_css_file/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="t
......

hql,jpql变量占位符不能出现.

发表于1年前(May 19, 2016 8:27:55 AM)  阅读 622  评论 0

分类: Java

标签: hql jpql 占位符 Unresolved property path unexpected AST node

hql,即hibernate query language,使用面向对象的方式书写sql语句,jpql,Java Persistence Query Language,主要用于jpa,而hibernate是jpa的一种实现,所以其实hql也可以说是jpql的一种实现,两者用法基本一致。

为了避免直接拼写hql,造成sql注入,我们写hql的时候,必须使用绑定变量的方式进行赋值。hql绑定变量有两种方式,一种是使用"?"占位符,根据"?"出现的顺序,提供参数,一种是使用变量名称的方式绑定。两种方式的示例:

String hql = "from Person p where p.id=?";
String hql = "from Person p where p.id=:id";

两种方式各有优势,都有相应地使用场景。

笔者要在这提的是变量绑定时需要注意的一个问题,如果变量里面包含".",将会

......

Freemarker使用java枚举值、静态属性和调用静态方法

发表于1年前(May 17, 2016 3:14:52 PM)  阅读 5537  评论 0

分类: Java

标签: BeansWrapper TemplateHashModel StaticModels StaticModel 枚举值 enum 静态属性 静态方法

1、前言:

在java后台,规范的编码方式将会使我们使用很多静态属性,枚举值等,还有许多工具类,都会定义很多静态方法方便调用,这些都方便了我们java后台的开发,但如果结合到前台freemarker模板该如何使用呢,freemarker模板并不能像jsp那样import标签导入java类。

首先我们来看这么一个枚举值类OptionValueType:

 

package com.cangzhitao.common.enums;

/**
 * Created by cangzhitao on 16/5/13.
 */
public enum OptionValueType {

    TEXT(0), TEXTAREA(1), RADIO(2), SELECT(3), CHECKBOX(4), THEME(10), NAVMENU(11);

    private int code;

    priv
......