Question

我想在我的插件默认配置设置中传递一个数组。我试图给用户，选择添加尽可能多的title和src变量，例如：

desktop_xl: {
   "title":"beach",
   "src":"http://images.smh.com.au/2013/02/25/4061249/art-Whitehaven-Beach-620x349.jpg" 
            },
        {
        "title":"sunset",
        "src":"https://lh5.googleusercontent.com/-Oh0HlfM31BQ/TlXHejUNpeI/AAAAAAAABiI/tQbJJEGEOnU/s400/red_sunset_beach.jpg"
        }

我已经看到关于堆栈溢出的这个问题，但找不到适合我的答案。我做了一些阅读并发现我可以创建一个对象数组，它只适用于我的index.html页面，如下面的小提琴，http://jsfiddle.net/michelm/7gS6g/2/

问题是我想在我的插件中使用这个数组作为配置选项，这样用户可以根据需要添加尽可能多的title和src变量，但是数组在插件中不起作用。

当我在index.html页面上执行console.log(desktop_xl);时，它显示为对象。

enter image description here

我在http://api.jquery.com/jquery.extend/阅读文档，根据我的理解，我需要合并我的对象以将它们作为配置选项传递，这里是从我的投递箱帐户到我的插件的链接（js小提琴没有采取https链接出于某些原因），请参阅下面链接到jquery.myplugin.js（现在是随机名称，但一旦我计算出逻辑，它将使用唯一的命名约定）：

https://www.dropbox.com/s/boadofib6nggfzp/jquery.myplugin.js

任何人都可以帮我弄清楚如何在我的配置选项中传递此变量，以便用户可以从选项desktop_xl中添加尽可能多的“title”和“src”吗？

更新

我已经弄清楚如何提取数组信息并将其附加到我的图片中，但是，我仍然不知道如何将其“链接”到插件选项设置，因为我需要为用户提供添加为许多带有标题的图像在选项设置中都是如此。以下是我如何从数组中提取数据的方法：

 //create img desktop_xl loop    
    $.each(desktop_xl, function( index , value ){

        $('#container').append( 

                        $("<img />").attr({ 
                                    id: value.title, 
                                    src: value.src,
                                    title: value.title

                        })


         );


     });

更新2：

我在插件上做了一些工作，到目前为止是这里的代码：

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

//define MyjQueryPlugin object with default config settings:

 $.MyjQueryPlugin = {
 defaults: {
            imagecontainer: "#container",
            version: "v01"

// add my Arrays to default options here?
// arrays should allow users to add as many images to #container div as they require
// arrays are desktop_xl[] , desktop_l[] , ipad_p[] , mobile_l[], mobile_p[]  
 }
 };


