CN105404502A - 一种方便手机app九宫格、列表开发的js组件 - Google Patents

一种方便手机app九宫格、列表开发的js组件 Download PDF

Info

Publication number
CN105404502A
CN105404502A CN201510678384.7A CN201510678384A CN105404502A CN 105404502 A CN105404502 A CN 105404502A CN 201510678384 A CN201510678384 A CN 201510678384A CN 105404502 A CN105404502 A CN 105404502A
Authority
CN
China
Prior art keywords
box
list
div
webkit
height
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201510678384.7A
Other languages
English (en)
Inventor
肖庆超
程林
杨培强
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Software Group Co Ltd
Original Assignee
Inspur Software Group Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Inspur Software Group Co Ltd filed Critical Inspur Software Group Co Ltd
Priority to CN201510678384.7A priority Critical patent/CN105404502A/zh
Publication of CN105404502A publication Critical patent/CN105404502A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种方便手机app九宫格、列表开发的js组件，属于计算机软件技术领域，js组件是一种基于html5+css3+js的实现手机app简单、快速布局，实现相应功能的组件，即通过简单的调用js组件的函数来实现app主页九宫格布局和列表页的布局，从而达到简化开发，节省开发时间的目的。通过简单的函数调用，js组件完成对应页面html代码的编写，然后加入到对应的区域，来实现页面布局的功能，保证了开发的简单，方便，可靠。

Description

