国产真实自在自线,欧美色精品,91人人草

塑造直觀易懂的HMTL內(nèi)容

原創(chuàng)|行業(yè)資訊|編輯：龔雪|2014-01-13 09:16:10.000|閱讀 167 次

概述：本文向大家介紹一些在JavaScript中使用intuitively understandable user interface（IUUI）（直觀易懂用戶界面）的方法。

什么是IUUI，答案是多方面的。IUUI的方向之一就是強調(diào)重要內(nèi)容，降級缺乏價值的內(nèi)容。接下來就為大家展示在使用IUUI JavaScript庫時如何做到。

Tags Cloud（標(biāo)簽云）

我們先創(chuàng)建一個德意志聯(lián)邦人口的標(biāo)簽云，通過州的名稱及其字體尺寸、字的粗細(xì)和不透明度（基于州的人口）來呈現(xiàn)一個簡單的標(biāo)簽。

以下是德意志聯(lián)邦人口的表格：

State	Population
Baden	10717000
Bavaria	12444000
Berlin	3400000
Brandenburg	2568000
Bremen	663000
Hamburg	1735000
Hesse	6098000
Mecklenburg	1720000
Lower Saxony	8001000
North Rhine	18075000
Rhineland	4061000
Saarland	1056000
Saxony	4296000
Saxony-Anhalt	2494000
Schleswig	2829000
Thuringia	2355000

開始，需要添加鏈接到JavaScript庫：

<script type="text/javascript" src="//i2ui.com/Scripts/Downloads/i2ui-1.0.0.js"></script>

然后，需要為標(biāo)簽云創(chuàng)建一個HTML結(jié)構(gòu)：

<div>
    <span>Baden</span>
    <span>Bavaria</span>
    <span>Berlin</span>
    <span>Brandenburg</span>
    <span>Bremen</span>
    <span>Hamburg</span>
    <span>Hesse</span>
    <span>Mecklenburg</span>
    <span>Lower Saxony</span>
    <span>North Rhine</span>
    <span>Rhineland-Palatinate</span>
    <span>Saarland</span>
    <span>Saxony</span>
    <span>Saxony-Anhalt</span>
    <span>Schleswig</span>
    <span>Thuringia</span>
<div>

現(xiàn)在，我們可以定義一個CSS，屬于最低率和最高率標(biāo)簽。換言之，這是從一個CSS選擇器到另一個的范圍。

.fromStyle
{
    font-size:10px;
    font-weight:200;
    opacity:0.5;
}
.toStyle
{
    font-size:35px;
    font-weight:600;
    opacity:1;
}

現(xiàn)在，我們可以在HTML上指示CSS范圍和標(biāo)簽率。

<div data-i2="css:['.fromStyle','.toStyle']">
    <span data-i2="rate:10717">Baden</span>
    <span data-i2="rate:12444">Bavaria</span>
    <span data-i2="rate:3400">Berlin</span>
    <span data-i2="rate:2568">Brandenburg</span>
    <span data-i2="rate:663">Bremen</span>
    <span data-i2="rate:1735">Hamburg</span>
    <span data-i2="rate:6098">Hesse</span>
    <span data-i2="rate:1720">Mecklenburg</span>
    <span data-i2="rate:8001">Lower Saxony</span>
    <span data-i2="rate:18075">North Rhine</span>
    <span data-i2="rate:4061">Rhineland</span>
    <span data-i2="rate:1056">Saarland</span>
    <span data-i2="rate:4296">Saxony</span>
    <span data-i2="rate:2494">Saxony-Anhalt</span>
    <span data-i2="rate:2829">Schleswig</span>
    <span data-i2="rate:2355">Thuringia</span>
<div>

正如你所看到的，標(biāo)簽率是“千”人口，這里是什么其實并不重要，主要的理念是讓不同的率之間有相同的比率。

在最后，我們需要調(diào)用下一個JavaScript功能——意味著“強調(diào)”。

i2.emph();

因此，帶最小率的標(biāo)簽獲得fromStyle CSS屬性，帶最大率的標(biāo)簽獲得toStyle CSS屬性。因此上邊帶率的標(biāo)簽都依據(jù)自己的率而獲得了CSS屬性。

HTML,JavaScript

Number Magnitude Emphasizing（數(shù)字大小強調(diào)）

當(dāng)你看到最后表格的人口數(shù)時，很難快速認(rèn)知每個州的準(zhǔn)確數(shù)量。現(xiàn)在，我們觀察另一個方式來表現(xiàn)數(shù)字。

讓我們來重做之前的表格到如下的HTML代碼中：

