您的位置：首页 > Web前端 > JQuery

jQuery插件开发（转）

2009-07-08 14:19 381 查看

原文地址：http://www.cnblogs.com/fromearth/archive/2009/07/08/1519054.html

【前言】
jQuery已经被广泛使用，凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，我在社区也发布了很多的jQuery插件，经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。

【基础】
a)样式
很多人会认为样式是个很复杂的东西，需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI，抛开图片设计不说，其实css也就是那么些属性：position,margin,padding,width,height,left,top,float,border,background...

UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。举个简单的例子，一个简单的页面，马虎的人：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
</head>
<body>
jQuery是一个框架！压缩后有30多k吧。
</body>
</html>

细心的人：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style type="text/css">
body
{
font-family:'宋体';
font-size:12px;
}
</style>
</head>
<body>
jQuery是一个框架！压缩后有30多k吧。
</body>
</html> 专心的人：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style type="text/css">
body
{
font-family:'Verdana','宋体';
font-size:12px;
}
</style>
</head>
<body>
jQuery是一个框架！压缩后有30多k吧。
</body>
</html>
我们对比一下三者的UI效果：
.defaultbar
.defaultbar .jquery-completed
.defaultbar .jquery-jslider
将bar的position属性设置成relative，以方便子节点的浮动（子节点使用position:absolute来获得内联浮动效果）。

那么我们可以看下这个css和html tree产生的UI效果：
.bluebar
.bluebar .jquery-completed
.bluebar .jquery-jslider
.bluebar .jquery-jslider-hover
{}{
background-position:center -17px;
} 由于在设置样式时我仍然让子节点样式使用了API的默认值，因此在创建jSlider时我们只需要设置barCssName就行了：

var blue = $.fn.jSlider({
renderTo: '#slidercontainer',
size: { barWidth: 500, sliderWidth: 10 },
barCssName: 'bluebar',
onChanging: function(percentage, e) {
// code goes here
}
}); 呈现出来的UI:

我们这样来设置其值：

//set percentage with a callback function
blue.setSliderValue(0.65, function(percentage) {
// code goes here
});
【通用性】
当然，我们不仅可以将jSlider作为slider使用，有时候它也是一个progressbar:

(代码我就不贴了，直接在demo里查看 ;-) )

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航