data:{ apkID:apkID },
async:true,
success:function(data){
if(data=='1'){
alert("No report data!");
}else{
if(data.length>0){
window.location.href=data;
}
}
}
});
})

就算如此那不是何等高深的手艺,但对于新手来讲还是颇有难度。要是您是七个新手,小编梦想您能从本文中学到东西;若是你是一把手,小编盼望您能留下您宝贵的视角和提出

根据id取url,并下载

复制代码 代码如下:

复制代码 代码如下:

View Code
(function ($) {
    $.fn.menu = function (options) {
        if (typeof options != 'undefined' && options.constructor === Array) options = { data: options };
        var opts = $.extend({}, $.fn.menu.defaults, options);
        var _tempMenuData = [];
        //重临数据品级
        function getLevel(id) {
            var _level = 0;
            var _o = getMenuData(id);
            while (_o != null) {
                _level ;
                _o = getMenuData(_o.pid);
            }
            return _level;
        }
        //再次回到数据对象
        function getMenuData(id) {
            for (var i = 0; i < opts.data.length; i ) {
                if (opts.data[i].id == id)
                    return opts.data[i];
            }
            return null;
        }
        //再次来到生成的HTML
        function getHtml(pid) {
            var _li_data = getData(pid);
            if (_li_data.length == 0) return null;
            var _ul = $('<ul></ul>');
            $.each(_li_data, function (i, _d) {
                var _children = getHtml(_d.id);
                var _li = $('<li></li>').appendTo(_ul);
                if (_d.n == null || _d.n.length == 0) {
                    _li.addClass('spacing');
                } else if (typeof _d.fn === 'function') {
                    $('<a href="javascript:;"></a>').html(_d.n)
                    .click(function () {
                        _d.fn(_d.url);
                    }).appendTo(_li);
                } else if (_d.url.length > 0) {
                    $('<a href="' _d.url '"></a>').html(_d.n).appendTo(_li);
                }
                if (_children != null) {
                    _li.addClass('item-has-children');
                    _children.appendTo(_li);
                    _li.bind({
                        mouseover: function () {
                            _children.show();
                        },
                        mouseout: function () {
                            _children.hide();
                        }
                    });
                }
            })
            if (pid == null && opts.type == 1) {
                _ul.addClass('horizontal');
            } else {
                var _level = getLevel(pid);
                _level > 0 && _ul.hide();
                _ul.addClass('vertical');
                if (_level > opts.type)
                    _ul.addClass('offset');
            }
            return _ul;
        }
        //重返下级数据数组
        function getData(pid) {
            var _data = [];
            _tempMenuData = $.grep(_tempMenuData, function (_d) {
                if (_d.pid == pid) {
                    _data.push(_d);
                    return true;
                }
                return false;
            }, true);
            return _data;
        }
        return this.each(function () {
            var me = $(this);
            me.addClass('ctcx-menu');
            if (opts.data != null && opts.data.length > 0) {
                $.merge(_tempMenuData, opts.data);
                me.append(getHtml(null));
            } else {
                me.find('.item-has-children').each(function () {
                    var self = $(this);
                    var _ul = self.children('ul');
                    _ul.hide();
                    self.bind({
                        mouseover: function () {
                            _ul.show();
                        },
                        mouseout: function () {
                            _ul.hide();
                        }
                    });
                });
            }
        });
    }
    //设置暗中同意参数
    $.fn.menu.defaults = {
        type: 1, //菜单的展现方式(重若是指第顶级是横向照旧纵向,暗中同意横向1,纵向0)
        /*
        data:动态变化菜单的数组数据,借使钦赐的此数额则会以此数据填充菜单(菜单内原有数据被取代)
        数据格式:[menu,menu,...]
        menu对象格式:{ id: 1, pid: null, n: '菜单名称1', url: '#', fn:回调函数 }
        */
        data: null
    }
})(jQuery);

调用JS代码

