标签: jquery-widgets

几个月前,我开始用jQuery插件进行一些实验.我在Interenet上找到了一些教程,我开始把一些东西放在一起.
几天前,我有必要建立自己的"插件"并回到我原来的项目.为了在互联网上找到更多信息,我碰到了这些叫做小部件的新"事物".

根据我的理解,我应该忘记插件并开始开发小部件.插件是旧概念还是仍然有效？如果需要带接口的自定义jquery控件,最好的方法是什么？

我正在广泛使用jQuery UI.

这是一个简单的小部件模拟:

(function ($) {

    $.widget("ui.myDummyWidget", {

        options: {
        },

        _create: function () {
        },
        hide: function () {
            this.element.hide();
        },
        _setOption: function (key, value) {
            $.Widget.prototype._setOption.apply(this, arguments);
        },

        destroy: function () {
            $.Widget.prototype.destroy.call(this);
        }

    });

} (jQuery));

它只添加一个方法hide,您可以调用它来隐藏元素.如果从小部件内完成,则很容易

this.hide();

但常见的情况是您希望从外部调用窗口小部件实例上的方法(Ajax更新或其他外部事件)

那么访问小部件实例的最佳方式是什么？一种方法是将元组件的引用添加到元素中,丑陋......

_create: function () {
    this.element[0].widget = this;
},

然后你可以从外面进行访问

this.dummy = $("#dummy").myDummyWidget();
this.dummy[0].widget.hide();

我有几个使用jQuery自动完成功能增强的输入字段.触发选择事件时如何获取相应的输入字段？

<input name="1" value="">
<input name="2" value="">
<input name="3" value="">

$('input[type=text]').autocomplete({
    source: 'suggestions.php',
    select: function(event, ui) {
        // here I need the input element that have triggered the event
    }
});

我正在使用redmond themeroller和我的jqGrid.文件jquery-ui-1.8.16.custom.css具有此叠加层.

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

我认为它应该在网格上做一个叠加来做造型的东西.但它似乎覆盖了我的整个页面,而网格本身仍然有鼠标事件,页面的其余部分(包括网格的寻呼机/导航器部分)没有任何鼠标事件,按钮不响应点击.网格外的选项卡 - 也没有单击事件.即使是(Main,Users ...)之外的标签也没有事件.如果我注释掉ui-widget-overlay,那么所有的按钮和标签再次起作用,但屏幕的颜色变浅,网格中的交替行颜色在每一行上都只是白色.为什么会这样？

<link rel="stylesheet" type="text/css" media="screen" href="/plugins/snap/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/plugins/snap/jqModal.css" />
<script src="/plugins/snap/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/plugins/snap/jquery.jqGrid-4.2.0/src/jqModal.js" type="text/javascript"></script>
<script src="/plugins/snap/jquery.jqGrid-4.2.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/plugins/snap/jquery.jqGrid-4.2.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/plugins/snap/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

<style type="text/css">

</style>

<script type="text/javascript">
$().jquery;

function switch_tabs(obj)
{
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).show();
    obj.addClass("selected");
}