一种方便手机app九宫格、列表开发的js组件
技术领域
本发明涉及软件技术领域，尤其涉及一种方便手机app九宫格、列表开发的js组件，主要是应用于手机app开发中实现九宫格、列表页的相应开发。
背景技术
互联网已经进入到了成熟的时代，现在也越来越重视与用户之间的交流，这就必不可少需要通讯工具，因此，智能手机逐渐成为绝大部分网民的必备品。无论是IOS还是Android系统，用户期望的依然是更方便的浏览方式，因此app就被人们所期待。
九宫格和列表作为了大多数手机app中必有的部分，方便九宫格、列表开发的js组件也就成为了一种能被经常使用的组件，具备了一定的使用价值。
发明内容
为了解决该问题，本发明提出了一种方便手机app九宫格、列表开发的js组件，提供了app页面快速完成九宫格页面和列表页面的方法。
本发明的技术方案是：
通过将html九宫格及其列表代码提前封装到js函数中，用户根据参数的规定格式,组成参数，通过调用组件中的相关函数进行html代码自动生成并填充到相应的位置，从而达到九宫格和列表代码编写的功能。
组件的程序代码如下：
1)九宫格组件speedDial.js代码如下
functionapeedDial(h,l,list,divid,backFun){
varhtml='';
for(vari=0;i<h;i++){
html+='<divclass="lgd"style="height:'+(100/h)+'%;width:100%">';
for(varj=0;j<l;j++){
varshu=i*j+j;
if(shu<list.length&&i<h-1){
html+="<divclass='anxia'onclick='"+backFun+"("+shu+
")'style='height:100%;width:"+(100/l)+"%'>"+
"<divstyle='height:70%;display:"+
"-webkit-box!important;display:box!important;position:relative;"+
"-webkit-box-align:center;box-align:center;'>"+
"<divstyle='position:relative;-webkit-box-flex:"+"1;box-flex:1;'></div>"+
"<divstyle='height:70%;'>"+
"<imgname='tb'src='"+list[sum].tb+
"'style='height:100%;'alt='pic'/>"+
"</div>"+
"<divstyle='position:relative;-webkit-box-flex:"+"1;box-flex:1;'></div>"+
"</div>"+
"<p>"+list[sum].bt+"</p>"+
"</div>";
}elseif(shu<list.length){
html+="<divclass='anxia'onclick='"+backFun+"("+shu+
")'style='height:100%;width:"+(100/l)+"%'>"+
"<divstyle='height:70%;display:"+
"-webkit-box!important;display:box!important;position:relative;"+
"-webkit-box-align:center;box-align:center;'>"+
"<divstyle='position:relative;-webkit-box-flex:"+"1;box-flex:1;'></div>"+
"<divstyle='height:70%;'>"+
"<imgsrc='"+list[sum].tb+
"'style='height:100%;'alt='pic'/>"+
"</div>"+
"<divstyle='position:relative;-webkit-box-flex:"+"1;box-flex:1;'></div>"+
"</div>"+
"<p>"+list[sum].bt+"</p>"+
"</div>";
}else{
html+="<divclass='kg'></div>";
}
}
html+='</div>';
}
$$(divid).innerHTML=html;
}
组件函数apeedDial(h,l,list,divid,backFun)；参数含义如下：h表示要生成的九宫格的行数，l表示要生成的九宫格的列数，list是标题和图片路径生成的json串，divid表示要展示的区域div的id，backFun表示九宫格每个格子点击后触发的函数；
函数根据h，l将divid代表的区域均分成相应的格数，然后将list中的标题和图片根据设置好的样式生成一个个小格子的代码，然后根据行列将小格子的代码组成整块区域的代码，然后将这块代码填充到相应的区域，从而完成九宫格页面的代码的编写，当用手点击页面上生成的小格子后，会触发函数backFun，函数backFun需要用户自己编写，有一个参数i，i表示点击的某一个小格子，从左到右，自上而下，从0往下依次递增。
2)九宫格样式speedDial.css代码如下
.anxia{
text-decoration:none;z-index:0;border-style:solid;
border-width:thinthin0px0px;border-color:#E6E6E6;
-webkit-box-orient:vertical;box-orient:vertical;text-align:center;
}
.anxia:active{
border:none;text-decoration:none;z-index:0;
-webkit-box-orient:vertical;box-orient:vertical;
}
.anxiad{
text-decoration:none;z-index:0;border-style:solid;
border-width:thinthinthin0px;border-color:#F0EFF5;
-webkit-box-orient:vertical;box-orient:vertical;text-align:center;
}
.anxiad:active{
border:none;text-decoration:none;z-index:0;
-webkit-box-orient:vertical;box-orient:vertical;
}
.kg{
text-decoration:none;z-index:0;border-style:solid;text-align:center;
border-width:thinthinthin0px;border-color:#F0EFF5;
}
.lgd{
display:-webkit-box!important;
display:box!important;
position:relative;
}
speedDial.css主要是针对不同位置的小格子进行内部定位和外部边界的设置。
3)list.js
functionlist(list,divid,backFun){
varhtml='';
for(vari=0;i<list.length;i++){
varlisth=list[i];
html+="<divstyle='height:2.8em;display:"+
"-webkit-box!important;display:box!important;position:relative;"+
"-webkit-box-align:center;box-align:center;'"+"onclick='"+backFun+"("+i+")'>"+
"<divstyle='height:100%;'>"+
"<inputid='tb'type='image'src='"+listh.headertp+
"'style='height:100%;'/>"+
"</div>"+
"<divstyle='height:70%;position:relative;"+
"-webkit-box-flex:1;box-flex:1;-webkit-box-orient:vertical;"+
"box-orient:vertical;text-align:left;'>"+
"<divstyle='height:50%;display:-webkit-box"+
"!important;display:box!important;position:relative;"+
"-webkit-box-align:center;box-align:center;'>"+
"<divstyle='font-size:1.2em;font-weight:600;'>"+
listh.zt+"</div>"+
"</div>"+
"<divstyle='height:50%;display:-webkit-box"+
"!important;display:box!important;position:relative;"+
"-webkit-box-align:center;box-align:center;'>"+
"<div>"+listh.js+"</div>"+
"</div>"+
"</div>"+
"<divstyle='height:70%;width:17%;'>"+
"<inputtype='image'src='"+listh.endtp+
"'style='height:90%;width:90%;'/>"+
"</div>"+
"</div>";
}
$$(divid).innerHTML=html;
}
组件函数list(list,divid,backFun)；参数含义如下：
list是标题、内容和图片路径生成的json串，divid表示要展示的区域div的id，backFun表示点击列表时触发的函数；
函数根据参数循环生成每一行的html代码，最终组成整个列表的代码，填充到相应的位置。
本发明的特点是：
1)采用html5+css3+js的开发模式，手机app开发人员使用起来方便简单；
2)组件使用简单，开发人员使用难度低；
3)组件样式简单，开发人员后期维护更新起来比较简单，利于组件的完善和使用；
4)采用开发的js组件，能够快速的完成九宫格页面，列表页面的开发布局。
本发明的有益效果是
1）解决了对于开发者开发app九宫格页面时耗费时间长问题，其简单的调用方法，更适合初学者方便的使用；
2）节约开发时间，从而节约项目的开发成本问题；
3）适配性比较高，开发者可以放心方便的使用。
具体实施方式
下面对本发明的内容进行更加详细的阐述：
一种方便手机app九宫格、列表开发的js组件提供了app页面快速完成九宫格页面和列表页面的方法；开发者通过简单的调用js组件中的函数，根据自己的需求，完成页面的设计；此组件既能完成了页面的设计，又能节省了大量时间和项目的开发成本，是一种非常方便的js组件。
其实现步骤如下：
1）九宫格组件speedDial.js
第一步：在相应页面引入speedDial.js，speedDial.css;
第二步：将相应参数转化成json格式，调用函数
apeedDial(h,l,list,divid,backFun)，生成九宫格代码，填充到相应位置。
下面是调用的实例：
functioninit(){
varList=[{
"zt":"申报缴税","tb":"image/sbjs.png"
},{
"zt":"定额查询","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"
},{
"zt":"电子发票","tb":"image/dzfp.png"
},{
"zt":"纳税人登记","tb":"image/nsrdj.png"
},{
"zt":"税费计算","tb":"image/sfjs.png"
},{
"zt":"涉税提醒","tb":"image/sstx.png"
}
];
apeedDial(3,4,List,'listb',"onclickFun");
}
第三步：编写函数onclickFun(i)，对事件进行相应的处理。
2）列表组件list.js
第一步：在相应页面引入组件list.js;
第二步：将要展示在列表中的图片、文字内容等参数转化成json格式，然后调用函数list(list,divid,backFun)；
下面是调用的实例：
functioninit(){
varList=[{
"zt":"办税指南","js":"办理税务的相关步骤。",
"headertp":"image/bszn.png","endtp":"images/yjt.png"
},{
"zt":"法律法规","js":"税局的相关法律法规。",
"headertp":"image/flfg.png","endtp":"images/yjt.png"
}
];
list(List,'listb');
}
第三步：编写函数listb(i)，对事件进行相应的处理。

