，生成九宫格代码，填充到相应位置。
[0013]下面是调用的实例: funct1n init () {
var List =[{
"zt": 〃 申报缴税"，"tb": "image/sbjs.png"
}，{
”tX”: ” 定客页查询"，"tb": "image/decx.png"
}，{
"zt":"退税通知"，"tb": "image/tstz.png"
}，{
"zt":"预约办税"，"tb": "image/yybs.png"
}，{
"zt":"办税厅状况 〃，〃tb〃: 〃image/bstzk.png"
}，{
"zt":"违法违章"，"tb": "image/wfwz.png"
}，{
"zt": ” 发票流向 ' "tb": "image/fplx.png"
}，{
” tX”..” 电子发票 ' "tb": "image/dzfp.png" }，{
"zt〃:〃 纳税人登记 〃，〃tb〃: 〃image/nsrdj.png"
}，{
〃zt〃: 〃 税费计算 〃，〃tb〃: "image/sf js.png〃
}，{
"zt": ” 涉税提酉星"，"tb": "image/sstx.png"
}
]；
apeedDial(3, 4, List, ’listb’, 〃onclickFun〃);
}
第三步:编写函数onclickFun(i)，对事件进行相应的处理。
[0014] 2)列表组件 list, js
第一步:在相应页面引入组件list, js;
第二步:将要展示在列表中的图片、文字内容等参数转化成json格式，然后调用函数list(list, divid, backFun)；
下面是调用的实例: funct1n init () { var List =[{
〃zt〃:〃办税指南", "js":"办理税务的相关步骤。",
"headertp":"image/bszn.png", "endtp":"images/yjt.png"
}，{
〃zt〃:〃法律法规〃，"js":"税局的相关法律法规。〃，
//11 , // //./ γ?? r*”” 1 , // //./.,”
headertp:1mage/t_Ltg.png，endtp:1mages/yjt.png
}
]；
list (List, ’listb’);
}
第三步:编写函数listb (i)，对事件进行相应的处理。
【主权项】
1.一种方便手机app九宫格、列表开发的js组件，其特征在于，通过将html九宫格及其列表代码提前封装到js函数中，用户根据参数的规定格式，组成参数，通过调用组件中的相关函数进行html代码自动生成并填充到相应的位置，从而达到九宫格和列表代码编与的功能2.根据权利要求1所述的js组件，其特征在于，九宫格组件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: center;，,+ 〃〈div style=iposit1n:relative;-webkit-box-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-box-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: center;，,+ 〃〈div style=iposit1n:relative;-webkit-box-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-box-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往下依次递增。3.根据权利要求1所述的js组件，其特征在于， 九宫格样式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主要是针对不同位置的小格子进行内部定位和外部边界的设置。4.根据权利要求1所述的js组件，其特征在于， list, jsfunct1n 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-weight: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代码，最终组成整个列表的代码，填充到相应的位置。
【专利摘要】本发明提供一种方便手机app九宫格、列表开发的js组件，属于计算机软件技术领域，js组件是一种基于html5+css3+js的实现手机app简单、快速布局，实现相应功能的组件，即通过简单的调用js组件的函数来实现app主页九宫格布局和列表页的布局，从而达到简化开发，节省开发时间的目的。通过简单的函数调用，js组件完成对应页面html代码的编写，然后加入到对应的区域，来实现页面布局的功能，保证了开发的简单，方便，可靠。
【IPC分类】G06F9/44
【公开号】CN105404502
【申请号】CN201510678384
【发明人】肖庆超, 程林, 杨培强
【申请人】浪潮软件集团有限公司
【公开日】2016年3月16日
【申请日】2015年10月20日