jquery插件怎样使用和修改?

jquery插件怎样使用和修改?,第1张

jQuery插件 要使用它的话 通常插件中都有demo或者api可以查阅
通常jQuery插件为了减小体积 会发布两个版本 XXXjs和XXXminjs
如果你要修改插件需要使用XXXjs文件
首先 你要知道它怎么用,先有一个可用的demo(没有demo就自己写一个),然后用webkit内核或firefox进行断点查看,这主要是为了找插件入口点,当然 你也可以直接查看js代码 这需要一定的底子
最后 就是慢慢查看他的代码的实现功能了,先得看懂他是怎么实现的,然后你才会知道怎么改
jQuery插件我也写的不少 像 模拟alert/confirm/prompt 错误信息提示框 模拟d出窗体 无缝marquee滚动 分页控件 拖拽控件等等
jQuery插件的框架写法通常是
(function($){
$fnextend({
fnKey:function(){}
})
//或者
$fnfnKey=function(){}
})(jQuery)
上面的两种写法的调用 方式 是
$("XXX")fnKey()进行调用的
还有一种写法:
var fnClass = function(){
thisfnKey=function(){
}
thisprops="";
}
这种写法是的调用 方式是
fnClass obj = new fnClass();
objfnKey();
第二种写法是js的面向对象编程 得自己慢慢的理解哈

不懂不是不可以,你至少要会点,给你个例子吧

$fnmyplugin=function(options){
    return $(this)parent()html();
    //返回自身的html,该功能不完美,你会的话再改进。
}
//调用方法
$('#myid')myplugin();

这就是一个简单的jquery插件,我已经做前端6年了,建议你会点js做起来也会比较好的。你可以去虾米站长网学习一些比较相关基础的教程。期待你做得更好。

alert(thistest()pname);
改成
alert(pname) 就行了,
至于为什么提示undefined,那是因为你在test里面没有返回show对象,加个return就行了,如
(function($){
$fnextend({
test : function(str){
var p = $extend({
name:"default_name",
value:"default_value"
}, str);

alert(pname);

var show = function(){
alert(pvalue);
}

return {show : show}
}
});
})(jQuery);
$(function(){
$("#b")click(function(){
alert('dddddd')
$(this)test('d')show()
});
});

1Lightbox_me插件功能
用于显示d出层
2Lightbox_me官方地址
在网页的下面有演示地址和常用属性。
3Lightbox_me使用方法
1首先引用jqueryjs与jquerylightbox_mejs
<script src="/ref/jquery-172minjs"></script>
<script src="/ref/lightbox_me/jquerylightbox_mejs"></script>
2使用的代码
<script type="text/javascript">
$(function() {
$('#login')click(function(e) {
$('#loginbox')lightbox_me({
centered: true,
onLoad: function() {
$('#loginbox')find('input:first')focus()
}
});
epreventDefault();
});
$('#cancel')click(function(){
$('#loginbox')trigger('close');
//alert('aaa');
});
});
</script>
4Lightbox_me修改样式
d出层的样式修改非常简单,只需要会使用css就可以了。例如一下代码:
#loginbox{
width:400px;
display:none;
background:white;
border:1px solid #ccc;
}
body {
font-size:12px;
font-family:微软雅黑;
}
loginbox-title {
background: #eef2f7;
border-bottom: 1px solid #ccc;
margin-bottom:10px;
padding:8px 0;
font-size:14px;
text-align:center;
}
loginbox-footer{
padding:8px 0;
border-top:1px solid #ccc;
text-align:center;
background:#eef2f7;
}
table {
width:98%;
margin:0 8px;
}
th, td {
padding:8px 0;
}
th {
text-align:left;
}
big {
padding:5px 18px;
}
以上所述就是本文的全部内容了,希望大家能够喜欢。

jQuery的插件使用方法具体步骤如下:

1、调用库文件使用jQuery必须链接jQuery的库文件,无论是压缩版还是正常版,必须至少在网页中链接一个;

2、调用Jquery插件应用做好的jQuery插件效果。比如jQuery官网制作的插件jQuery,在使用它时不仅要链接库文件,还要链接UI文件以及UI的CSS文件。

Jquery是一个优秀的Javascript库,还兼容各种浏览器。jQuery使用户能更方便地处理HTML、events、实现动画效果,并且方便地为网站提供AJAX交互。

jQuery插件 要使用它的话 通常插件中都有demo或者api可以查阅
通常jQuery插件为了减小体积 会发布两个版本 XXXjs和XXXminjs
如果你要修改插件需要使用XXXjs文件
首先 你要知道它怎么用,先有一个可用的demo(没有demo就自己写一个),然后用webkit内核或firefox进行断点查看,这主要是为了找插件入口点,当然 你也可以直接查看js代码 这需要一定的底子
最后 就是慢慢查看他的代码的实现功能了,先得看懂他是怎么实现的,然后你才会知道怎么改
jQuery插件我也写的不少 像 模拟alert/confirm/prompt 错误信息提示框 模拟d出窗体 无缝marquee滚动 分页控件 拖拽控件等等
jQuery插件的框架写法通常是
(function($){
$fnextend({
fnKey:function(){}
})
//或者
$fnfnKey=function(){}
})(jQuery)
上面的两种写法的调用 方式 是
$("XXX")fnKey()进行调用的
还有一种写法:
var fnClass = function(){
thisfnKey=function(){
}
thisprops="";
}
这种写法是的调用 方式是
fnClass obj = new fnClass();
objfnKey();
第二种写法是js的面向对象编程 得自己慢慢的理解哈


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13398912.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-28
下一篇 2023-07-28

发表评论

登录后才能评论

评论列表(0条)

保存