Claims (4)

1.一种方便手机app九宫格、列表开发的js组件，其特征在于，通过将html九宫格及其列表代码提前封装到js函数中，用户根据参数的规定格式,组成参数，通过调用组件中的相关函数进行html代码自动生成并填充到相应的位置，从而达到九宫格和列表代码编写的功能。
2.根据权利要求1所述的js组件，其特征在于，九宫格组件speedDial.js代码如下
functionapeedDial(h,l,list,divid,backFun){
varhtml='';
for(vari=0;i<h;i++){
html+='<divclass="lgd"style="height:'+(100/h)+'%;width:100%">';
for(varj=0;j<l;j++){
varshu=i*j+j;
if(shu<list.length&&i<h-1){
html+="<divclass='anxia'onclick='"+backFun+"("+shu+
")'style='height:100%;width:"+(100/l)+"%'>"+
"<divstyle='height:70%;display:"+
"-webkit-box!important;display:box!important;position:relative;"+
"-webkit-box-align:center;box-align:center;'>"+
"<divstyle='position:relative;-webkit-box-flex:"+"1;box-flex:1;'></div>"+
"<divstyle='height:70%;'>"+
"<imgname='tb'src='"+list[sum].tb+
"'style='height:100%;'alt='pic'/>"+
"</div>"+
"<divstyle='position:relative;-webkit-box-flex:"+"1;box-flex:1;'></div>"+
"</div>"+
"<p>"+list[sum].bt+"</p>"+
"</div>";
}elseif(shu<list.length){
html+="<divclass='anxia'onclick='"+backFun+"("+shu+
")'style='height:100%;width:"+(100/l)+"%'>"+
"<divstyle='height:70%;display:"+
"-webkit-box!important;display:box!important;position:relative;"+
"-webkit-box-align:center;box-align:center;'>"+
"<divstyle='position:relative;-webkit-box-flex:"+"1;box-flex:1;'></div>"+
"<divstyle='height:70%;'>"+
"<imgsrc='"+list[sum].tb+
"'style='height:100%;'alt='pic'/>"+
"</div>"+
"<divstyle='position:relative;-webkit-box-flex:"+"1;box-flex:1;'></div>"+
"</div>"+
"<p>"+list[sum].bt+"</p>"+
"</div>";
}else{
html+="<divclass='kg'></div>";
}
}
html+='</div>';
}
$$(divid).innerHTML=html;
}
组件函数apeedDial(h,l,list,divid,backFun)；参数含义如下：h表示要生成的九宫格的行数，l表示要生成的九宫格的列数，list是标题和图片路径生成的json串，divid表示要展示的区域div的id，backFun表示九宫格每个格子点击后触发的函数；
函数根据h，l将divid代表的区域均分成相应的格数，然后将list中的标题和图片根据设置好的样式生成一个个小格子的代码，然后根据行列将小格子的代码组成整块区域的代码，然后将这块代码填充到相应的区域，从而完成九宫格页面的代码的编写，当用手点击页面上生成的小格子后，会触发函数backFun，函数backFun需要用户自己编写，有一个参数i，i表示点击的某一个小格子，从左到右，自上而下，从0往下依次递增。
3.根据权利要求1所述的js组件，其特征在于，
九宫格样式speedDial.css代码如下
.anxia{
text-decoration:none;z-index:0;border-style:solid;
border-width:thinthin0px0px;border-color:#E6E6E6;
-webkit-box-orient:vertical;box-orient:vertical;text-align:center;
}
.anxia:active{
border:none;text-decoration:none;z-index:0;
-webkit-box-orient:vertical;box-orient:vertical;
}
.anxiad{
text-decoration:none;z-index:0;border-style:solid;
border-width:thinthinthin0px;border-color:#F0EFF5;
-webkit-box-orient:vertical;box-orient:vertical;text-align:center;
}
.anxiad:active{
border:none;text-decoration:none;z-index:0;
-webkit-box-orient:vertical;box-orient:vertical;
}
.kg{
text-decoration:none;z-index:0;border-style:solid;text-align:center;
border-width:thinthinthin0px;border-color:#F0EFF5;
}
.lgd{
display:-webkit-box!important;
display:box!important;
position:relative;
}
speedDial.css主要是针对不同位置的小格子进行内部定位和外部边界的设置。
4.根据权利要求1所述的js组件，其特征在于，
list.js
functionlist(list,divid,backFun){
varhtml='';
for(vari=0;i<list.length;i++){
varlisth=list[i];
html+="<divstyle='height:2.8em;display:"+
"-webkit-box!important;display:box!important;position:relative;"+
"-webkit-box-align:center;box-align:center;'"+"onclick='"+backFun+"("+i+")'>"+
"<divstyle='height:100%;'>"+
"<inputid='tb'type='image'src='"+listh.headertp+
"'style='height:100%;'/>"+
"</div>"+
"<divstyle='height:70%;position:relative;"+
"-webkit-box-flex:1;box-flex:1;-webkit-box-orient:vertical;"+
"box-orient:vertical;text-align:left;'>"+
"<divstyle='height:50%;display:-webkit-box"+
"!important;display:box!important;position:relative;"+
"-webkit-box-align:center;box-align:center;'>"+
"<divstyle='font-size:1.2em;font-weight:600;'>"+
listh.zt+"</div>"+
"</div>"+
"<divstyle='height:50%;display:-webkit-box"+
"!important;display:box!important;position:relative;"+
"-webkit-box-align:center;box-align:center;'>"+
"<div>"+listh.js+"</div>"+
"</div>"+
"</div>"+
"<divstyle='height:70%;width:17%;'>"+
"<inputtype='image'src='"+listh.endtp+
"'style='height:90%;width:90%;'/>"+
"</div>"+
"</div>";
}
$$(divid).innerHTML=html;
}
组件函数list(list,divid,backFun)；参数含义如下：
list是标题、内容和图片路径生成的json串，divid表示要展示的区域div的id，backFun表示点击列表时触发的函数；
函数根据参数循环生成每一行的html代码，最终组成整个列表的代码，填充到相应的位置。
CN201510678384.7A 2015-10-20 2015-10-20 一种方便手机app九宫格、列表开发的js组件 Pending CN105404502A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510678384.7A CN105404502A (zh) 2015-10-20 2015-10-20 一种方便手机app九宫格、列表开发的js组件

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510678384.7A CN105404502A (zh) 2015-10-20 2015-10-20 一种方便手机app九宫格、列表开发的js组件

