<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-- framework7 --> <link rel="stylesheet" href="framework7/dist/css/framework7.min.css"> <link rel="stylesheet" href="framework7/dist/css/framework7.md.min.css"> </head> <body> <div id="container" class='main-table' id="as-main-table" style="overflow: hidden"> </div> <br> <div id="container2" class="list links-list"> </div> </body> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="framework7/dist/js/framework7.min.js"></script> <script> var app = new Framework7({ root: '#app', name: 'My App', id: 'main_app', panel: { swipe: 'left' }, touch: { tapHold: true //enable tap hold events }, dialog: { // set default title for all dialog shortcuts title: '提示框', // change default "OK" button text buttonOk: '确定', buttonCancel: '关闭' }, // Add default routes routes: [ { path: '/about/', url: 'about.html', } ] }); /** * Framework7 * * 封装原则：在未来可能使用其他框架的前提下，在保证框架的可用性的同时，尽可能地提高复用性，尽量去除Framework7的个性化代码 **/ function SeabootFramework7(option) { var root = $(document); if (typeof option !== 'undefined') { initDom(option); root = option.dom; } /** * 查找dom对象 * */ function initDom(option) { if (typeof option.elem === 'string') { option.dom = root.find(option.elem); } else if (typeof option.elem === 'object') { option.dom = option.elem; } else { throw 'elem is undefined!'; } } /** * 绑定值 */ function bindValue(dom, data) { dom.find('*').each(function () { var d = $(this), id = d.attr('id'); if (typeof id !== 'undefined') { var v = data[id]; if (typeof v !== 'undefined') { d.text(v); } } }) } /** * 内置模版渲染 **/ function compile(str, data) { return Template7.compile(str)(data); } //-----------组件-------------- //--Accordion start---- function Accordion(dom, option) { //格式：var adapter = {renderItem: '', renderContent: '', initItem:'',initContent:''}; var adapter = option.adapter, arr = option.data; /** * 渲染html */ function renderHtml() { var list = [arr.length]; for (var i = 0, len = arr.length; i < len; i++) { list[i] = '<li class="accordion-item "><div class="item-content item-link">' + adapter.renderItem(arr[i], i) + '</div><div class="accordion-item-content"></div></li>'; } var html = '<div class="list accordion-list" style="margin-top: 8px;padding: 0 8px"><ul style="border:1px solid #c8c7cc">' + list.join('') + '</ul></div>'; dom.html(html); } function renderChild() { var lis = dom.find('ul:first').children('li'); var isInitItem = typeof adapter.initItem === 'function'; var isInitContent = typeof adapter.initContent === 'function'; var i = 0; lis.each(function () { var d = arr[i] , li = $(this) , itemDom = li.children('.item-content') , contentDom = li.children('.accordion-item-content'); //渲染html contentDom.html(adapter.renderContent(itemDom, d, i)); //事件及其它 if (isInitItem) { adapter.initItem(itemDom, d, i); } //事件及其它 if (isInitContent) { adapter.initContent(contentDom, d, i); } i++; }); } function create() { renderHtml(); renderChild(); } return { setAdapter: function (a) { adapter = a; }, create: create } } //--Accordion end---- /** * 组件的封装原则： * 参照android的做法，一个组件一个对象，因为没有布局的概念，所以只有一种接口规范， * 全局统一样式，不提供个性化css微调，必须调整直接操作dom * * 构造函数：ListView(dom, option)， * dom： dom对象 * option： elem: 元素 * data: 数据 * adapter:适配器，个性化代码渲染 * * adapter：提供给用户创建一个组件的回调函数，至少包含下面两个函数 * renderItem： 第一个回调函数必定是data，返回值必须是html字符串 * initItem： 初始化代码，第一个回调参数必定是dom，第二个回调必定是data **/ //--ListView start-- function ListView(dom, option) { //格式：var adapter = {renderItem: renderItem(data),initItem:initItem(dom, data)}; var adapter = option.adapter, arr = option.data; //供未来微调 function renderHtml() { var list = [arr.length]; for (var i = 0, len = arr.length; i < len; i++) { list[i] = '<li>' + adapter.renderItem(arr[i], i) + '</li>'; } var html = '<div class="list links-list"><ul>' + list.join('') + '</ul></div>'; //完成渲染 dom.html(html); } function renderChild() { var lis = dom.find('ul:first').children('li'); var isInitItem = typeof adapter.initItem === 'function'; if (isInitItem) { var i = 0; lis.each(function () { var d = arr[i], li = $(this); //事件及其它 adapter.initItem(li, d, i); i++; }); } } function create() { renderHtml(); renderChild(); } return { setAdapter: function (a) { adapter = a; }, create: create } } //--ListView end-- /** * 函数 **/ return { bindValue: bindValue, compile: compile, createAccordion: function (o) { initDom(o); return new Accordion(o.dom, o); }, createListView: function (o) { initDom(o); return new ListView(o.dom, o); } }; } var boot = SeabootFramework7(); //test listView var listView = boot.createListView({ elem: '#container2' , data: [{name:'xiaoming'}, {name:'xiaodong'}] , adapter: { renderItem: function (data, i) { return '<a href="#">' + '<div style="text-indent: 10px;"><span>' +data.name+ '</span></div>' + '<div>' + i + '</div>' + '</a>'; }, initItem: function (dom, data, i) { dom.click(function () { console.log(i); }) } } }); //创建函数，供触发加载 listView.create(); //test accordion var accordion = boot.createAccordion({ elem: '#container' , data: [{name:'xiaoming'}, {name:'xiaodong'}] , adapter: { renderItem: function (data, i) { return '<div class="item-inner" style="font-size: 20px;">' + '<div class="item-title">' + data.name + '</div>' + '<div>' +i+ '</div>' + '</div>'; }, renderContent: function (dom, data, i) { return '<div class="list links-list">' + '<ul class="location_ui_city">' + '<li value="3bb035f7-28dd-4ba0-b358-d567d62901fb"><a href="#" class="">' + '<div style="text-indent: 10px;">'+data.name + '--' + '</div>' + '<div>3</div>' + '</a></li>' + '<li value="1ccca336-d662-4ebd-a998-02dc0f626bf3"><a href="#" class="">' + '<div style="text-indent: 10px;">'+i+'</div>' + '<div>657</div>' + '</a></li>' + '</ul>' + '</div>'; }, initItem: function (dom, data, i) { boot.bindValue(dom, data); }, initContent: function (dom, data, i) { dom.click(function () { console.log(i) }); } } }); accordion.create(); </script> </html> 