專利名稱：在標(biāo)簽中文字豎排的方法和裝置的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及計算機領(lǐng)域，特別涉及一種在標(biāo)簽中文字豎排的方法和裝置。
背景技術(shù)：
在Web (互聯(lián)網(wǎng))應(yīng)用中，標(biāo)簽式布局非常常見。標(biāo)簽式布局包括水平標(biāo)簽式布局和垂直標(biāo)簽式布局。其中，垂直標(biāo)簽往往與水平標(biāo)簽結(jié)合，解決導(dǎo)航數(shù)據(jù)層次較深時使用不直觀的問題。在垂直標(biāo)簽中，其文字內(nèi)容也需要豎排，從而有利于用戶直觀地了解該標(biāo)簽的功能。目前在標(biāo)簽中實現(xiàn)文字豎排的方法為制作豎排文字圖片，然后在各個標(biāo)簽貼上相應(yīng)的豎排文字圖片，達到文字豎排的效果。在實現(xiàn)本發(fā)明的過程中，發(fā)明人發(fā)現(xiàn)現(xiàn)有技術(shù)至少存在以下問題通過圖片實現(xiàn)文字豎排的方法，缺乏靈活性，即使文字的微小改動，也需要重新制作標(biāo)簽文字圖片。

發(fā)明內(nèi)容
為了提高標(biāo)簽中文字豎排的靈活性，本發(fā)明實施例提供了一種在標(biāo)簽中文字豎排的方法和裝置。所述技術(shù)方案如下—種在標(biāo)簽中文字豎排的方法，所述方法包括設(shè)置標(biāo)簽容器的寬度能且只能容納一個文本文字；將所述標(biāo)簽容器的文本顯示模式設(shè)置為自動換行模式；以文本形式顯示所述標(biāo)簽容器中的文字內(nèi)容。其中，所述方法還包括將總標(biāo)簽容器的高度自適應(yīng)至所述總標(biāo)簽容器所在的父容器的高度；將各個所述標(biāo)簽容器放置到所述總標(biāo)簽容器中；根據(jù)預(yù)設(shè)參數(shù)分別計算各個所述標(biāo)簽容器的高度；如果所有所述標(biāo)簽容器的高度總和大于所述父容器的高度，在所述總標(biāo)簽容器中添加滾動按鈕和滾動事件監(jiān)聽器，所述滾動事件監(jiān)聽器用于監(jiān)聽到鼠標(biāo)滾動或所述滾動按鈕被點擊時，在所述總標(biāo)簽容器中滾動各個所述標(biāo)簽容器。其中，所述將總標(biāo)簽容器的高度自適應(yīng)至所述總標(biāo)簽容器所在的父容器的高度包括在所述父容器添加重設(shè)大小事件監(jiān)聽器，所述重設(shè)大小事件監(jiān)聽器用于監(jiān)聽所述父容器的大小是否發(fā)生改變；如果所述父容器的大小發(fā)生改變，將總標(biāo)簽容器的高度自適應(yīng)至所述總標(biāo)簽容器所在的父容器的高度。其中，所述預(yù)設(shè)參數(shù)至少包括各個所述標(biāo)簽容器中的文字的個數(shù)和邊長，所述根據(jù)預(yù)設(shè)參數(shù)分別計算各個所述標(biāo)簽容器的高度包括
計算所述標(biāo)簽容器中的文字的個數(shù)與及邊長的乘積，將所述乘積作為所述標(biāo)簽容器的高度。其中，所述預(yù)設(shè)參數(shù)還包括輔助參數(shù)，所述輔助參數(shù)包括各個所述標(biāo)簽容器上邊距、下邊距和標(biāo)簽圖標(biāo)的高度中的至少一個，所述根據(jù)預(yù)設(shè)參數(shù)分別計算各個所述標(biāo)簽容器的高度包括計算所述乘積與所述輔助參數(shù)的和值，將所述和值作為所述標(biāo)簽容器的高度。一種在標(biāo)簽中文字豎排的裝置，所述裝置包括第一設(shè)置模塊，用于設(shè)置標(biāo)簽容器的寬度能且只能容納一個文本文字；第二設(shè)置模塊，用于將所述標(biāo)簽容器的文本顯示模式設(shè)置為自動換行模式；顯示模塊，用于根據(jù)所述第一設(shè)置模塊設(shè)置的寬度和第二設(shè)置模塊設(shè)置的顯示模式，以文本形式顯示所述標(biāo)簽容器中的文字內(nèi)容。其中，所述裝置還包括自適應(yīng)模塊，用于將總標(biāo)簽容器的高度自適應(yīng)至所述總標(biāo)簽容器所在的父容器的高度；放置模塊，用于將各個所述標(biāo)簽容器放置到所述總標(biāo)簽容器中；計算模塊，用于根據(jù)預(yù)設(shè)參數(shù)分別計算各個所述標(biāo)簽容器的高度；添加模塊，用于如果所述計算模塊計算的所有所述標(biāo)簽容器的高度總和大于所述父容器的高度，在所述總標(biāo)簽容器中添加滾動按鈕和滾動事件監(jiān)聽器，所述滾動事件監(jiān)聽器用于監(jiān)聽到鼠標(biāo)滾動或所述滾動按鈕被點擊時，在所述總標(biāo)簽容器中滾動各個所述標(biāo)簽容器。其中，所述自適應(yīng)模塊包括監(jiān)聽單元，用于在所述父容器添加重設(shè)大小事件監(jiān)聽器，所述重設(shè)大小事件監(jiān)聽器用于監(jiān)聽所述父容器的大小是否發(fā)生改變；自適應(yīng)單元，用于如果所述父容器的大小發(fā)生改變，將總標(biāo)簽容器的高度自適應(yīng)至所述總標(biāo)簽容器所在的父容器的高度。其中，所述計算模塊，具體用于所述預(yù)設(shè)參數(shù)至少包括各個所述標(biāo)簽容器中的文字的個數(shù)和邊長，計算所述標(biāo)簽容器中的文字的個數(shù)與及邊長的乘積，將所述乘積作為所述標(biāo)簽容器的高度。其中，所述計算模塊，還用于所述預(yù)設(shè)參數(shù)還包括輔助參數(shù)，所述輔助參數(shù)包括各個所述標(biāo)簽容器上邊距、下邊距和標(biāo)簽圖標(biāo)的高度中的至少一個，計算所述乘積與所述輔助參數(shù)的和值，將所述和值作為所述標(biāo)簽容器的高度。本發(fā)明實施例提供的技術(shù)方案帶來的有益效果是通過合理地設(shè)置標(biāo)簽容器的寬度，使其只容納一個文本文字，利用各大瀏覽器都支持的自動換行達到文字豎排的效果，摒棄了使用圖片替代文字標(biāo)簽的做法，只需重新設(shè)置文字屬性就可以改變文字大小、顏色等，無需重新制作整個標(biāo)簽，靈活性更好。另外，通過自適應(yīng)外層容器的布局，當(dāng)外層容器高度不足時可用鼠標(biāo)滾動標(biāo)簽，頁面布局效果更好。