Publications (1)

Publication Number Publication Date
CN105404502A true CN105404502A (zh) 2016-03-16

Family

ID=55470005

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510678384.7A Pending CN105404502A (zh) 2015-10-20 2015-10-20 一种方便手机app九宫格、列表开发的js组件

Country Status (1)

Country Link
CN (1) CN105404502A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111176769A (zh) * 2019-12-19 2020-05-19 贵阳语玩科技有限公司 一种Android端的多图片展示方法

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060206599A1 (en) * 2005-03-08 2006-09-14 Microsoft Corporation Dynamic service generation for legacy components
CN102043626A (zh) * 2010-12-23 2011-05-04 中国农业银行股份有限公司 extjs组件的封装方法及装置、用户界面的生成方法及系统
CN102622211A (zh) * 2011-01-27 2012-08-01 腾讯科技（深圳）有限公司 一种应用程序开发的方法和装置
CN103543991A (zh) * 2012-07-09 2014-01-29 百度在线网络技术（北京）有限公司 一种扩展浏览器功能的方法及浏览器系统
CN103677789A (zh) * 2012-09-25 2014-03-26 深圳市金正方科技有限公司 基于grid组件的列表数据展现方法及系统
CN103955364A (zh) * 2014-04-15 2014-07-30 南威软件股份有限公司 一种适用于手机的前端组件方法

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060206599A1 (en) * 2005-03-08 2006-09-14 Microsoft Corporation Dynamic service generation for legacy components
CN102043626A (zh) * 2010-12-23 2011-05-04 中国农业银行股份有限公司 extjs组件的封装方法及装置、用户界面的生成方法及系统
CN102622211A (zh) * 2011-01-27 2012-08-01 腾讯科技（深圳）有限公司 一种应用程序开发的方法和装置
CN103543991A (zh) * 2012-07-09 2014-01-29 百度在线网络技术（北京）有限公司 一种扩展浏览器功能的方法及浏览器系统
CN103677789A (zh) * 2012-09-25 2014-03-26 深圳市金正方科技有限公司 基于grid组件的列表数据展现方法及系统
CN103955364A (zh) * 2014-04-15 2014-07-30 南威软件股份有限公司 一种适用于手机的前端组件方法

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111176769A (zh) * 2019-12-19 2020-05-19 贵阳语玩科技有限公司 一种Android端的多图片展示方法

