<!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>
