javascript - 使用 jQuery UI 小部件时如何发现所有可用属性?

标签 javascript jquery jquery-ui jquery-ui-button undocumented-behavior

我最近发现一些 jQuery UI 小部件的附加属性可以工作,但没有记录。例如,在 jQuery UI 1.11.4 对话框上提供 buttons 属性时,我可以使用 idautofocus 等子属性, official documentation 中都没有列出这两个选项。 .

$("#myDialog").dialog({
    title: "Do the thing?"
    buttons:
    [
        {
            text: "Yes",
            id: "dialogBtnYes",
            click: function () {
                $(this).dialog("close")
            }
        },
        {
            text: "No thanks",
            id: "dialogBtnNo",
            autofocus: true,
            click: function () {
                $(this).dialog("close")
            }
        }
    ]
});

我想知道还有多少其他未记录的选项可供我使用。我尝试过梳理 JavaScript 文件,但这对于像我这样的 JavaScript 新手来说非常令人畏惧。

你们会建议通过梳理源代码来找出其他“隐藏”功能,还是这不可行?如果这是要走的路,你能给我一些建议,告诉我如何在我们的太阳变成红巨星之前实现这一目标吗?如果没有,您可能会推荐哪些其他方法来学习 jQuery UI(或任何 JavaScript 框架)必须提供的其他功能?

最佳答案

使用递归函数枚举库的所有方法和属性。例如:

function getUDFs()
    {
    var current;

     /* Use a local variable named current instead of a global variable */

    for(current in arguments[0])
      {
      getUDFs.id = arguments[1]  + " => ";

      /* If the property is not null or undefined */
      if (!!arguments[0][current] || arguments[0][current] === "")
        {
        /* If the constructor is a standard JavaScript type */
        if (/Function|String|Object/.test(String(arguments[0][current].constructor) ) )
          {
          /* Store in an array */
          if (getUDFs.hasOwnProperty("data") )
            {
            getUDFs.data.push(getUDFs.id + current)
            }
          else
            {
            getUDFs.data = []
            }
          }

        if (/Object|Function/.test(String(arguments[0][current].constructor) ) )
         {
         getUDFs(arguments[0][current], getUDFs.id + current)
         }
        }
      }  
     }

getUDFs($.ui,"jQueryUI");
console.log(getUDFs.data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

一旦 jQuery UI 对象成为 DOM 元素,就会添加 idmousemove 属性。例如:

function getUDFs()
    {
    var current;

    for(current in arguments[0])
      {
      getUDFs.id = arguments[1]  + " => ";

      if (!!arguments[0][current] || arguments[0][current] === "")
        {
        if (/Function|String|Object/.test(String(arguments[0][current].constructor) ) )
          {
          if (getUDFs.hasOwnProperty("data") )
            {
            getUDFs.data.push(getUDFs.id + current)
            }
          else
            {
            getUDFs.data = []
            }
          }

        if (/Object|Function/.test(String(arguments[0][current].constructor) ) )
         {
         getUDFs(arguments[0][current], getUDFs.id + current)
         }
        }
      }  
     }

getUDFs(document.body,"document.body");
console.log(getUDFs.data);

引用文献

关于javascript - 使用 jQuery UI 小部件时如何发现所有可用属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40161920/

相关文章:

javascript - JQuery - 如何在多个 JQuery 克隆对话框中定位正确的按钮?

javascript - jQuery:暂时卡住/禁用所有事件?

javascript - 在 javascript (moment.js) 中将 UTC 日期转换为本地时间

javascript - 使用history.js,以便我可以在网站上进行深层链接

javascript - 显示模式时添加模糊类,隐藏模式时删除

jQuery 标题在用 div 制作的表中排序

javascript - 如何在 Scala.js 中使用 AngularJS 的模块配置?

javascript - 使用不同的扩展名 javascript 保存文件

Javascript:字符串到 HTML

jquery - 在 jQuery UI 完成更新小部件后显示页面