Question

我正在构建一个jQuery插件，我的插件运行良好，但我无法解决语法“将默认设置分组”到桌面，移动设备，iPhone。我可以根据变量的值做一个if语句，但我试图让用户选择他们想从插件中加载哪些设备。下面是我用来构建插件设置的代码：

;(function($, window, document, undefined){

    //define JQDPT object with some default config settings
    $.JQDPT = {
        defaults: {
            type: "desktop",
            imgContainer: "",
            imgFormat: "jpg",
            sidebar: "#sidebar",
            imgDir: ""
        }
    };

在我的index.html页面上，我像这样初始化插件：

<script type="text/javascript">


        $("#jqdptcontainer").JQDPT({ 
        type: "desktop",
        imgContainer:"jqdptcontainer",
        imgDir: "images/", }, 
        ["Homepage", "Categories", "Product_description"]
        );

</script>

但我无法弄清楚我的插件中的参数组合的语法，我想像下面这样的＆gt;＆gt;不正确，但只是我想要实现的一个例子：

;(function($, window, document, undefined){

    //define JQDPT object with some default config settings
    $.JQDPT = {
        defaults: {
                       type: desktop, {
                                        imgContainer: "",
                                        imgFormat: "jpg",
                                        sidebar: "#sidebar",
                                        imgDir: ""
                                       },
                       type: ipad, {
                                        imgContainer: "",
                                        imgFormat: "jpg",
                                        sidebar: "#sidebar",
                                        imgDir: ""
                                       },
                       type: mobile, {
                                        imgContainer: "",
                                        imgFormat: "jpg",
                                        sidebar: "#sidebar",
                                        imgDir: ""
                                       },

        }
    };

另外，在index.html页面上使用分组设置初始化插件的正确语法是什么，以初始化更新的插件？即：

<script type="text/javascript">


        $("#jqdptcontainer").JQDPT({ 
        type: "desktop",{
                         imgContainer:"jqdptcontainer",
                         imgDir: "images/", }, 
                              ["Homepage", "Categories", "Product_description"]},
            type: "iphone",{
                         imgContainer:"jqdptcontainer",
                         imgDir: "images/", }, 
                              ["Homepage", "Categories", "Product_description"]},

        );

我花了无数个小时在jquery.com上查看其他插件，但有一些信息，但我还是无法弄清楚语法。

Answer 1

试试这个

$.JQDPT = {
    defaults: {
                   desktop : {
                                    imgContainer: "",
                                    imgFormat: "jpg",
                                    sidebar: "#sidebar",
                                    imgDir: "", 
                                    arrayOfSomething : []
                                   },
                   ipad : {
                                    imgContainer: "",
                                    imgFormat: "jpg",
                                    sidebar: "#sidebar",
                                    imgDir: "", 
                                    arrayOfSomething : []
                                   },
                   mobile : {
                                    imgContainer: "",
                                    imgFormat: "jpg",
                                    sidebar: "#sidebar",
                                    imgDir: "", 
                                    arrayOfSomething : []
                                   },

    }
};


    $("#jqdptcontainer").JQDPT({ 
    "desktop" :{
                     imgContainer:"jqdptcontainer",
                     imgDir: "images/", 
                     arrayOfSomething : ["Homepage", "Categories", "Product_description"]},
        "iphone" : {
                     imgContainer:"jqdptcontainer",
                     imgDir: "images/", 
                     arrayOfSomething : ["Homepage", "Categories", "Product_description"]},

    );

您可以通过这种方式参考选项。

var o = $.extend(true, $.JQDPT.defaults, passedInOptions);
console.log(o);
console.log(o.desktop);
console.log(o.ipad);
console.log(o.mobile);

这是无效的

              imgDir: "images/", }, 
                          ["Homepage", "Categories", "Product_description"]},

字符串数组（主页等）应该给你一个javascript错误？

希望有所帮助。

使用多种设置构建jQuery插件

1 个答案: