彩票走势图

塑造直观易懂的HMTL内容

原创|行业资讯|编辑:龚雪|2014-01-13 09:16:10.000|阅读 132 次

概述:本文向大家介绍一些在JavaScript中使用intuitively understandable user interface(IUUI)(直观易懂用户界面)的方法。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

什么是IUUI,答案是多方面的。IUUI的方向之一就是强调重要内容,降级缺乏价值的内容。 接下来就为大家展示在使用IUUI JavaScript库时如何做到。

Tags Cloud(标签云)

我们先创建一个德意志联邦人口的标签云,通过州的名称及其字体尺寸、字的粗细和不透明度(基于州的人口)来呈现一个简单的标签。

以下是德意志联邦人口的表格:

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>

然后,需要为标签云创建一个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属性。

HTML,JavaScript

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>

HTML,JavaScript

在这个表格中,一眼就能看出以百万为单位的数字,只有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范围。

如你所见,第一个选择器是关于“块&rdquo;样式,其它这是关于CSS范围。我们来看看结果。

HTML,JavaScript

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


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP