Dangbao's Blog

分类日志: 前端代码

jqueryMobile开发手机网页

现在移动互联网的应用越来越广泛,花了一点时间研究了jqueryMobile,体验到其简单强大的功能,记录一下。

关于jqueryMobile

我们知道jquery最令人称道的就是其兼容性极佳,jqueryMobile同样继承了这个优点。目前可以支持包括安卓、黑莓、iOS和Windows Mobile等其他平台,并利用内置的组件,轻松创建统一的、跨移动设备的界面。同样,在桌面PC浏览器也可以访问哦。查看jqueryMobile Demo页面

配置jqueryMobile

jqueryMobile是基于html5+css3+jquery来构建页面的,我们也可以理解为它是1个jquery插件。当然为了向下兼容,只是用了html5的DTD声明,在页面中还是用xhtml的元素来呈现。默认皮肤的背景和按钮也是用CSS3来写的,我们阅读css文件时候可以看到为了兼容各浏览器的代码。所以,目前看到的情况是IE9以下的浏览器测试,背景渐变显示为纯色背景,边框圆角显示为直角等等。
引入框架:

官方现在已经发布了1.1.0候选版,并称在几周后发布最终版。 全文

简单jquery弹出层

做一个专题页需求是点击后弹出一个层,然后再层上点关闭。弄个插件觉得不太值得,就写了个简易弹出层,原理是通过点击事件显示和隐藏新层,新层通过绝对定位显示在水平居中位置。
点击查看简单jquery弹出层

悬浮表格头部jq插件fixedtableheader

fixedtableheader在线演示

强大的jquery缩略图相册插件ad-gallery

ad-gallery在线演示
语法:
$(function(){
$('.ad-gallery').adGallery({
thumb_opacity:'0.8',
effect:'none'
});
});
全文

jquery简易选项卡

简洁,易用。
想要鼠标滑过切换内容的话,把click改成hover就可以了。
点击查看效果:jquery简易选项卡DEMO

juqery竖向折叠菜单

不多说了,常见的效果。
slideUp和slideDown在有边框的情况下导致内容块短暂抽搐,可以改为hide无特效隐藏内容。
点击查看效果:juqery竖向折叠菜单DEMO

斜角菜单3例

近日遇到一个斜角菜单,以前还真没接触过,于是花点时间捣鼓了下,写了3个DEMO。
固定宽的斜角菜单
宽度自适应的斜角菜单
便签式宽度自适应斜角菜单

智能固定条(高度自适应版)

业内好像还没专门词语来描述此效果,我且命名为智能固定条。此效果我们曾在腾讯财经侧栏、淘宝搜索页、新浪微博头部见过。也有同仁分享过此代码,但是大多都是固定宽高度的内容条,如果我们应用在高度不固定的内容块中,很可能内容底部不能出现在浏览器的可视范围内。

今天分享的是智能定位条的高度可自适应的,如果智能定位块的内容高于屏幕的高度,定位状态就从fixed变为static,即不再浮动。

直接祭出地址:DEMO地址

utf-8+bom编码导致的空白字符

无意间在群里看到有人说查看他的WP首页源文件多了3个空白字符,忽然想到我的博客在查看DOM的时候也多了几个空白,但是在源文件里却查找不到,甚至删除了空格也无济于事。看看讨论,都说编码uft-8+bom可能在浏览器中出问题,所以我查看了一下我的模板文件,果然发现footer.php是此编码。于是果断另存为无bom的utf-8文件,上传,果然没有了。哈哈。

另外,还有人提到过在ftp工具上修改固定编码,如果你所有的网站都用统一编码,可以设置一下。flashfxp可以针对不同站点设置不同编码,找到菜单“站点-站点管理器-选项-字符编码”,即可指定。

全文

jquery解决ie6下弹出层无法遮罩selcet

老问题了,IE6的BUG,selcet的z-index值比较大,div得z-index设多大都无法盖住它,而iframe的默认z-index值比selcet大,刚好能遮住selcet,而div设置z-index值就能盖住iframe。selcet < iframe < div

由于需求是一个头部弹出层,涉及的项目多,所以在每个页面都加个iframe不现实。所以找到了bgiframe这个jquery插件,原理是在弹出层后面插入一个iframe来遮盖住selcet。网上有人反映这个插件在IE9下会报错,那么就需要加个IE6的条件判断。


bgiframe官方插件地址

标签:

android bom border css工具 css布局 display DW ff firefox fireworks fixed flashget html ie6 IETester IE开发人员工具 iis jQuery jq插件 win7 WordPress 分类信息 挂马 无线路由器