动态对齐div jquery

时间:2012-11-26 15:55:44

标签: jquery jquery-ui

我正在尝试创建一个可以创建框的函数,与以下选项对齐

  1. $("#roundbox").divAlign({vertical:"top",horizontal:"left"}); - 应该在其父级的左上角设置框,

  2. $("#roundbox").divAlign({vertical:"top",horizontal:"center"}); - 应将该框放在其父级的顶部中心,

  3. $("#roundbox").divAlign({vertical:"top",horizontal:"right"}); - 应该在其父级的右上角设置框,

  4. $("#roundbox").divAlign({vertical:"center",horizontal:"left"});

  5. $("#roundbox").divAlign({vertical:"center",horizontal:"center"}); - 屏幕中心

  6. $("#roundbox").divAlign({vertical:"center",horizontal:"right"}); - 中心,但在右侧

  7. 你可以指导我如何用更少的代码实现,不像我在下面做的那样。

    (function($){
         $.fn.extend({
              divalign: function (options) {
                   var options =  $.extend({ // Default values
                        inside:window, // element, center into window
                        vertical:'center',
                        horizontal:'center'
                   }, options);
                   return this.each(function() {
                            var props = {position:'absolute'};
                            if (options.vertical=="center" && options.horizontal=="center"){
                                var div_height = $(options.inside).height() / 2;
                                var div_width = $(options.inside).width() / 2;
                                $.extend(props, {top:'50%'},{left: '50%'},{'margin-top': div_height + 'px'},{'margin-left': div_width+'px'});
                            }else if(options.vertical=="top" && options.horizontal=="left"){
                                $.extend(props, {'margin-top':'5%'},{left: '2%'});
                            }
                        $(this).css(props);
                        return $(this);
                   });
              }
         }); })(jQuery);
    

    视觉表现: enter image description here

    感谢。

0 个答案:

没有答案