View Code
/*为了制止命名争执,大家将该插件全体样式都位居该类之下*/
.ctcx-menu
{
    font-size:14px;
}
.ctcx-menu ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
/*安装偏移量*/
.ctcx-menu ul.offset
{
    position:relative;
    top:-32px;
    left:100px;
}
.ctcx-menu ul li /*菜单项样式*/
{
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    vertical-align:top;
    margin:0;
    padding:0;
}
/*菜单项样式*/
.ctcx-menu a
{
    display:block;
    height:100%;
    border:1px solid #999;
    background-color:#FFF;
    text-decoration:none;
    color:#000;
}
.ctcx-menu a:hover
{
    background-color:#999;
    color:#FFF;
}
.ctcx-menu a:active{}
/*横向菜单*/
.ctcx-menu .horizontal
{
    padding-left:7px;
}
.ctcx-menu .horizontal li
{
    display:inline-block;
    margin-left:-7px;
}
.ctcx-menu .horizontal li.item-has-children > a /*具有子菜单的菜单项样式*/
{
}
.ctcx-menu .horizontal li.spacing /*横向间隔*/
{
    height:30px;
    width:10px;
    background-color:#000;
}
/*竖向菜单*/
.ctcx-menu .vertical
{
}
.ctcx-menu .vertical li
{
    margin-left:0px;
}
.ctcx-menu .vertical li.item-has-children > a /*具备子菜单的菜单项样式*/
{
}
.ctcx-menu .vertical li.spacing /*纵向间隔*/
{
    height:10px;
    width:100px;
    background-color:#000;
}

View Code
<div id="dynamic-menu3" class="ctcx-menu">
                <ul class="horizontal">
                    <li><a href="#"><span>一级菜单1</span></a></li>
                    <li><a href="#"><span>一流菜单2</span></a></li>
                    <li class="item-has-children">
                        <a href="#"><span>拔尖菜单3</span></a>
                        <ul class="vertical">
                            <li><a href="#"><span>二级菜单1</span></a></li>
                            <li><a href="#"><span>二级菜单2</span></a></li>
                            <li><a href="#"><span>二级菜单3</span></a></li>
                            <li class="item-has-children">
                                <a href="#"><span>二级菜单4</span></a>
                                <ul class="vertical offset">
                                    <li><a href="#"><span>三级菜单1</span></a></li>
                                    <li><a href="#"><span>三级菜单2</span></a></li>
                                    <li><a href="#"><span>三级菜单3</span></a></li>
                                    <li><a href="#"><span>三级菜单4</span></a></li>
                                    <li><a href="#"><span>三级菜单5</span></a></li>
                                </ul>
                            </li>
                            <li><a href="#"><span>二级菜单5</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span>一级菜单4</span></a></li>
                    <li><a href="#"><span>一级菜单5</span></a></li>
                </ul>
            </div>
            <div id="dynamic-menu1" class="ctcx-menu" style="margin-top:30px;"></div>
            <div id="dynamic-menu2" class="ctcx-menu" style="margin-top:60px;">
                <ul class="vertical">
                    <li><a href="#"><span>超级菜单1</span></a></li>
                    <li><a href="#"><span>一级菜单2</span></a></li>
                    <li class="item-has-children">
                        <a href="#"><span>一级菜单3</span></a>
                        <ul class="vertical offset">
                            <li><a href="#"><span>二级菜单1</span></a></li>
                            <li><a href="#"><span>二级菜单2</span></a></li>
                            <li><a href="#"><span>二级菜单3</span></a></li>
                            <li class="item-has-children">
                                <a href="#"><span>二级菜单4</span></a>
                                <ul class="vertical offset">
                                    <li><a href="#"><span>三级菜单1</span></a></li>
                                    <li><a href="#"><span>三级菜单2</span></a></li>
                                    <li><a href="#"><span>三级菜单3</span></a></li>
                                    <li><a href="#"><span>三级菜单4</span></a></li>
                                    <li><a href="#"><span>三级菜单5</span></a></li>
                                </ul>
                            </li>
                            <li><a href="#"><span>二级菜单5</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span>一级菜单4</span></a></li>
                    <li><a href="#"><span>一流菜单5</span></a></li>
                </ul>
            </div>