Similar Documents

Publication Publication Date Title
CN105740315B (zh) 一种多种屏幕响应式网页布局调整的方法
KR102161928B1 (ko) 정보 프레젠테이션 방법 및 장치
CN105320572B (zh) 浏览器异常处理方法、装置及系统
US9946529B2 (en) Function-based dynamic application extension framework
CN105760162A (zh) 混合型app软件的开发方法
EP3220249B1 (en) Method, device and terminal for implementing regional screen capture
WO2016150052A1 (zh) 利用图片生成链接的方法及系统
CN103049320A (zh) 在浏览器中启动外部应用程序的方法和装置
CN105354014A (zh) 应用界面渲染展示方法及装置
CN102214098A (zh) 一种基于WebKit浏览器引擎的动态页面数据采集方法
CN105955744A (zh) 一种移动跨平台开发系统及方法
CN104267949A (zh) 表单设计器及表单设计方法
CN109101225B (zh) 组件构造方法及装置、组件库架构及计算机可读存储介质
KR101161946B1 (ko) 스마트폰 어플리케이션 제작 시스템 및 그 방법
CN110555073A (zh) 一种数据处理方法、装置及电子设备和存储介质
CN104517307A (zh) 一种动画制作方法和装置
CN104424318A (zh) 页面元素的控制方法及装置
CN102693238B (zh) Widget应用方法、系统及多媒体终端
CN103955482A (zh) 一种在移动终端中调用服务的方法和设备
CN105824611A (zh) 一种基于Android智能操作平台的快速开发系统
CN111124564A (zh) 显示用户界面的方法及装置
CN103942231A (zh) 一种网页的显示方法及电子设备
CN105404502A (zh) 一种方便手机app九宫格、列表开发的js组件
CN105930166B (zh) 一种基于web界面弹出层的方法
CN103677772A (zh) 脚本编写方法及相应的脚本编写系统

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20160316

RJ01 Rejection of invention patent application after publication