分类 前端 下的文章

一个简单的基于JFinal的分页扩展

前几天试了试JFinal框架,感觉用起来还是蛮方便的,作者似乎借鉴了一些Ruby的思想,并且集成了一些常用的功能类,比如分页,图片验证码等等。个人觉得,与其说这是一个java的开发框架,不如说它是一个简洁的建站解决方案。

JFinal的分页类感觉还是很方便的,官方的示例很简单也很清楚,直接调Model的paginate方法,传入当前页码,每页显示数量等参数就行了。不过,这只是分页查询数据库得到的数据列表,除此以外,还得把分页的信息展示在前端页面上,这时候就得自己实现一些分页逻辑以及相应的前端了。

所以,我就简单封装了一个分页类,把一些分页需要的页面元素计算封装进去,配合freemarker,实现了一个功能还算完全的分页扩展,其实也不能叫扩展,只是一种简单的实现方式,贴出来给大家参考参考。

- 阅读剩余部分 -

通过iframe实现简单的ajax表单提交

之前做项目都是用现成的jquery插件实现表单的校验以及ajax提交,但是今天有个简单的头像图片ajax上传,以及一个很简单的表单提交,实在不想引入一个插件了,本着代码量最小,最简单的原则,照着豆瓣照抄了一个,基于jquery搞的一个简单的基于iframe的ajax表单提交功能,也就是通过隐藏的iframe上传图片的功能。原理很简单,就是在iframe里处理提交的表单的返回值,并且做出相应处理,从而实现页面无刷新的ajax上传图片效果。

简单代码如下:

- 阅读剩余部分 -

改版啦

typecho0.9出来也有段时间了,新版确实看起来舒服多了,尤其是后台的Markdown编辑器很讨人喜欢,于是决定升级一下,顺带把主题改了改

总体还以简洁大方,清新淡雅为主嘛(画外音:“喂喂,你那半吊子水平也设计不出啥复杂炫丽的样式好伐……”)

改版前:

before.png

改版后:

after.png

于是,博客升级后,新主题顺利上线……其实还有不少小细节要完善,比如代码高亮,不过没关系,慢慢来嘛,先写个博客纪念一下……

(画外音:“喂喂,你难道不是博客好久不更新了,直到自己都看不下去了才写这个满篇都是废话的博客的么”;博主:“……”)

fullCalendar改造计划之带农历节气节假日的万年历

计划着要做一款万年历,作为自己小项目的便民功能。

作为一枚“资深”业余前端,本想着网上应该有现成的代码可用,一顿猛搜之后,倒是确实搜到几个,但是一看功能,跟我想的不一样;再看代码,顿时没有了修改的欲望。顿时大失所望,理想太丰满,现实太骨感啊!!

无意搜到一款jquery的日程安排日历插件,fullCalendar(官网:http://arshaw.com/fullcalendar/),

发现嗯,功能貌似挺强大的嘛,再一看,最近更新日期是2013年9月,于是决定了,改造!

下载下来的最新版是fullcalendar-1.6.4,原生的样子是这样的:
请输入图片描述

但是我想象的应该是这个样子的:
请输入图片描述

貌似差别有点大……没关系,一步步来改造。

一、当然是汉化啦



- 阅读剩余部分 -

目测百度统计出问题了

许久不写博客,今天发个博客吐槽下百度统计

今天发现自己的几个站全被挂了弹窗,弹窗第一次的时候会设置cookies,一天只弹一次……粗心一点估计就直接无视了……

顿时大惊,以为服务器被黑了,辛辛苦苦排查一通,没发现啥可疑问题(“就你那半吊子水平,有问题你也发现不了好哇!!”)

看网页源代码,也没发现奇怪的js注入代码,但是在chrome里明明看到看到载入了很多弹窗推广的js啊!!这些js从哪儿跑出来的??

于是以为是插件问题,把插件都停掉,还是不行……

都搞了一通,最后,只有把目光放到唯一剩下的百度统计js代码上了,抱着试试看的心态,把统计代码删了……

于是,弹窗没了……

清空cookies,刷新,没弹窗……

目测是百度统计出问题了……

google一下,发现近期百度统计确实出问题了,据官方人士在百度统计贴吧上说明,是被人劫持了!!!

顿时囧了,这么大的互联网公司,就这么被人劫持了……尼玛洗洗睡吧~

简单的IE css hacker备忘

IE的css hacker是个老问题了,网上方案也很多,从IE6-9都有专门的识别标识,不过主要用的还是这么几个(*星号,_下划线,!important标志),简单记录下,等有时候概念模糊了随时复习……

表中 √ 表示浏览器能识别; × 表示浏览器不能识别;

  IE6 IE7 Chrome,FF
* ×
_ × ×
!important ×


此外,写css的时候把高级浏览器的样式写在前面,IE的写后面(“后来居上”原则)
比如说

width:100px;*width:80px;_width:60px;

Question2Answer(q2a)主题模板制作入门

<p>

前段时间做了个简单的Q2A主题,有朋友留言说比较乱,于是决定写一篇简单的说明供大家参考,想到哪儿写到哪儿,稍微有点乱。

</p>
<p>

主题快捷传送门:<a href="//feifei.im/archives/60">https://feifei.im/archives/60</a> 

</p>
<p>

一.“qa-theme.php”为重写的主题文件,它继承自“qa-include\qa-theme-base.php”

</p>

<?php
class qa_html_theme extends qa_html_theme_base
{

<p>

二.页面html声明

</p>

function doctype()
   {
        $this->output('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";>');
   }

<p>



- 阅读剩余部分 -

css中的visibility与display

visibility 属性规定元素是否可见
常用的值是 visible 和 hidden

描述
visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit 规定应该从父元素继承 visibility 属性的值。

display 属性规定元素应该生成的框的类型
常用的值是 block、none 和 inline

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。

在隐藏元素上的区别
虽然 Visibility 和 Display 属性都可以隐藏一个元素,但它们之间的不同点在于
visibility: hidden 在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间,
display: none 则表现得像把元素从页面里删除了,在页面上看不出该元素还存在着。

jquery获取高度宽度的一些小记录

<script type="text/javascript">
$(document).ready(function()         
  {
    alert($("#divid").height()); //id为divid的区域高度
    alert($("#divid").width()); //id为divid的区域宽度
    alert($(window).height()); //浏览器当前窗口可视区域高度
    alert($(document).height()); //浏览器当前窗口文档的高度
    alert($(document.body).height());//浏览器当前窗口文档body的高度
    alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
  }
)
</script>

Question2Answer(q2a)主题--“坚果盒”

前段时间心血来潮想建个问答站,找找开源程序找到了Q2A,无奈界面实在不喜欢,于是自己DIY了一个模板,好吧,其实我是抄的人人小站的风格~~。

这个风格做的不咋滴,部分细节地方没考虑的多细致,比较粗糙,因为做了一大半后突然没兴致了,而且有的功能跟我需要的不大一样,就搁置了~~~想要的下载了凑活着用吧,或者自己改改用也行

##点这个下载→:Jianguo.zip 

解压后文件夹放到qa-theme下面,再在后台启用下就OK

界面截图:

- 阅读剩余部分 -

热评文章

最新文章

最近回复

归档

其它