简单的jQuery片段来美化您的网站

九游会客户端——2011年5月17日星期二

这些技巧的目的是获取现有的、完全有效的代码，并对其进行少量修改. 它们都使用jQuery，不过也可以进行修改. 它们应该在DOM加载后调用，比如在内部 $(函数(){}); or $(文档).准备好了(函数() {}); 如果你喜欢.

PDF图标

(“[href =美元.pdf]”).addClass (pdf);

结合一些CSS目标 a.pdf 类似如下

a.pdf {
    padding-right: 15 px;
    背景:url (pdf-icon.gif)不再重演;
}

...or...

a.pdf:{后
    内容:url (pdf-icon.gif”);
}

这将附加一个图标，以你所有的链接结束 .PDF(定制细节指向你的图标和正确的大小等). 当然, 您可以使用任何文件扩展名/图标组合来让用户知道他们正在单击的链接类型.

外部链接

使用选择器

$ (' [href ^ = http:], [href ^ = http:]”)
.(“[href ^ = http://www.例子.com/]、[href ^ = http://www.例子.com/]”)

你可以将页面上的所有链接指向不同的域. (替换的例子.网站地址).

一旦你有了目标链接，你就可以用它们做很多有用的事情. 您可以添加一个图标，就像上面的PDF链接一样，或者让它们在一个单独的窗口中打开 .attr (“rel”, “外部”) 或者将用户引导到一个确认页面，警告他们即将离开您的站点

$ (' [href ^ = http:], [href ^ = http:]”)
 .(“[href ^ = http://www.例子.com/]、[href ^ = http://www.例子.com/]”)
 .每个(函数(指数(元素){
    $(元素).attr (“href”、“/ redirectwarning.php?目标= '
     + encodeURIComponent($(元素).attr (“href”));
});

然后外部链接将首先重定向用户重定向警告.php，传递原始URL作为GET变量'target'. (在PHP中，您将检索此值为 $ url = $ _GET[“目标”];)

您还可以针对特定的域来定制它们的链接. 例如, $(“[href ^ = http://www.youtube.com/watch]“) 将目标链接到YouTube视频. 例如，你可以使用这个使它们在灯箱中打开.

神奇的链接

这段代码将导致url、电子邮件地址和美国/加拿大电话号码成为可点击链接.

var email = /\b([A-Z0-9 .._%+-](电子邮件保护)[A-Z0-9.-]+\.[A-Z]{2,4})\b/ig;
var phone = /\b([01]?[- .]?\(?[2-9]\d{2}\)?[- .]?\d{3}[- .]?\d{4})\b/g;
var url =
 /\b((?:http?):\/\/(?:-\.)?(?:[^\s\/?\.#-]+\.?)+(?:\/[^\s]*)?[A-Z0-9+&@#\/%=~_|])/ig;
var alink = /(]*>.*?<\/a>)/i;
$('p').each(函数() {
    var h = $(this).html();
    var alist = [];
    while(alink.test(h)) {
        var lnk = alink.exec(h)[0];
        h = h.replace(lnk, '');
        alist.push(lnk);
    }
    h = h.replace(email, '$1');
    h = h.replace(phone, '$1');
    h = h.replace(url, '$1');
    for(var i = 0; i ', alist[i]);
    }
    $(this).html(h);
});

注意，这段代码的一部分提取现有的链接，然后替换它们, 防止它们和正则表达式混淆. 如果在你的段落或段落的子段落中“幕后”做了任何事情, 这段代码可能会导致问题，因为它替换了代码. 特别是，已注册的事件将无法工作. 因此，如果您有任何类似的功能，我建议您先运行这段代码. 如果在要显示的用户输入上使用这些正则表达式，也可以跳过链接提取/替换, 比如博客评论(通常不允许HTML标签开头), 或者在任何你确定没有链接的代码上. 底线-在使用它之前在你的页面上彻底测试它，以确保它不会破坏任何东西.

\

九游会客户端
九游会客户端是一家全方位服务的创意机构 网页设计, 打印, 身份, 品牌, 界面设计, 视频制作, 静止摄影 和 运动设计. 利用我们对卓越的热情，多元文化背景，还有 获奖 实践, 我们一直提供高质量的服务, 自定义, 以创新的解决方案满足客户多样化的市场需求. 欲了解更多信息，请访问 www.MatchaDesign.com.