jQuery插件小集

1

自定义滚动条插件 – jscoll

滚动条样式至今没有一个统一的标准,各家浏览器有各家的做法,IE高版本索性放弃了给用户自定义滚动条的机会

如果非要做,最好的解决办法莫过于用JS模拟一个滚动条出来,而且兼容性还好.

传送门

史上最迷你的LightBox插件

12

刚码完,各种BUG,仅供研究

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<style>
#lightbox{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999!important;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: rgba(35,35,35,.7);
    *background:rgb(35,35,35);
    *filter: alpha(opacity=95);
}
/*ie6 fix*/
* html { background:url(*) fixed; }
* html body { margin:0; height:100%; }
* html #lightbox { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
#lightbox p{
    background: url("img/loader.gif") no-repeat center center;
    height: 100%;
    width: 100%;
    line-height: 1px;
    text-align: center;
    display: inline-block;
}
#lightbox img{
    display: inline-block;
    max-width: 100%;
    margin: 0;
    margin-top: 3%;
    padding: 0;
    width: auto;
    height: auto;
    vertical-align: middle;
    border: 15px solid #fff;
}
</style>
<script>
(function($) {
$.fn.lightBox = function() {
    $(this).bind("click",function () {
        var url = $(this).attr("href");
        if ($("#lightbox").length == 0) {
            $("body").append('<div id="lightbox"><p><img src="'+url+'" /></p></div>');
            $("#lightbox").click(function (event) {
                $(this).fadeOut().remove();
                event.stopPropagation();
            })
        }
        return false;
    });
};
})(jQuery);
 
$(document).ready(function() {
    $('a[href$="jpg"],a[href$="png"],a[href$="gif"]').lightBox();
});
</script>

分享一个很不错的PHP分页类

0

page

首先声明这个类不是朽木原创的,没找到出处,今天用到了 顺手码了一段CSS样式.

使用方法很简单只需要指定总页数就可以了.

$pager = new page($total);
echo $pager->pageShow();

数据库操作

//总条数
$total = $db->getVar("SELECT count(*) FROM `{$table}`");
//初始化分页类 
$pager = new page($total);
$sql = "SELECT * FROM `{$table}` ORDER BY `id` DESC LIMIT ".$pager->__get('limit');
$list = $db->getData($sql);
//分页HTML
$pagehtml = $pager->pageShow();

BlueHost跨站/跨目录权限解决方案

0

BlueHost面板点击PHP Config

切换到PHP 5.4 (Single php.ini),点击Save保存,这时候FTP连接到BlueHost,在/public_html目录下会出现一个php.ini文件,邮件把所有权限的勾全部取消掉,下载这个文件,首先找到如下对应的参数修改一下

Chrome拓展开发:鼠标拖拽/触摸屏拖放手势事件

1

Chrome里默认情况下,在页面中拖动链接或者文本鼠标会是个禁止点击的样式,并且会丢失mouseup事件,所以我们不得不使用HTML5的拖放事件 – drag and drop.

然后在拖动开始事件dragstart中记录鼠标位置,放置事件drop中判断鼠标是往哪个方向移动过了,下面这段代码可以识别出左上,左下,右上,右下. 还可以在这个基础上判断一下鼠标移动距离来添加更多的动作.