现在位置首页 / 项目实战 /正文

jquery弹出九宫格菜单--适应复杂界面

作者: IT小兵 | 2014年4月28日| 热度:℃ | 评论: |参与:

九宫格是现在的流行趋势。都是因为苹果的iphone设计这么好。今天分享一个在pc可以使用的

pop弹出框九宫格。

demo的演示地址:http://js.itivy.com/jiaoben2162/index.html

效果图:

使用起来非常简单:

1、插件代码:

/*
jQuery Pop Menu
Version: beta
Author: Guc. http://www.gucheen.pro
Based on jQuery 2.0.3
*/
(function ($) {
    $.fn.popmenu = function (options) {
        var settings = $.extend({
            'controller': true,
            'width': '300px',
            'background': '#34495e',
            'focusColor': '#1abc9c',
            'borderRadius': '10px',
            'top': '50',
            'left': '0',
            'iconSize': '100px'
        }, options);
        if (settings.controller === true) {
            var temp_display = 'none';
        } else {
            var temp_display = 'block';
        }
        var tar = $(this);
        var tar_body = tar.children('ul');
        var tar_list = tar_body.children('li');
        var tar_a = tar_list.children('a');
        var tar_ctrl = tar.children('.pop_ctrl');
        function setIt() {
            tar_body.css({
                'display': temp_display,
                'position': 'absolute',
                'margin-top': -settings.top,
                'margin-left': -settings.left,
                'background': settings.background,
                'width': settings.width,
                'float': 'left',
                'padding': '0',
                'border-radius': settings.borderRadius
            });
            tar_list.css({
                'display': 'block',
                'color': '#fff',
                'float': 'left',
                'width': settings.iconSize,
                'height': settings.iconSize,
                'text-align': 'center',
                'border-radius': settings.borderRadius
            });
            tar_a.css({
                'text-decoration': 'none',
                'color': '#fff'
            });
            tar_ctrl.hover(function () {
                tar_ctrl.css('cursor', 'pointer');
            }, function () {
                tar_ctrl.css('cursor', 'default')
            });
            tar_ctrl.click(function (e) {
                e.preventDefault();
                tar_body.show('fast');
                $(document).mouseup(function (e) {
                    var _con = tar_body;
                    if (!_con.is(e.target) && _con.has(e.target).length === 0) {
                        _con.hide();
                    }
                    //_con.hide(); some functions you want
                });
            });
            tar_list.hover(function () {
                $(this).css({
                    'background': settings.focusColor,
                    'cursor': 'pointer'
                });
            }, function () {
                $(this).css({
                    'background': settings.background,
                    'cursor': 'default'
                });
            });
        }
        return setIt();
    };
}(jQuery));

保存成js文件,在jquery之后引用

2、业务逻辑调用:

<script>    
$(function(){    
$('#demo_box').popmenu();    
$('#demo_box_2').popmenu({'background':'#e67e22','focusColor':'#c0392b','borderRadius':'0'});    
})    
</script>

这个功能在修改一下样式的情况下,可以适合很多的系统。

$('#demo_box').popmenu({parameters});
You can use parameters below.
{
       'controller': true,       // use control button or not
       'width': '300px',         // width of menu
       'background': '#34495e',  // background color of menu
       'focusColor': '#1abc9c',  // hover color of menu's buttons
       'borderRadius': '10px',   // radian of angles, '0' for right angle
       'top': '50',              // pixels that move up
       'left': '0',              // pixels that move left
       'iconSize': '100px'       // size of menu's buttons
       }


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询