var lastsel_devinfo;
$(document).ready(function() {

    $('.tabs a').click(function(){
        switch_tabs($(this));
    });

    switch_tabs($('.defaulttab'));

//$('#devInfo").jqGrid('navGrid','#pager',{},{zIndex:1234},{zIndex:1234},{zIndex:1234},{multipleSearch:true,overlay:false});
 var initialized …

我有一个问题.我在select元素上应用小 部件.当我重新加载相同的select元素值时,我将删除select元素上的小部件并重新应用.但是在同一元素上重新应用小部件时,更改并未反映出来.

以下是HTML select语句:

<select id="countries" class="multiselect" multiple="multiple" name="countries">
        <option value="USA">United States</option>
        ...
</select>

要在同一元素上应用小部件:

function applyWidget(){ 
    $(".multiselect").multiselect();
}

应用窗口小部件后,它将创建一个divwith class=".ui-multiselect".

要删除窗口小部件类:

function removeWidget(){
    $(".ui-multiselect").remove();
}

applyWidget()第一次调用该方法工作正常.第二次打电话不起作用.如何在元素上重新加载小部件？

我正在制作一个jquery小部件,其中widget工具在typescript中输入.如何在不写.d.ts的情况下提供良好的智能感知？

例如:

/*mywidget.ts*/

$.widget("ui.mywidget", {
    options: {
        myoption: ""
    },
    doSomething: function () {
        this._hasDoSomething = true;
        /*do doSomething*/
    },
    hasDoSomething: function (): bool {
        return <bool>this._hasDoSomething;
    }
});

/*mywidget.d.ts*/
interface MyWidgetOptions {
    myoption: string;
}

interface MyWidget extends Widget, MyWidgetOptions {}

interface NLIB { 
    mywidget: MyWidget;
}

interface JQuery {
    mywidget(): JQuery;
    mywidget(methodName: string): JQuery;
    mywidget(options: MyWidgetOptions): JQuery;
    mywidget(optionLiteral: string, optionName: string): any;
    mywidget(optionLiteral: string, options: MyWidgetOptions): any;
    mywidget(optionLiteral: string, optionName: string, optionValue: any): JQuery;
}

interface …

我刚开始在一个开发人员以前工作的网站上工作.他在其中一个网页中实现了Datepicker小部件.

当我浏览这个实现的代码时,我不明白代码实际上做了什么？我无法弄清楚逻辑的编写方式.

我还浏览了关于函数'beforeShowDay'和'onSelect'的Datepicker小部件的jQuery UI API文档,但是也找不到线索,所以请求帮助让我以更简单和描述的方式理解下面的代码.

有人可以用简单明了的语言让我理解"afterShowDay"和"onSelect"中函数的用法吗？

HTML代码:

<div class="col-md-2 voffset2 rightpad">
  <div class="col-sm-3">
    <div id="datepicker"></div>
  </div>
</div>

Javascript代码:

    <script type="application/javascript">
    $(document).ready(function() {

      /******* Display Calender and events highlighted *******/

      /*Not understood what does below array variable has role to play */
      var myDates = $.parseJSON('["1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31","1969-12-31"]');
      $( "#datepicker" ).datepicker({
        beforeShowDay: function(date) {
          var dateObj = new Date(date);
          var month = dateObj.getMonth() + 1;
          if(month < 10) {
            month = "0"+month;
          }

          var day = dateObj.getDate();          
          if(day < …

我正在使用jqm框架构建一个webapp,并且pageshow在包含jQuery小部件k3dcarousel时我一直在尝试使用该函数.在有问题的页面上,我在data-role="page"div 下面有我的脚本,

$("#page-about").live(
    "pageshow",
    function (event) {
        $('#k3dCarousel_portrait').k3dCarousel();
    }
);

似乎我需要点击我的链接两次才能加载JS函数,这会让我觉得我使用这个函数是错误的.此外,如果我不使用该 $("#page-about").die(); 函数下面的pageshow函数,如果我单击返回然后再次单击该链接,脚本将被多次加载.

我使用pageshow逻辑错了吗？有没有更好的方法来实现我想要做的事情:将AJAX这个页面放到我的移动框架中.

我理解这是一个相当具体的问题,但希望对此有一个通用的答案,因为在我看来,这可能发生在任何小部件上.

非常感谢任何帮助,如果有帮助,我可以粘贴更多代码.

感谢您的时间.

我将开发一个基于PHP和MySQL数据库的商业Web应用程序.

现在,我猜测JavaScript框架.我找到了几个有趣的框架,如ExtJS,JQWidgets或DHTMLX.

他们的一些组件可以在这里测试:

• ExtJS的
• JQWidgets
• DHTMLX

但是,我无法找到最近的比较.

你能否就这些框架给我你的意见(优点/缺点):

• 对大量数据的性能(特别是网格过滤或排序)
• 许可费用
• 兼容Web浏览器
• 在文档中查找信息是否容易？
• 他们有车吗？
• 可用于SSL连接吗？
• 其他要点

谢谢.

我尝试使用 CreateView 通过 UI 创建模型事件的对象 我的模型是

class Event(models.Model):
    start = models.DateTimeField(_("start"), db_index=True)
    end = models.DateTimeField(_("end"), db_index=True, help_text=_("The end time must be later than the start time."))
    title = models.CharField(_("title"), max_length=255)
    description = models.TextField(_("description"), blank=True)
    rule = models.ForeignKey(Rule)
    calendar = models.ForeignKey(Calendar)

我的模型表单是

class EventForm(forms.ModelForm):
    class Meta:
        model=Event
        fields=['start','end','title','description','rule','calendar',]

我的网址是

url(r'^addEvent/$', CreateEventView.as_view(), name='add-event'),

查看是

class CreateEventView(CreateView):
    form_class=EventForm
    template_name="createEventForm.html"
    success_url='/eventListView/'

我尝试在以下 HTML 模板中自动呈现此内容

{% extends "base.html" %}
{% load i18n %}
{% block body %}
    <form method='POST'>{% csrf_token %}
        {{form.as_p}}
    <button type="submit">Save</button>
    </form> …