标签: jquery-plugins
如何使用方法创建jQuery插件？
我正在尝试编写一个jQuery插件,它将为调用它的对象提供附加的函数/方法.我在线阅读的所有教程(过去2小时内一直在浏览)包括最多如何添加选项,但不包括其他功能.
这是我要做的事情:
//通过调用该div的插件将div格式化为消息容器
$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");
或类似的规定.以下是它归结为:我调用插件,然后调用与该插件相关联的函数.我似乎找不到办法做到这一点,我见过许多插件之前做过.
这是我到目前为止插件的内容:
jQuery.fn.messagePlugin = function() {
return this.each(function(){
alert(this);
});
//i tried to do this, but it does not seem to work
jQuery.fn.messagePlugin.saySomething = function(message){
$(this).html(message);
}
};
我怎样才能实现这样的目标？
谢谢!
2013年11月18日更新:我已经改变了Hari的评论和赞成的正确答案.
推荐指数
解决办法
查看次数
jQuery Scroll到页面底部
我的页面完成加载后.我想让jQUery很好地滚动到页面底部,快速动画,而不是快速/摇晃.
我需要一个像这样的插件ScrollTo吗？或者是内置到jQuery中的一些如何？
推荐指数
解决办法
查看次数
如何使用jQuery向上或向下滚动页面到锚点？
我正在寻找一种方法来包含幻灯片效果,当您单击页面上或下的本地锚点链接时.
我想要一个你有这样一个链接的东西:
<a href="#nameofdivetc">link text, img etc.</a>
也许添加了一个类,所以你知道你希望这个链接是一个滑动链接:
<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>
然后,如果单击此链接,页面将向上或向下滑动到所需位置(可以是div,标题,页面顶部等).
这就是我以前的情况:
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor …推荐指数
解决办法
查看次数
src和dist文件夹的作用是什么？
我正在寻找一个jquery插件的git repo.我想在我自己的项目中进行一些更改,但是当我打开回购时,它有一个我以前从未见过的结构.我不确定使用/复制到我自己的项目中的文件.
有一个"dist"和一个"src"文件夹.这些服务的目的是什么？这是针对gruntjs或jquery插件的特定内容吗？
git repo我很好奇:https://github.com/ducksboard/gridster.js
推荐指数
解决办法
查看次数
使用jQuery获取查询字符串参数
有人知道编写jQuery扩展来处理查询字符串参数的好方法吗？我基本上想扩展jQuery魔术($)功能,所以我可以这样做:
$('?search').val();
这将使我在下面的网址值"测试": http://www.example.com/index.php?search=test.
我已经看到很多函数可以在jQuery和Javascript中执行此操作,但实际上我希望扩展jQuery以完全按照上面所示的方式工作.我不是在寻找一个jQuery插件,我正在寻找jQuery方法的扩展.
推荐指数
解决办法
查看次数
如何使用jQuery将子元素从一个父元素移动到另一个父元素
我正在使用jQuery DataTables插件.我想将搜索框(.dataTables_filter)和记录数从其父元素(.dataTables_wrapper)显示下拉列表(.dataTables_length)到我页面上的另一个div而不会丢失任何已注册的javascript行为.例如,搜索框有一个附加到'keyup'事件的函数,我想保持完整.
DOM看起来像这样:
<body>
<div id="parent1">
<div class="dataTables_wrapper" id="table1_wrapper">
<div class="dataTables_length" id="table1_length">
<select size="1" name="table1_length">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div class="dataTables_filter" id="table1_filter">
<input type="text" class="search">
</div>
<table id="table1">
...
</table>
</div>
</div>
<div id="parent2">
<ul>
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
<li><a href="#">Link C</a></li>
</ul>
</div>
</body>
这就是我希望DOM移动后的样子:
<body>
<div id="parent1">
<div class="dataTables_wrapper" id="table1_wrapper">
<table id="table1">
...
</table>
</div>
</div>
<div id="parent2">
<div class="dataTables_filter" id="table1_filter">
<input type="text" class="search">
</div>
<div class="dataTables_length" id="table1_length">
<select …推荐指数
解决办法
查看次数
JQuery动态加载Javascript文件
我有一个非常大的javascript文件,我只想在用户点击某个按钮时加载.我使用jQuery作为我的框架.是否有内置方法或插件可以帮助我这样做？
更多细节:我有一个"添加注释"按钮,应该加载TinyMCE javascript文件(我把所有TinyMCE的东西都煮成了一个JS文件),然后调用tinyMCE.init(...).
我不想在初始页面加载时加载它,因为不是每个人都会点击"添加评论".
我明白我可以这样做:
$("#addComment").click(function(e) { document.write("<script...") });
但是有更好/封装的方式吗？
推荐指数
解决办法
查看次数
为我的网络应用程序制作自定义右键单击上下文菜单
我有一些网站,如google-docs和map-quest,当你右键单击时会有自定义下拉菜单.他们以某种方式覆盖了浏览器下拉菜单的行为,我现在确切地知道他们是如何做到的.我找到了一个jQuery插件来做到这一点,但我仍然对一些事情感到好奇:
- 这是如何运作的？浏览器的下拉菜单是否实际被覆盖,或者效果是否只是模拟？如果是这样,怎么样？
- 这个插件抽象了什么？幕后发生了什么？
- 这是实现这种效果的唯一方法吗？
推荐指数
解决办法
查看次数
设置相对于父div的"Position:fixed"div的宽度
我试图给一个div(位置:固定)宽度100%(与它的父div相关).但是我遇到了一些问题......
编辑: 第一个问题是通过使用继承来解决,但它仍然无法正常工作.我认为问题在于我使用了多个占用100%/继承宽度的div.您可以在jsfiddle更新中找到第二个问题:http://jsfiddle.net/4bGqF/7/
福克斯的例子
#container {
width: 800px;
}
#fixed {
position: fixed;
width: 100%;
}
和HTML
<div id="container">
<div id="fixed">Sitename</div>
<p>
blaat
</p>
</div>
或者你可以尝试一下:http://jsfiddle.net/4bGqF/
问题似乎是固定元素总是占用窗口/文档的宽度.有谁知道如何解决这个问题？
我不能给我的固定元素一个固定的,因为我正在使用jScrollPane插件.这取决于内容是否有滚动条.
非常感谢!
PS:2个div的文本是相互重叠的.这只是一个例子,所以这并不重要.
推荐指数
解决办法
查看次数
有人可以解释如何实现jQuery文件上传插件吗？
编辑:
这似乎仍然是流量,所以我会解释我最终做了什么.我最终通过遵循Subrat的教程得到了插件,这是接受的答案.然而,jQuery文件上传是一个真正的麻烦,如果你正在寻找一个简单的文件上传插件,我强烈推荐Uploadify(谢谢,CORSAIR!).作为答案指出,它只是免费用于非商业用途.背景
我正在尝试使用blueimp的jQuery文件上传来允许用户上传文件.开箱即用,按照设置说明完美运行.但是为了在我的网站上实际使用它,我希望能够做一些事情:
- 在我现有的任何页面上添加上传器
- 更改上载文件的目录
该插件的所有文件都位于根目录下的文件夹中.
我试过了...
- 将演示页面移动到根目录并更新必要脚本的路径
- 按照此处的建议更改UploadHandler.php文件中的"upload_dir"和"upload_url"选项.
- 更改演示javascript第二行中的URL
在所有情况下,预览显示,进度条运行,但文件无法上传,我在控制台中收到此错误:Uncaught TypeError: Cannot read property 'files' of undefined.我不明白插件的所有部分是如何工作的,这使得调试变得困难.
码
演示页面中的javascript:
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'file_upload/server/php/UploadHandler.php',
uploadButton = $('<button/>')
.addClass('btn')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort(); …推荐指数
解决办法
查看次数
标签 统计
jquery ×10
jquery-plugins ×10
javascript ×5
anchor ×1
contextmenu ×1
css ×1
file-upload ×1
gruntjs ×1
lazy-loading ×1
query-string ×1
right-click ×1
slide ×1
tinymce ×1
url ×1