永利最大(官方)网站

 什么是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范围。我们来看看结果。

惊呆了，人口较高的州均已更亮的颜色和更大的尺寸加以强调。