一种方便手机app九宫格、列表开发的js组件的制作方法
【技术领域】
[0001]本发明涉及软件技术领域，尤其涉及一种方便手机app九宫格、列表开发的js组件，主要是应用于手机app开发中实现九宫格、列表页的相应开发。
【背景技术】
[0002]互联网已经进入到了成熟的时代，现在也越来越重视与用户之间的交流，这就必不可少需要通讯工具，因此，智能手机逐渐成为绝大部分网民的必备品。无论是10S还是Android系统，用户期望的依然是更方便的浏览方式，因此app就被人们所期待。
[0003]九宫格和列表作为了大多数手机app中必有的部分，方便九宫格、列表开发的js组件也就成为了一种能被经常使用的组件，具备了一定的使用价值。
【发明内容】
[0004]为了解决该问题，本发明提出了一种方便手机app九宫格、列表开发的js组件，提供了 app页面快速完成九宫格页面和列表页面的方法。
[0005]本发明的技术方案是:
通过将html九宫格及其列表代码提前封装到js函数中，用户根据参数的规定格式，组成参数，通过调用组件中的相关函数进行html代码自动生成并填充到相应的位置，从而达到九宫格和列表代码编写的功能。
[0006]组件的程序代码如下:
1)九宫格组件speedDial.js代码如下 funct1n apeedDial (h，1，list, divid, backFun){ var html = ’ ’ ； for (var i=0;i〈h;i++){
html += <div class=〃lgd〃 style=〃height:’+(100/h)+，％;width: 100%"〉，;
for (var j=0;j〈l;j++){ var shu = i木j + j; if (shu<list.length&&i〈h_l){
html += 〃〈div class=’anxia’ onclick=’〃+backFun+〃(〃+shu+
")，style:，height:100%;width:"+(100/1)+"%，>"+
〃〈div style=iheight:70%;display:〃+
〃-webkit-box!important;display: box!important;posit1n:relative;〃+
〃-webkit-box-align: center;box-align: cent
er;，,+
〃〈div style=iposit1n:relative;-webkit-bo
x-flex: 〃+ 〃l;box_flex: 1;J ></div>//+〃〈div style=’height:70%;’>〃+
,,〈img name=’tb’ src=’"+list [sum].tb+
〃’ style=’ height: 100%; ’ alt=’ pic’ />〃+
〃〈/div>"+
〃〈div style=iposit1n:relative;-webkit-bo
x-flex: 〃+ 〃l;box_flex: 1;J ></div>//+
〃〈/div>"+
"
"+list[sum].bt+"〈/p>"+
〃〈/
}else if(shu<list.length){
html += 〃〈div class=’anxia’ onclick=’〃+backFun+〃(〃+shu+
")，style:，height:100%;width:"+(100/1)+"%，>"+
〃〈div style=iheight:70%;display:〃+^-webkit-box !important;display: box !important;posit1n:relative;〃+
〃-webkit-box-align: center;box-align: cent
er;，,+
〃〈div style=iposit1n:relative;-webkit-bo
x-flex: 〃+ 〃l;box_flex: 1;J ></div>//+
〃〈div style=’height:70%;’>〃+
,,〈img src=’,,+list [sum].tb+
〃’ style=’ height: 100%; ’ alt=’ pic’ />〃+
〃〈/div>"+
〃〈div style=iposit1n:relative;-webkit-bo
x-flex: 〃+ 〃l;box_flex: 1;J ></div>//+
〃〈/div>"+
"
"+list[sum].bt+"〈/p>"+
〃〈/
}else {
html += 〃〈div class=’kg’>〈/div>〃；
}
}
html += ’ </div>i ;
}
$$ (divid).1nnerHTML = html;
}
组件函数apeedDial (h，1，list, divid, backFun);参数含义如下:h表示要生成的九宫格的行数，1表示要生成的九宫格的列数，list是标题和图片路径生成的json串，divid表示要展示的区域div的id，backFun表示九宫格每个格子点击后触发的函数；
函数根据h，1将divid代表的区域均分成相应的格数，然后将list中的标题和图片根据设置好的样式生成一个个小格子的代码，然后根据行列将小格子的代码组成整块区域的代码，然后将这块代码填充到相应的区域，从而完成九宫格页面的代码的编写，当用手点击页面上生成的小格子后，会触发函数backFun，函数backFun需要用户自己编写，有一个参数i，i表示点击的某一个小格子，从左到右，自上而下，从0往下依次递增。
[0007]2)九宫格样式speedDial.css代码如下.anxia {
text-decorat1n: none;z-1ndex: 0;border-style: solid; border-width:thin thin Opx Opx;border-color:#E6E6E6;
-webkit-box-orient: vertical;box-orient: vertical;text-align:center;
}.anxia:active {
border: none;text-decorat1n:none;z-1ndex:0;
-webkit-box-orient: vertical;box-orient: vertical;
}.anxiad {
text-decorat1n: none;z-1ndex: 0;border-style: solid; border-width:thin thin thin Opx;border-color:#F0EFF5; -webkit-box-orient:vertical;box-orient:vertical;text-align: center;
}.anxiad:active {
border: none;text-decorat1n: none;z-1ndex: 0;
-webkit-box-orient: vertical;box-orient: vertical;
}
? kg {
text-decorat1n: none;z-1ndex: 0;border-style: sol id;text-align:
center;
border-width:thin thin thin Opx;border-color:#F0EFF5;
}
? lgd{
display: -webkit-box !important; display: box !important; posit1n: relative;
}
speedDial.css主要是针对不同位置的小格子进行内部定位和外部边界的设置。
[0008]3) list, js
funct1n list(list, divid, backFun) { var html = ’ ’ ；
for (var i=0;i〈list.length;i++) { var listh = list[i];html += 〃〈div style=’height:2.8em;display: 〃+
〃-webkit-box!important;display: box!important;posit1n:relative;〃+
〃-webkit-box-align: center;box-align: center; ’ 〃+ //onclick=i 〃+backFun+"("+i+")，>"+
"〈div style=’height:100%;’>"+
〃〈input id=i tW type=’image’ src=’〃+listh.headertp+
"，style:，height:100%;，/>"+
〃〈/div>"+
〃〈div style=i height:70%;posit1n:relative; 〃+
〃-webkit-box-flex:1;box-flex:1;-webkit-box-orient: vertical;〃+
^box-orient:vertical;text-align: left;J>〃+
〃〈div style=iheight:50%;display:-webkit_box〃+
〃!important;display: box!important;posit1n:relative;〃+
〃-webkit-box-align:center;box-align:center;J>〃+
〃〈div style=’ font-size:1.2em;font-weig
ht:600;，>"+
listh.zt+〃〈/div>〃+
〃〈/div>"+
〃〈div style=iheight:50%;display:-webkit_box〃+
〃!important;display: box!important;posit1n:relative;〃+
^-webkit-box-align:center;box-align:center;J>〃+ 〃〈div>〃+listh.js+〃〈/div>〃+
〃〈/div>"+
〃〈/div>"+
〃〈div style=’ height:70%;width:17%;J>〃+
〃〈input type=iimage’ src=i〃+listh.endtp+
"，style:，height:90%;width:90%;，/>"+
〃〈/div>"+
〃〈/
}
$$ (divid).1nnerHTML = html;
}
组件函数list (list，divid，backFun);参数含义如下:
list是标题、内容和图片路径生成的json串，divid表示要展示的区域div的id，backFun表示点击列表时触发的函数；
函数根据参数循环生成每一行的html代码，最终组成整个列表的代码，填充到相应的位置。
[0009]本发明的特点是: 1)采用html5+css3+js的开发模式，手机app开发人员使用起来方便简单；
2)组件使用简单，开发人员使用难度低；
3)组件样式简单，开发人员后期维护更新起来比较简单，利于组件的完善和使用；
4)采用开发的js组件，能够快速的完成九宫格页面，列表页面的开发布局。
[0010]本发明的有益效果是
1)解决了对于开发者开发app九宫格页面时耗费时间长问题，其简单的调用方法，更适合初学者方便的使用；
2)节约开发时间，从而节约项目的开发成本问题；
3)适配性比较高，开发者可以放心方便的使用。
【具体实施方式】
[0011]下面对本发明的内容进行更加详细的阐述:
一种方便手机app九宫格、列表开发的js组件提供了 app页面快速完成九宫格页面和列表页面的方法；开发者通过简单的调用js组件中的函数，根据自己的需求，完成页面的设计；此组件既能完成了页面的设计，又能节省了大量时间和项目的开发成本，是一种非常方便的js组件。
[0012]其实现步骤如下:
1)九宫格组件speedDial.js
第一步:在相应页面引入 speedDial.js, speedDial.css;
第二步:将相应参数转化成json格式，调用函数
apeedDial (h, 1, list, divid, backFun)