一.要做怎么着插件?
  我想要实现一个能够在网址或WEB应用种类中央银行使,能够灵活的定制外观、轻易、易于使用、方便扩张、稳固的菜系插件。它能够被用在网址基本航条上,亦能够用在管理后台。

View Code
$(function () {
                var _menuData = [
                    { id: 1, pid: null, n: '菜单名称1', url: '#' },
                    { id: 2, pid: null, n: '菜单名称2', url: '#' },
                    { id: 3, pid: null, n: '菜单名称3', url: '#' },
                    { id: 4, pid: null, n: '菜单名称4', url: '#' },
                    { id: 5, pid: null, n: '菜单名称5', url: '#' },
                    { id: 6, pid: 3, n: '菜单名称6', url: '#' },
                    { id: 7, pid: 3, n: '菜单名称7', url: '#' },
                    { id: 8, pid: 3, n: '菜单名称8', url: '#' },
                    { id: 9, pid: 3, n: '菜单名称9', url: '#' },
                    { id: 10, pid: 9, n: '菜单名称10', url: '#' },
                    { id: 11, pid: 9, n: '菜单名称11', url: '#' },
                    { id: 12, pid: 9, n: '菜单名称12', url: '#' },
                    { id: 13, pid: 9, n: '菜单名称13', url: '#' },
                    { id: 14, pid: 13, n: '菜单名称14', url: '#' },
                    { id: 15, pid: 1, n: '菜单名称15', url: '#' }
                ];
                $('#dynamic-menu1').menu({ type: 0, data: _menuData });
                $('#dynamic-menu2').menu();
                $('#dynamic-menu3').menu();
            });

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

二.想要的作用是哪些?
  日常菜谱处于收起状态,当鼠标移入呈现其下级菜单,依此类推;能够方便的采用html标签设置菜单的结构,也得以使用数组动态变化。

七.下载 点击这里 下载使用例子,和具有文件。

HTML

...

韦德娱乐1946网页版 1

插件代码

对图片的表明
菜单项暗中认可的状态。
富有下级菜单且鼠标移入时的情景。
距离(起到分组的功力)
怀有下级菜单,鼠标未移入时的图景。
竖排具备下级菜单且鼠标移入时的情况。
得到大旨时的事态。
任何效用
美食做法全部意况的体裁均经过CSS调节,能够依赖供给灵活修改。
透过HTML和javascript三种艺术变通通菜单。
为菜单项钦定点击回调函数和跳转地址(当内定回调函数时,不设置U福特ExplorerL地址,而是将U途锐L地址传入回调函数)。
四.如何实现效果与利益?
   1.用到CSS样式调节外观。
     *为了防止CSS命名抵触,我们需求为插件显著二个名字空间,其下全体样式都在该命名空间下。
  2.菜单标签的选项
    *诚如的话达成菜单的价签很多会选用列表标签<ul><li></li></ul>来落到实处,大家也不例外。
    菜单项:<li><a href="链接地址"><span>菜单项展现名称</span></a></li>
  3.调整UL标签的呈现情势
    *使用CSS去掉符号和缩进
    *利用CSS横向排列,横向排列有二种格局:
      (1).用的可比多的是生成排列(float:left;);可是这种措施有个最大的难题是会毁掉页面结构,作者不是很欢畅这种情势。
      (2).使用内联(display:inline-block)的点子;近些日子已知的主题材料是低版本浏览器大概援救的不太好,那么些标题网络上有特地的篇章探讨,这里本身就不再赘言了。
    *当自家在应用这种格局是出新了三个小标题,正是块与块之间有大意10px的空当。我删除掉HTML代码里标签之间的空隙(换行)后,那些空隙消失了;那尽管能够化解难题,不过缺破坏了代码的组织,可读性差;如若是动态变化的还是还可以。所以本人想开了另一种消除办法,那正是设置每种块(<li>标签)的的左侧距为-10px;同期安装<ul>的左内距为10px,perfect!!!
五.浏览器包容
  未在IE6和IE7下开始展览连锁测量试验。
六.意义完成和调用
体制调整

TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:韦德娱乐1946网页版href下载文件依赖id取url并下载