{php $this->template('header')}


<style>
    .bui-list .span1 .item-text {
        margin-bottom: .2rem;
    }
    .bui-list .span1 .item-text:last-child {
        margin-bottom: 0;
    }
</style>
<div class="bui-page">
    <header class="bui-bar">
        <div class="bui-bar-left">
            <a class="bui-btn btn-back"><i class="icon-back"></i></a>
            
        </div>
        <div class="bui-bar-main">图标列表</div>
        <div class="bui-bar-right">
        </div>
    </header>
    <main>
        <ul class="bui-list">
            <li class="bui-btn bui-box">
                <div class="bui-icon primary"><i class="icon-alert"></i></div>
                <div class="span1">系统消息 <span class="bui-badges">5</span></div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box">
                <div class="bui-icon warning"><i class="icon-face"></i></div>
                <div class="span1">好友申请</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box">
                <div class="bui-icon success"><i class="icon-chat"></i></div>
                <div class="span1">私信</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box">
                <div class="bui-icon primary"><i class="icon-home"></i></div>
                <div class="span1">累计积分</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box">
                <div class="bui-icon warning"><i class="icon-fav"></i></div>
                <div class="span1">收藏</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box">
                <div class="bui-icon success"><i class="icon-home"></i></div>
                <div class="span1">设置</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </main>
</div>



<script>

bui.ready(function(){

    var uiList = bui.list({
        id: "#scrollListview",
        url: "{php echo iurl('lst')}",
        children: ".bui-listview",
        handle: "li",
        pageSize: 15,
        template: function(data) {
            var html = "";
            $.each(data, function(index, el) {
                // status=1 手动拼接侧滑菜单,这样可以避免再次dom操作
                // 设置高度可以少遍历一次
                html += `<li status="1" style="height:46px;">
                            <div class="bui-btn bui-box" href="pages/ui_controls/bui.list_listview.html?id=11">
                                <div class="span1">${el.name} </div>
                                <i class="icon-listright"></i>
                            </div>
                            <div class="bui-listview-menu swipeleft">
                                <div class="bui-btn primary">修改</div>
                                <div class="bui-btn danger">删除</div>
                            </div>
                        </li>`;
            });

            return html;
        },
        //如果分页的字段名不一样,通过field重新定义
        field: {
            page: "page",
            size: "pageSize",
            data: "data"
        },
        onRefresh: function(scroll) {
            //初始化listview
            // uiListviewInit();
            console.log(this.option("page"));

        },
        onLoad: function(scroll) {
            console.log(this.option("page"));
            //初始化listview
        },
        callback: function(e) {
            // 找到整行li
            var $line = $(e.target).closest("li")
            console.log("点击整行", $line);

            var uiListview = bui.listview({
            id: "#scrollList2",
            data: [{ "text": "置顶", "classname":"primary"},{ "text": "删除", "classname":"danger"}],
            position:"right",   //默认就是右边,所以可以不用传
            callback: function (e) {
                // this 为滑动出来的操作按钮
                var $this = $(e.target);

                var text = $this.text();
                    if( text == '删除' ){
                        bui.confirm("确定要删除吗",function (e) {
                            //this 是指点击的按钮
                            var text2 = $(e.target).text();
                            if( text2 == "确定"){
                                // 执行删除整行操作
                                $this.parents("li").fadeOut(300,function () {
                                    $(this).remove();
                                });
                            }
                        })
                    }
                // 不管做什么操作,先关闭按钮,不然会导致第一次点击无效.
                this.close();
            }
        });
        }
    });

   

})
/**
loader.define(function(require, exports, module) {

    var uiList = bui.list({
        id: "#scrollListview",
        url: "http://www.easybui.com/demo/json/userlist.json",
        children: ".bui-listview",
        handle: "li",
        pageSize: 9,
        template: function(data) {
            var html = "";
            $.each(data, function(index, el) {
                // status=1 手动拼接侧滑菜单,这样可以避免再次dom操作
                // 设置高度可以少遍历一次
                html += `<li status="1" style="height:46px;">
                            <div class="bui-btn bui-box" href="pages/ui_controls/bui.list_listview.html?id=11">
                                <div class="span1">${el.name} </div>
                                <i class="icon-listright"></i>
                            </div>
                            <div class="bui-listview-menu swipeleft">
                                <div class="bui-btn primary">修改</div>
                                <div class="bui-btn danger">删除</div>
                            </div>
                        </li>`;
            });

            return html;
        },
        //如果分页的字段名不一样,通过field重新定义
        field: {
            page: "page",
            size: "pageSize",
            data: "data"
        },
        onRefresh: function(scroll) {
            //初始化listview
            // uiListviewInit();
            console.log(this.option("page"));

        },
        onLoad: function(scroll) {
            console.log(this.option("page"));
            //初始化listview
        },
        callback: function(e) {
            // 找到整行li
            var $line = $(e.target).closest("li")
            console.log("点击整行", $line)
        }
    });

    //加载初始化列表侧滑控件,模板里面已经静态渲染
    var uiListview = bui.listview({
        id: "#scrollList2",
        //data: [{ "text": "修改", "classname":"primary"}],
        callback: function(e, menu) {
            // 输出点击的按钮
            console.log(e.target)
                //关闭菜单
            menu.close();
            // 阻止冒泡
            e.stopPropagation();
        }
    });

})**/
</script>