//extend jquery with the plugin
$.fn.extend({
    MyjQueryPlugin:function(config) {

    //use defaults or properties supplied by user
    var config = $.extend({}, $.MyjQueryPlugin.defaults, config );

//append slides         
$(config.imagecontainer).append('<div class="imagecontainerfordesktop_xlarray" </div>').css('height', $(window).height() );

// append MyjQueryPlugin sidebar
    this.append( '<div id="Mysidebar" class="open">' +
        '<p class="review">Version ' + config.version  + '- ready for review</p>'+
        '<hr>' +
        '</div>')
        .children()
        .css('height', $(window).height() );



//create array of objects        
var desktop_xl = [
    {
    "title":"Homepage", // text for sidebar
    "src":"slides/1200/Homepage.jpg"// path to image >= 1200px wide
    },
       {
    "title":"Categories", // text for sidebar
    "src":"slides/1200/Categories.jpg"// path to image >= 1200px wide
    },
    {
    "title":"Product description", // text for sidebar
    "src":"slides/1200/Product_description.jpg" // path to image >= 1200px wide
    }
];

var desktop_l = [
    // if array is empty, remove elements from the page
];

var ipad_p = [
    {
    "title":"Homepage", // text for sidebar
    "src":"slides/480/Homepage.jpg" // path to image >= 480px wide
    }
]; 
var mobile_l = [];        
var mobile_p = [];

// set Global Variables
var width           =   $(window).width();
var currHeight      =   $(window).height();
var ctrl            =   $(".ctrl");
var ulscreenlia     =   $('ul.screen li a');
var sidebarlia      =   $('#MyjQueryPluginsidebar li a');
var sidebar         =   $("#MyjQueryPluginsidebar");
var ulscreenli      =   $('ul.screen li');

if (desktop_xl.length === 0) {
  ulscreenli.eq(0).hide();
$('div.select_join option[value="xld"]').remove();    
}
if (desktop_l.length === 0) {
  ulscreenli.eq(1).hide();
$('div.select_join option[value="ld"]').remove(); 
}
if (ipad_p.length === 0) {
  ulscreenli.eq(2).hide();
$('div.select_join option[value="ip"]').remove(); 
}
if (mobile_l.length === 0) {
  ulscreenli.eq(3).hide();
$('div.select_join option[value="ml"]').remove(); 
}        
if (mobile_p.length === 0) {
  ulscreenli.eq(4).hide();
$('div.select_join option[value="mp"]').remove(); 
}

    //create img desktop_xl loop    
    $.each(desktop_xl, function( index , value ){

        $('#container .slides-xld').append( 
            //getting values from array but cannot understand how to pass array(s): desktop_xl, desktop_l, ipad_p, mobile_l, mobile_p  inside config option
             //And Each arrays should allow user to add multiple images to #container dive
                        $("<img />").attr({ 
                                    id: value.title, 
                                    src: value.src,
                                    title: value.title
                        })


         );
     });

       //create img ipadp loop    
    $.each(ipad_p, function( index , value){

        $('#container .slides-ipadp').append( 

                        $("<img />").attr({ 
                                    id: value.title, 
                                    src: value.src,
                                    title: value.title
                                })
         );
     });


function rundateobject(){

            var current_date = new Date ( );

            var month_names = new Array ( );
            month_names[month_names.length] = "January";
            month_names[month_names.length] = "February";
            month_names[month_names.length] = "March";
            month_names[month_names.length] = "April";
            month_names[month_names.length] = "May";
            month_names[month_names.length] = "June";
            month_names[month_names.length] = "July";
            month_names[month_names.length] = "August";
            month_names[month_names.length] = "September";
            month_names[month_names.length] = "October";
            month_names[month_names.length] = "November";
            month_names[month_names.length] = "December";

            var day_names = new Array ( );
            day_names[day_names.length] = "Sunday";
            day_names[day_names.length] = "Monday";
            day_names[day_names.length] = "Tuesday";
            day_names[day_names.length] = "Wednesday";
            day_names[day_names.length] = "Thursday";
            day_names[day_names.length] = "Friday";
            day_names[day_names.length] = "Saturday";

            $('#date').html( day_names[current_date.getDay()] 
            + ', ' 
            + month_names[current_date.getMonth()] 
            + ' ' 
            + current_date.getDate() 
            + ' ' 
            + current_date.getFullYear() );

};

//create animation for anchor links with jQuery DOM ready function        
$(function(){     
    $('a').hover(function(){
          $(this).animate({
             'margin-left':10,
             'padding-left':20

          },200); 
        $(this).dequeue(); 
        },
        function() {
          $(this).animate({
             'margin-left':0,
             'padding-left':15
          },200);
            $(this).dequeue(); 
        }        
      );
}); 

//on resize browser, adjust elements height


//initialise plugins 
$(".nano").nanoScroller();   

//initialise functions
rundateobject(); 

//return the jquery object for chaining
return this;

  }// config options  

}); // jQuery extend


})(jQuery, window, document);

Answer 1

用户kbwood.au

在jquery.com上给了我答案

defaults: {
            imagecontainer: "#container",
            version: "v01",
            desktop_xl: [] //Array

 }

然后在.each函数中我们需要将数组作为config.desktop_xl传递：

//create img desktop_xl loop    
    $.each(config.desktop_xl, function( index , value ){

        $('#container').append( 

                        $("<img />").attr({ 
                                    id: value.title, 
                                    src: value.src,
                                    title: value.title

                        })


         );


     });

jquery插件在配置设置中传递变量

1 个答案: