工程中心頭端考核portal模版制作內(nèi)容

iPanelTechnologies

.

Portal模板制作規(guī)范

ver

1.0

2010年11月24日

（本文檔

應(yīng)用開發(fā)七部

）

文檔

日志

日期

內(nèi)容

人

2010-11-24

Portal模板制作修改

雷剛強(qiáng)

2010-11-25

細(xì)節(jié)完善

廖蔚藍(lán)

目

錄

1.

概述 1

2.

模板設(shè)計方案 1

2.1.

2.2.

2.3.

2.4.

2.5.

頁面必須包含元素 1

一二級欄目編寫規(guī)范 1

海報編寫規(guī)范 3

跑馬燈編寫規(guī)范規(guī)范 4

重要規(guī)范規(guī)定信息 6

1.概述

制作不同的Portal模版是為了方便用戶根據(jù)自己的喜好來選擇不同模版

式樣來發(fā)布應(yīng)用，也方便開發(fā)

系統(tǒng)與模版之間的管理。

2.模板設(shè)計方案

2.1.

頁面必須包含元素

在頁面中必須包含一個醒目的一級欄目列表信息、二級欄目框、海報框、跑馬燈框、日期框、天氣預(yù)報欄目框，用戶操作提示信息列表（返回、主頁、退出等）。

2.2.

一二級欄目編寫規(guī)范

2.2.1、在一級欄目、二級欄目可以采用json表達(dá)式來定義，

例如：

<!--mavarma