圖1是本發(fā)明實施例1中提供的在標(biāo)簽中文字豎排的方法流程5
圖2是本發(fā)明實施例1中提供的在標(biāo)簽中文字豎排的方法另一流程圖；圖3是本發(fā)明實施例1中提供的具有滾動按鈕的標(biāo)簽示意圖；圖4是本發(fā)明實施例2中提供的在標(biāo)簽中文字豎排的裝置結(jié)構(gòu)示意圖；圖5是本發(fā)明實施例2中提供的在標(biāo)簽中文字豎排的裝置另一結(jié)構(gòu)示意圖。
具體實施例方式為使本發(fā)明的目的、技術(shù)方案和優(yōu)點更加清楚，下面將結(jié)合附圖對本發(fā)明實施方式作進一步地詳細(xì)描述。實施例1參見圖1，本實施例提供了一種在標(biāo)簽中文字豎排的方法，包括101 設(shè)置標(biāo)簽容器的寬度能且只能容納一個文本文字；102 將標(biāo)簽容器的文本顯示模式設(shè)置為自動換行模式；103 以文本形式顯示標(biāo)簽容器中的文字內(nèi)容。進一步的，還可以將總標(biāo)簽容器的高度自適應(yīng)至總標(biāo)簽容器所在的父容器的高度；將各個標(biāo)簽容器放置到總標(biāo)簽容器中；根據(jù)預(yù)設(shè)參數(shù)分別計算各個標(biāo)簽容器的高度； 如果所有標(biāo)簽容器的高度總和大于父容器的高度，在總標(biāo)簽容器中添加滾動按鈕和滾動事件監(jiān)聽器，滾動事件監(jiān)聽器用于監(jiān)聽到鼠標(biāo)滾動或滾動按鈕被點擊時，在總標(biāo)簽容器中滾動各個標(biāo)簽容器。其中，可以在父容器添加重設(shè)大小事件監(jiān)聽器，重設(shè)大小事件監(jiān)聽器用于監(jiān)聽父容器的大小是否發(fā)生改變；如果父容器的大小發(fā)生改變，將總標(biāo)簽容器的高度自適應(yīng)至總標(biāo)簽容器所在的父容器的高度。本實施例提供的方法，通過合理地設(shè)置標(biāo)簽容器的寬度，使其只容納一個文本文字，利用各大瀏覽器都支持的自動換行達到文字豎排的效果，摒棄了使用圖片替代文字標(biāo)簽的做法，只需重新設(shè)置文字屬性就可以改變文字大小、顏色等，無需重新制作整個標(biāo)簽， 靈活性更好。另外，通過自適應(yīng)外層容器的布局，當(dāng)外層容器高度不足時可用鼠標(biāo)滾動標(biāo)簽，頁面布局效果更好。參見圖2，下面結(jié)合一實例介紹上述在標(biāo)簽中文字豎排的方法。201 生成標(biāo)簽容器；其中，標(biāo)簽容器可以有一個或多個。202 設(shè)置標(biāo)簽容器的寬度能且只能容納一個文本文字；具體的，標(biāo)簽容器寬度W = F+P1+P2 ；其中，F(xiàn)表示標(biāo)簽容器中的文字的邊長，Pl表示標(biāo)簽容器與其文字之間的左邊距， 左邊距可以大于等于0，P2表示標(biāo)簽容器與其文字之間的右邊距，右邊距可以大于等于0。203 將標(biāo)簽容器的文本顯示模式設(shè)置為自動換行模式；當(dāng)外層容器(即父容器)高度不足時，還可以實現(xiàn)用鼠標(biāo)滾動標(biāo)簽，詳見步驟 204-209，其效果圖參見圖3。204 生成一個總標(biāo)簽容器；205 將總標(biāo)簽容器的高度自適應(yīng)至總標(biāo)簽容器所在的父容器的高度；206 將各個標(biāo)簽容器放置到總標(biāo)簽容器中；
6
207 根據(jù)預(yù)設(shè)參數(shù)分別計算各個標(biāo)簽容器的高度；具體的，標(biāo)簽容器的高度H = SXF+I+P3+P4 ；其中，S、F、I、P3、P4為預(yù)設(shè)參數(shù)，I、P3、P4為輔助參數(shù)，S表示標(biāo)簽容器中的文字的個數(shù)，F(xiàn)表示標(biāo)簽容器中的文字的邊長，P3表示標(biāo)簽容器與其文字之間的上邊距，上邊距大于等于0，P4表示標(biāo)簽容器與其文字之間的下邊距，下邊距大于等于0，I表示標(biāo)簽圖標(biāo)的高度，大于等于0，另外，本實施例規(guī)定標(biāo)簽圖標(biāo)的寬度小于等于F，若大于F，則將標(biāo)簽圖標(biāo)的寬度設(shè)置成F，以免標(biāo)簽圖標(biāo)將標(biāo)簽容器撐寬。208:如果所有標(biāo)簽容器的高度總和大于父容器的高度，在總標(biāo)簽容器中添加滾動按鈕和滾動事件監(jiān)聽器，滾動事件監(jiān)聽器用于監(jiān)聽到鼠標(biāo)滾動或滾動按鈕被點擊時，在總標(biāo)簽容器中滾動各個標(biāo)簽容器；209 在父容器添加重設(shè)大小事件監(jiān)聽器，重設(shè)大小事件監(jiān)聽器用于監(jiān)聽父容器的大小是否發(fā)生改變；如果父容器的大小發(fā)生改變，重新執(zhí)行205-208 ；210 以文本形式顯示標(biāo)簽容器中的文字內(nèi)容。本實施例提供的方法，通過合理地設(shè)置標(biāo)簽容器的寬度，使其只容納一個文本文字，利用各大瀏覽器都支持的自動換行達到文字豎排的效果，摒棄了使用圖片替代文字標(biāo)簽的做法，只需重新設(shè)置文字屬性就可以改變文字大小、顏色等，無需重新制作整個標(biāo)簽， 靈活性更好。另外，通過自適應(yīng)外層容器的布局，當(dāng)外層容器高度不足時可用鼠標(biāo)滾動標(biāo)簽，頁面布局效果更好。實施例2參見圖4，本實施例提供了一種在標(biāo)簽中文字豎排的裝置，包括第一設(shè)置模塊301，用于設(shè)置標(biāo)簽容器的寬度能且只能容納一個文本文字；第二設(shè)置模塊302，用于將標(biāo)簽容器的文本顯示模式設(shè)置為自動換行模式；顯示模塊303，用于根據(jù)第一設(shè)置模塊301設(shè)置的寬度和第二設(shè)置模塊302設(shè)置的顯示模式，以文本形式顯示標(biāo)簽容器中的文字內(nèi)容。進一步的，參見圖5，該裝置還包括自適應(yīng)模塊304，用于將總標(biāo)簽容器的高度自適應(yīng)至總標(biāo)簽容器所在的父容器的
高度；放置模塊305，用于將各個標(biāo)簽容器放置到總標(biāo)簽容器中；計算模塊306，用于根據(jù)預(yù)設(shè)參數(shù)分別計算各個標(biāo)簽容器的高度；添加模塊307，用于如果計算模塊306計算的所有標(biāo)簽容器的高度總和大于父容器的高度，在總標(biāo)簽容器中添加滾動按鈕和滾動事件監(jiān)聽器，滾動事件監(jiān)聽器用于監(jiān)聽到鼠標(biāo)滾動或滾動按鈕被點擊時，在總標(biāo)簽容器中滾動各個標(biāo)簽容器。其中，自適應(yīng)模塊304包括監(jiān)聽單元30 ，用于在父容器添加重設(shè)大小事件監(jiān)聽器，重設(shè)大小事件監(jiān)聽器用于監(jiān)聽父容器的大小是否發(fā)生改變；自適應(yīng)單元304b，用于如果父容器的大小發(fā)生改變，將總標(biāo)簽容器的高度自適應(yīng)至總標(biāo)簽容器所在的父容器的高度。其中，計算模塊306，具體用于預(yù)設(shè)參數(shù)至少包括各個標(biāo)簽容器中的文字的個數(shù)和邊長，計算標(biāo)簽容器中的文字的個數(shù)與及邊長的乘積，將乘積作為標(biāo)簽容器的高度。
7
其中，計算模塊306，還用于預(yù)設(shè)參數(shù)還包括輔助參數(shù)，輔助參數(shù)包括各個標(biāo)簽容器上邊距、下邊距和標(biāo)簽圖標(biāo)的高度中的至少一個，計算乘積與輔助參數(shù)的和值，將和值作為標(biāo)簽容器的高度。本實施例提供的裝置，與方法實施例屬于同一構(gòu)思，其具體實現(xiàn)過程詳見方法實施例，這里不再贅述。本實施例提供的裝置，通過合理地設(shè)置標(biāo)簽容器的寬度，使其只容納一個文本文字，利用各大瀏覽器都支持的自動換行達到文字豎排的效果，摒棄了使用圖片替代文字標(biāo)簽的做法，只需重新設(shè)置文字屬性就可以改變文字大小、顏色等，無需重新制作整個標(biāo)簽， 靈活性更好。另外，通過自適應(yīng)外層容器的布局，當(dāng)外層容器高度不足時可用鼠標(biāo)滾動標(biāo)簽，頁面布局效果更好。以上實施例提供的技術(shù)方案中的全部或部分內(nèi)容可以通過軟件編程實現(xiàn)，其軟件程序存儲在可讀取的存儲介質(zhì)中，存儲介質(zhì)例如計算機中的硬盤、光盤或軟盤。以上所述僅為本發(fā)明的較佳實施例，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進等，均應(yīng)包含在本發(fā)明的保護范圍之內(nèi)。
權(quán)利要求
1.一種在標(biāo)簽中文字豎排的方法，其特征在于，所述方法包括 設(shè)置標(biāo)簽容器的寬度能且只能容納一個文本文字；將所述標(biāo)簽容器的文本顯示模式設(shè)置為自動換行模式； 以文本形式顯示所述標(biāo)簽容器中的文字內(nèi)容。
2.如權(quán)利要求1所述的方法，其特征在于，所述方法還包括將總標(biāo)簽容器的高度自適應(yīng)至所述總標(biāo)簽容器所在的父容器的高度； 將各個所述標(biāo)簽容器放置到所述總標(biāo)簽容器中； 根據(jù)預(yù)設(shè)參數(shù)分別計算各個所述標(biāo)簽容器的高度；如果所有所述標(biāo)簽容器的高度總和大于所述父容器的高度，在所述總標(biāo)簽容器中添加滾動按鈕和滾動事件監(jiān)聽器，所述滾動事件監(jiān)聽器用于監(jiān)聽到鼠標(biāo)滾動或所述滾動按鈕被點擊時，在所述總標(biāo)簽容器中滾動各個所述標(biāo)簽容器。
3.如權(quán)利要求2所述的方法，其特征在于，所述將總標(biāo)簽容器的高度自適應(yīng)至所述總標(biāo)簽容器所在的父容器的高度包括在所述父容器添加重設(shè)大小事件監(jiān)聽器，所述重設(shè)大小事件監(jiān)聽器用于監(jiān)聽所述父容器的大小是否發(fā)生改變；如果所述父容器的大小發(fā)生改變，將總標(biāo)簽容器的高度自適應(yīng)至所述總標(biāo)簽容器所在的父容器的高度。
4.如權(quán)利要求2所述的方法，其特征在于，所述預(yù)設(shè)參數(shù)至少包括各個所述標(biāo)簽容器中的文字的個數(shù)和邊長，所述根據(jù)預(yù)設(shè)參數(shù)分別計算各個所述標(biāo)簽容器的高度包括計算所述標(biāo)簽容器中的文字的個數(shù)與及邊長的乘積，將所述乘積作為所述標(biāo)簽容器的尚度。
5.如權(quán)利要求4所述的方法，其特征在于，所述預(yù)設(shè)參數(shù)還包括輔助參數(shù)，所述輔助參數(shù)包括各個所述標(biāo)簽容器上邊距、下邊距和標(biāo)簽圖標(biāo)的高度中的至少一個，所述根據(jù)預(yù)設(shè)參數(shù)分別計算各個所述標(biāo)簽容器的高度包括計算所述乘積與所述輔助參數(shù)的和值，將所述和值作為所述標(biāo)簽容器的高度。
6.一種在標(biāo)簽中文字豎排的裝置，其特征在于，所述裝置包括 第一設(shè)置模塊，用于設(shè)置標(biāo)簽容器的寬度能且只能容納一個文本文字； 第二設(shè)置模塊，用于將所述標(biāo)簽容器的文本顯示模式設(shè)置為自動換行模式；顯示模塊，用于根據(jù)所述第一設(shè)置模塊設(shè)置的寬度和第二設(shè)置模塊設(shè)置的顯示模式， 以文本形式顯示所述標(biāo)簽容器中的文字內(nèi)容。
7.如權(quán)利要求6所述的裝置，其特征在于，所述裝置還包括自適應(yīng)模塊，用于將總標(biāo)簽容器的高度自適應(yīng)至所述總標(biāo)簽容器所在的父容器的高度；放置模塊，用于將各個所述標(biāo)簽容器放置到所述總標(biāo)簽容器中； 計算模塊，用于根據(jù)預(yù)設(shè)參數(shù)分別計算各個所述標(biāo)簽容器的高度； 添加模塊，用于如果所述計算模塊計算的所有所述標(biāo)簽容器的高度總和大于所述父容器的高度，在所述總標(biāo)簽容器中添加滾動按鈕和滾動事件監(jiān)聽器，所述滾動事件監(jiān)聽器用于監(jiān)聽到鼠標(biāo)滾動或所述滾動按鈕被點擊時，在所述總標(biāo)簽容器中滾動各個所述標(biāo)簽容ο
8.如權(quán)利要求7所述的裝置，其特征在于，所述自適應(yīng)模塊包括監(jiān)聽單元，用于在所述父容器添加重設(shè)大小事件監(jiān)聽器，所述重設(shè)大小事件監(jiān)聽器用于監(jiān)聽所述父容器的大小是否發(fā)生改變；自適應(yīng)單元，用于如果所述父容器的大小發(fā)生改變，將總標(biāo)簽容器的高度自適應(yīng)至所述總標(biāo)簽容器所在的父容器的高度。
9.如權(quán)利要求7所述的裝置，其特征在于，所述計算模塊，具體用于所述預(yù)設(shè)參數(shù)至少包括各個所述標(biāo)簽容器中的文字的個數(shù)和邊長，計算所述標(biāo)簽容器中的文字的個數(shù)與及邊長的乘積，將所述乘積作為所述標(biāo)簽容器的高度。
10.如權(quán)利要求9所述的裝置，其特征在于，所述計算模塊，還用于所述預(yù)設(shè)參數(shù)還包括輔助參數(shù)，所述輔助參數(shù)包括各個所述標(biāo)簽容器上邊距、下邊距和標(biāo)簽圖標(biāo)的高度中的至少一個，計算所述乘積與所述輔助參數(shù)的和值，將所述和值作為所述標(biāo)簽容器的高度。
全文摘要
本發(fā)明公開了一種在標(biāo)簽中文字豎排的方法和裝置，屬于計算機領(lǐng)域。所述方法包括設(shè)置標(biāo)簽容器的寬度能且只能容納一個文本文字；將所述標(biāo)簽容器的文本顯示模式設(shè)置為自動換行模式；以文本形式顯示所述標(biāo)簽容器中的文字內(nèi)容。所述裝置包括第一設(shè)置模塊、第二設(shè)置模塊和顯示模塊。本發(fā)明通過合理地設(shè)置標(biāo)簽容器的寬度，使其只容納一個文本文字，并且利用各大瀏覽器都支持的自動換行達到文字豎排的效果，摒棄了使用圖片替代文字標(biāo)簽的做法，只需重新設(shè)置文字屬性就可以改變文字大小、顏色等，無需重新制作整個標(biāo)簽，靈活性更好。
文檔編號G06F17/30GK102214177SQ201010143008
公開日2011年10月12日 申請日期2010年4月7日 優(yōu)先權(quán)日2010年4月7日
發(fā)明者謝偉幸 申請人:深圳市金蝶中間件有限公司