<table data-i2="css:[{fontSize:'10px',},{fontSize:'30px'}]">
   <tr>
       <td>Baden</td><td data-i2="number:10717000"></td> 
    </tr>
   <tr>
       <td>Bavaria</td><td data-i2="number:12444000"></td> 
    </tr>
   <tr>
       <td>Berlin</td><td data-i2="number:3400000"></td> 
    </tr>
   <tr>
       <td>Brandenburg</td><td data-i2="number:2568000"></td> 
    </tr>
   <tr>
       <td>Bremen</td><td data-i2="number:663000"></td> 
    </tr>
   <tr>
       <td>Hamburg</td><td data-i2="number:1735000"></td> 
    </tr>
   <tr>
       <td>Hesse</td><td data-i2="number:6098000"></td> 
    </tr>
   <tr>
       <td>Mecklenburg</td><td data-i2="number:1720000"></td> 
    </tr>
   <tr>
       <td>Lower Saxony</td><td data-i2="number:8001000"></td> 
    </tr>
   <tr>
       <td>North Rhine</td><td data-i2="number:18075000"></td> 
    </tr>
   <tr>
       <td>Rhineland</td><td data-i2="number:4061000"></td> 
    </tr>
   <tr>
       <td>Saarland</td><td data-i2="number:1056000"></td> 
    </tr>
   <tr>
       <td>Saxony</td><td data-i2="number:4296000"></td> 
    </tr>
   <tr>
       <td>Saxony-Anhalt</td><td data-i2="number:2494000"></td> 
    </tr>
   <tr>
       <td>Schleswig</td><td data-i2="number:2829000"></td> 
    </tr>
   <tr>
       <td>Thuringia</td><td data-i2="number:2355000"></td> 
    </tr>
</table>

HTML,JavaScript

在這個表格中，一眼就能看出以百萬為單位的數(shù)字，只有Bremen有十萬單位人口。最高數(shù)字被強調(diào)，而最低的被降低。因此，用戶很快就能理解之前的表格索要表達(dá)的意思。

Tag Group Emphasizing（標(biāo)簽組強調(diào)）

如果我們不僅僅是需要強調(diào)單一標(biāo)簽，而是一組標(biāo)簽，又該怎么辦呢？進(jìn)一步地，我們想象一下如何用這個HTML表現(xiàn)每個州？

<div>
    <span>Baden</span><br/>
    <span>10717000</span>
</div>

如果我們需要展示一個塊的大小、名稱的跨度和人口的跨度又該如何？這個問題是由“sets”解決的。每個“set”是一個單獨的CSS范圍（為已定義的標(biāo)簽）。我們來看看實例：

<div data-i2="css:{block:['.fromBlock','.toBlock'],name:['.fromName','.toName'],pop:['.fromPop','.toPop']}">
    <div data-i2="rate:10717,set:'block'">
        <span data-i2="rate:10717,set:'name'">Baden</span><br/>
        <span data-i2="number:10717000,set:'pop'"></span>
    </div>    
    <div data-i2="rate:12444,set:'block'">
        <span data-i2="rate:12444,set:'name'">Bavaria</span><br/>
        <span data-i2="number:12444000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:3400,set:'block'">
        <span data-i2="rate:3400,set:'name'">Berlin</span><br/>
        <span data-i2="number:3400000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:2568,set:'block'">
        <span data-i2="rate:2568,set:'name'">Brandenburg</span><br/>
        <span data-i2="number:2568000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:663,set:'block'">
        <span data-i2="rate:663,set:'name'">Bremen</span>
        <br/>
        <span data-i2="number:663000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:1735,set:'block'">
        <span data-i2="rate:1735,set:'name'">Hamburg</span><br/>
        <span data-i2="number:1735000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:6098,set:'block'">
        <span data-i2="rate:6098,set:'name'">Hesse</span><br/>
        <span data-i2="number:6098000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:1720,set:'block'">
        <span data-i2="rate:1720,set:'name'">Mecklenburg</span><br/>
        <span data-i2="number:1720000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:8001,set:'block'">
        <span data-i2="rate:8001,set:'name'">Lower Saxony</span><br/>
        <span data-i2="number:8001000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:18075,set:'block'">
        <span data-i2="rate:18075,set:'name'">North Rhine</span><br/>
        <span data-i2="number:18075000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:4061,set:'block'">
        <span data-i2="rate:4061,set:'name'">Rhineland</span><br/>
        <span data-i2="number:4061000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:1056,set:'block'">
        <span data-i2="rate:1056,set:'name'">Saarland</span><br/>
        <span data-i2="number:1056000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:4296,set:'block'">
        <span data-i2="rate:4296,set:'name'">Saxony</span><br/>
        <span data-i2="number:4296000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:2494,set:'block'">
        <span data-i2="rate:2494,set:'name'">Saxony-Anhalt</span><br/>
        <span data-i2="number:2494000,set:'pop'"></span>
    </div>     
    <div data-i2="rate:2829,set:'block'">
        <span data-i2="rate:2829,set:'name'">Schleswig</span><br/>
        <span data-i2="number:2829000,set:'pop'"></span>
    </div>    
    <div data-i2="rate:2355,set:'block'">
        <span data-i2="rate:2355,set:'name'">Thuringia</span><br/>
        <span data-i2="number:2355000,set:'pop'"></span>
    </div> 
</div>

set是定義在父div標(biāo)簽的。為了指明屬于特定set的標(biāo)簽，我們需要在tag屬性內(nèi)添加set屬性（data-i2）。

然后，我們需要指定CSS范圍。

如你所見，第一個選擇器是關(guān)于“塊”樣式，其它這是關(guān)于CSS范圍。我們來看看結(jié)果。

HTML,JavaScript