{

enu-start-->

enu=[

name:["用戶管理","USERCONTROL"],

pic:["icon05.png","icon15.png"],sub :[

{

name:["

自

動

搜

索

","AUTO

SEARCH"],

url:"ui://search_result.htm",type:"dtv"},

{

name:["

系

統(tǒng)

設(shè)

置

","SYSTEM

SET"],

url:"ui://system_set.htm",type:"dtv"},

{

name:["

","

CHECK"],

郵

件

查

詢

url:"ui:// _man.htm",type:"dtv"}

]

},{

name:["數(shù)字電視","DTV"],

pic:["icon06.png","icon16.png"],sub :[

{

name:["

重

慶

頻

道

","RED

"}},

","PAY

TV"],

url:"",type:"channel",servi

:{serviceId:1104,serviceName:"重慶

{

name:["

頻

道

TV"],

url:"",type:"channel",servi

:{serviceId:902,serviceName:"首播劇場"}},

{

name:["

道 ","HD

TV"],

頻

url:"",type:"channel",servi

:{serviceId:3001,serviceName:" 綜合"}},

{

name:["

省

級

","Provin

l

TV"],

url:"",type:"channel",servi

:{serviceId:3002,serviceName:"浙江

"}},

{name:["音頻廣播","MUSIC"],url:"",type:"music"}

]

},{

name:["互動影視","HDTV"],

pic:["icon04.png","icon14.png"],sub :[

{name:["VOD","VOD"],url:"../vod/index.htm",type:"iptv"}

]

},{

name:["互動社區(qū)","Community"],

pic:["28_0.png","28_1.png"],sub :[

{

name:["

電

視

商

城

","BASIC

VOD"],

url:"../shop/index.htm",type:"iptv"},

{

name:["

互

動

音

樂

","BASIC

VOD"],

url:"

",type:"iptv"},

{

name:["

","BASIC

VOD"],

社

區(qū)

url:"../news/index.htm",type:"iptv"},

{

name:["

天

氣

預(yù)

報

","BASIC

VOD"],

url:"../weather/index.htm",type:"iptv"},

{

name:["

福

利

","BASIC

VOD"],

url:"../lottery/login.htm",type:"iptv"},

{

name:["

雙

向

預(yù)

覽

","BASIC

VOD"],

url:"",type:"channel",servi

]

}

];

:{serviceId:902,serviceName:"首播劇場"}}

<!--ma

enu-end-->

2.2.2、定義的時候必須注意以下幾點：

1、Varma

enu這個變量必須定義在<!--ma

enu-start-->，

<!--ma

enu-end-->這2個標(biāo)記中間。

2、一定要定義好一二級欄目名稱、

路徑、跳轉(zhuǎn)位置等屬性。其中：

ma enu表示所有一級欄目的集合。

name表示一級欄目的名稱。

pic表示一級欄目圖標(biāo)的路徑。

4）sub

①sub

表示一級欄目中包含的二級欄目集合：里面name表示二級欄目名稱。

②url表示點擊該按鈕時要跳轉(zhuǎn)到的路徑。

③type表示二級欄目的類型，當(dāng)type=“channel”后面要有

servi

:{serviceId:902,serviceName:"首播劇場"}格式的字段。

2.3.

海報編寫規(guī)范

2.3.1、海報的json信息定義如下：

varmovieList=newArray();movieList[0]=[

//{

name:"",

pic:"0_1.jpg",

"},//常見問答

url:"

//{name:"",pic:"0_2.jpg",url:"

"}//用戶手冊pic:"8_1.jpg",

"+CAID},//界

{

name:"",

url:"

面更換

{name:"",pic:"8_2.jpg",url:"ui://systemSetting.htm?3"}//服務(wù)信息

];

movieList[1]=[

{name:"",pic:"1_1.jpg",url:"

"},//家庭

{name:"",pic:"1_2.jpg",url:"

"}//電視郵

箱

{name:"",pic:"1_2.jpg",url:"ui://systemSetting.htm?3"}

{name:"",pic:"2_1.jpg",url:"

{name:"",pic:"2_2.jpg",url:"

"},//美食天地

"}//天氣預(yù)

報

];

1、movieList[0]-movieList[n]的

json信息必須在<!--movieList-start-->，

<!--movieList-end-->2個標(biāo)記之間。

2、movieList[0]表示該海報信息屬于第一個一級欄目，依次類推。

3、movieList表示海報信息的一個集合，其中每一個元素表示一個海報的信息。

1）Name表示海報的名稱，2）pic表示海報點擊海報時跳轉(zhuǎn)到的路徑。

的路徑，3）url表示

2.3.2、海報

命名規(guī)范：

1、只有一級欄目有海報，如果portal只有幾張不隨一級欄目切換的海報。就默認(rèn)取第一個一級欄目中海報顯示。

2、每一級欄目的海報必須以”_”加有序數(shù)字顯示。例如，第一個一級欄目有四張海報：格式如下：“haibao0_1.jpg”,“haibao0_2.jpg”,“haibao0_3.jpg”,“haibao0_4.jpg”。

3、第二個一級欄目的四張海報命名格為：“haibao1_1.jpg”,“haibao1_2.jpg”,“haibao1_3.jpg”,“haibao1_4.jpg”,后面的海報以此類推。

2.3.3、海報位置規(guī)范：

1、海報顯示位置的

命名規(guī)則：

1）海報位置的img

可以在html里面的任何位置,但必須有width、

height和src屬性，id必須為movie0到movieN，N為每個一級欄目顯示的海報張數(shù)減1。

<imgsrc="pop_1.jpg"width="179"height="344"id="movie0"/>

<imgsrc="pop_2.jpg"width="179"height="344"id="movie1"/>

<imgsrc="pop_3.jpg"width="179"height="344"id="movie2"/>

<imgsrc="pop_4.jpg"width="179"height="344"id="movie3"/>

2.4.

跑馬燈編寫規(guī)范規(guī)范

2.4.1、一級欄目跑馬燈json信息如下：

varma

enuMarqueeList=newArray();

ma enuMarqueeList[0]=[

{name:"",context:"d=CAID"}

];

ma enuMarqueeList[1]=[

{name:"",context:"d=CAID"}

];

1、該

json

須在<!--ma

enuMarqueeList-start-->

信息必

，

<!--ma

enuMarqueeList-end-->2個標(biāo)記這間。

2、ma

推。

enuMarqueeList[0]表示第一個一級欄目的跑馬燈信息，依次類

2.4.2、二級欄目跑馬燈json信息如下：

varsubsub

MarqueeList=newArray();MarqueeList[0]=[

{name:"",context:"x.htm?smid=CAID"},

{name:"",context:"x.htm?smid=CAID"},

{name:"",context:"x.htm?smid=CAID"},

{name:"",context:"x.htm?smid=CAID"}

];

sub

MarqueeList[1]=[

{name:"",context:"

x.htm?smid=CAID"},

{name:"",context:"x.htm?smid=CAID"},

{name:"",context:"x.htm?smid=CAID"},

{name:"",context:"x.htm?smid=CAID"}

];

1、該json信息必須在<!--sub

MarqueeList-start-->

和<!--sub

MarqueeList-end-->2個標(biāo)記之間。

2、sub

MarqueeList[0]表示是第一個一級欄目，里面的每一條

json

對應(yīng)該一級欄目下所對應(yīng)的二級欄目的跑馬燈信息。

2.4.3、海報的跑馬燈json信息如下：

varmovieMarqueeList=newArray();movieMarqueeList[0]=[

{name:"",context:"x.htm?smid=CAID"},

{name:"",context:"x.htm?smid=CAID"}

];

movieMarqueeList[1]=[

{name:"",context:"x.htm?smid=CAID"},

{name:"",context:"x.htm?smid=CAID"}

];

movieMarqueeList[2]=[

{name:"",context:"x.htm?smid=CAID"},

{name:"",context:"x.htm?smid=CAID"}

];

1、該json

信息必須在<!--movieMarqueeList-start-->，

<!--movieMarqueeList-end-->2個標(biāo)記之間。

2、movieMarqueeList[0]表示第一個一級欄目，json數(shù)組信息里面的第一個表示左邊的海報對應(yīng)的跑馬燈信息，第二個表示右邊的海報對應(yīng)的跑馬燈信息，依次類推。

3、跑馬燈信息里面的name表示跑馬燈的名字，context表示跑馬燈的內(nèi)容信息。

（如果全局只有一個跑馬燈，默認(rèn)去取第一個一級欄目的跑馬燈）

2.5.

重要規(guī)范規(guī)定信息

1．Json表達(dá)式內(nèi)不得使用注釋。

2．Json表達(dá)式內(nèi)不得使用變量，必須全部都是字符串信息。

3．默認(rèn)海報

movie0，movie1內(nèi)的