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

Tags Cloud（標簽云）

我們先創建一個德意志聯邦人口的標簽云，通過州的名稱及其字體尺寸、字的粗細和不透明度（基于州的人口）來呈現一個簡單的標簽。

以下是德意志聯邦人口的表格：

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

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

然后，需要為標簽云創建一個HTML結構：

<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>

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

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

現在，我們可以在HTML上指示CSS范圍和標簽率。

<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>

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

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

i2.emph();

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

Number Magnitude Emphasizing（數字大小強調）

當你看到最后表格的人口數時，很難快速認知每個州的準確數量。現在，我們觀察另一個方式來表現數字。

讓我們來重做之前的表格到如下的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>

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

Tag Group Emphasizing（標簽組強調）

如果我們不僅僅是需要強調單一標簽，而是一組標簽，又該怎么辦呢？進一步地，我們想象一下如何用這個HTML表現每個州？

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

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

<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標簽的。為了指明屬于特定set的標簽，我們需要在tag屬性內添加set屬性（data-i2）。

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

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

驚呆了，人口較高的州均已更亮的顏色和更大的尺寸加以強調。