[Kimchi-devel] [v2 2/2] UI: Tabs Widget Sample

Wed Feb 4 01:42:20 UTC 2015

On 2/3/2015 8:43 PM, Aline Manera wrote:
>
> On 30/01/2015 08:19, huoyuxin at linux.vnet.ibm.com wrote:
>> From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
>>
>> Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
>> ---
>>   ui/js/widgets/samples/tabs.html |   72 
>> +++++++++++++++++++++++++++++++++++++++
>>   1 files changed, 72 insertions(+), 0 deletions(-)
>>   create mode 100644 ui/js/widgets/samples/tabs.html
>>
>> diff --git a/ui/js/widgets/samples/tabs.html 
>> b/ui/js/widgets/samples/tabs.html
>> new file mode 100644
>> index 0000000..0554974
>> --- /dev/null
>> +++ b/ui/js/widgets/samples/tabs.html
>> @@ -0,0 +1,72 @@
>> +<!--
>> + *
>> + * Project Kimchi
>> + *
>> + * Copyright IBM, Corp. 2015
>> + *
>> + * Licensed under the Apache License, Version 2.0 (the "License");
>> + * you may not use this file except in compliance with the License.
>> + * You may obtain a copy of the License at
>> + *
>> + *     http://www.apache.org/licenses/LICENSE-2.0
>> + *
>> + * Unless required by applicable law or agreed to in writing, software
>> + * distributed under the License is distributed on an "AS IS" BASIS,
>> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 
>> implied.
>> + * See the License for the specific language governing permissions and
>> + * limitations under the License.
>> + *
>> +-->
>> +
>> +<!--
>> +    Please use Chrome to load this file, Firefox has some limitation.
>> +-->
>
> What are the limitations on FF?
> I have tried it and haven't noticed any problem.
>
> And I suppose the limitation you refer to is only for the sample, 
> right? As Kimchi should run well on FF too.
Make a mistake here by copying content from grid sample, there is no 
limitation here for Tabs widget.
All limitation is due to webfont icon where firefox has a limitation to 
load it from local file. So bellow:

1. there is no limitation for kimchi.
2. there is only limitation for *samples* when a widget use *webfont 
icon* like grid sorting control in *firefox*.

I will send v3 to correct this.
>
>> +
>> +<!DOCTYPE html>
>> +<html>
>> +<head>
>> +<meta charset="UTF-8">
>> +<title>Kimchi</title>
>> +<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
>> +<meta name="viewport" content="width=device-width, 
>> initial-scale=1.0, user-scalable=yes" />
>> +
>> +<link rel="stylesheet" 
>> href="../../../libs/themes/base/jquery-ui.min.css">
>> +<link rel="stylesheet" href="../../../fontello/css/fontello.css">
>> +<link rel="stylesheet" href="../../../fontello/css/animation.css">
>> +<link rel="stylesheet" href="../../../css/theme-default.min.css">
>> +
>> +<script src="../../../libs/jquery-1.10.0.min.js"></script>
>> +<script src="../../../libs/jquery-ui.min.js"></script>
>> +<script src="../../../libs/jquery-ui-i18n.min.js"></script>
>> +<script src="../../../js/kimchi.min.js"></script>
>> +
>> +<style type="text/css">
>> +body {
>> +    background: none;
>> +}
>> +</style>
>> +<script>
>> +function init(){
>> +    $( "#tabs" ).tabs();
>> +}
>> +</script>
>> +</head>
>> +<body onload="init()">
>> +<div id="tabs">
>> +    <ul>
>> +        <li><a href="#tabs-1">Nunc tincidunt</a></li>
>> +        <li><a href="#tabs-2">Proin dolor</a></li>
>> +        <li><a href="#tabs-3">Aenean lacinia</a></li>
>> +    </ul>
>> +    <div id="tabs-1">
>> +        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo 
>> a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. 
>> Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. 
>> Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. 
>> Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam 
>> sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie 
>> erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec 
>> orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus 
>> lectus.</p>
>> +    </div>
>> +    <div id="tabs-2">
>> +        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio 
>> metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque 
>> molestie turpis. Sed fringilla, massa eget luctus malesuada, metus 
>> eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet 
>> fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. 
>> Praesent in eros vestibulum mi adipiscing adipiscing. Morbi 
>> facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut 
>> posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. 
>> Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem 
>> euismod felis, eu ornare leo nisi vel felis. Mauris consectetur 
>> tortor et purus.</p>
>> +    </div>
>> +    <div id="tabs-3">
>> +        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse 
>> potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque 
>> rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. 
>> Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
>> per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim 
>> commodo pellentesque. Praesent eu risus hendrerit ligula tempus 
>> pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, 
>> lacus.</p>
>> +        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra 
>> at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent 
>> viverra justo vitae neque. Praesent blandit adipiscing velit. 
>> Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna 
>> ligula faucibus eros, id euismod lacus dolor eget odio. Nam 
>> scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. 
>> Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. 
>> Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. 
>> Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus 
>> hendrerit hendrerit.</p>
>> +    </div>
>> +</body>
>> +</html>
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150204/3e50a64b/attachment.html>