AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别,

作者:分分快三计划

 

方法

  • $element.textillate(‘start’) – 手动开始或重启 textillate
  • $element.textillate(‘stop’) – 手动暂停或停止 textillate
  • $element.textillate(‘in’) – 当前文字动画进入时触发
  • $element.textillate(‘out’) – 当前文字动画退出时触发

 

AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别,amazeuiui

AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件、JS插件与Web组件的区别。 
CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就是由CSS渲染和JS来控制行为的组件。
比较不好理解就是Web组件,好像跟JS插件意思差不多,都是CSS和JS组成的。它们到底区别在哪?我们重点来讲这个。
我们通过学习如何调用Web组件(其中的手风琴组件)来一步一步了解其与JS插件的区别。   示例01.Web组件-直接使用 (请下载附件查看示例) 示例中关键代码:

1 <section data-am-widget="accordion" class="am-accordion am-accordion-default">
2     <!-- 这里面还有代码,本例的大概意思就是不写JS代码,直接调用Web组件。 -->
3 </section>

 

示例02.Web组件-通过模板来调用-示例1 (请下载附件查看示例)

示例中关键代码1(引用 handlebars.js 和 妹子ui调用handlebars.js的辅助js):

1 <!-- handlebars.js 是一个开源的js库,用于在网页上实现语义模板。 -->
2 <script src="assets/js/handlebars.min.js"></script>
3 <!-- 妹子UI调用 handlebars 的辅助类 -->
4 <script src="assets/js/amazeui.widgets.helper.js"></script>

示例中关键代码2(定义一个模板)(话说这个模板也没啥实际意义,但官方的demo就是这么写的,我只是移植了一下):

1 <script type="text/x-handlebars-template" id="my-tpl">
2     {{>accordion accordionData}}
3 </script>

示例中关键代码3(调用JS代码使其工作):

1 var $tpl = $('#my-tpl'); //得到原始模板
2 var template = Handlebars.compile($tpl.text()),  //得到编译后的模板
3 //...这里定义了数据...代码较多...略...
4 var html = template(data); //传入数据,运行模板,得到结果
5 var $tpl.before(html); //显示结果

 

示例03.Web组件-通过模板来调用-示例2 (请下载附件查看示例) 示例中关键代码1(引用 handlebars.js 和 妹子ui调用handlebars.js的辅助js): 同上,所以省略... 示例中关键代码2(调用JS代码使其工作):

1 var template = Handlebars.compile('{{>accordion}}'), //得到编译后的模板 (字符串就算是原始模板了)
2 var html = template(data.accordionData); //传入数据,运行模板,得到结果
3 $("#div1").before(html); //显示结果

 

示例04.Web组件-通过自定义模板来调用 (请下载附件查看示例) 示例中关键代码1(引用 handlebars.js )      不一样的地方在于,这次只引用了 handlebars.js ,而没有引用 妹子ui调用handlebars.js的辅助js ,因为不需要了。   示例中关键代码2(自定义原始模板):

1 <!-- 自定义原始模板 -->
2 <script type="text/x-handlebars-template" id="demo-template">
3 //这里还有很多代码,因为不关键就省略了...
4 <!-- 关键代码:添加图标 icon 属性 -->
5 {{#if icon}}<img src="{{icon}}" style="width:20px;" />{{/if}} 
6 //这里还有很多代码,因为不关键就省略了...
7 </script>

示例中关键代码3(调用JS使其工作):

 1 var demoData = { //定义数据
 2     "content": [..省略.., {
 3         "title": "标题二",
 4         "content": "内容二",
 5         "icon": "assets/i/favicon.png" //关键:多出一个icon属性
 6     }, ..省略..]
 7 };
 8 var demoTemplate = Handlebars.compile($("#demo-template").html()); //得到编译后的模板
 9 var demoHtml = demoTemplate(demoData); //传入数据,运行模板,得到结果
10 $("#div1").html(demoHtml); //显示结果

 

示例05.Web组件-华瑞手风琴组件 (请下载附件查看示例) 示例中关键代码1(huarui.accordion.helper.js): 这是一个自定义Web组件的js支持文件,这个文件的编写很简单,复制 amazeui.widgets.helper.js 改一改就好了。

 1 //注册一个新组件,名叫:hr-accordion
 2 hbs.registerPartial('hr-accordion', '
 3 {{#this}}
 4 <section data-am-widget="accordion" class="am-accordion {{#if theme}}am-accordion-{{theme}}{{else}}am-accordion-default{{/if}}{{#if widgetId}} {{widgetId}}{{/if}}{{#if className}} {{className}}{{/if}}" {{#if id}} id="{{id}}" {{/if}} data-am-accordion='{ {{#if options.multiple}}"multiple": true{{/if}} }'>
 5     {{#each content}}
 6     <dl class="am-accordion-item{{#if active}} am-active{{/if}}{{#if disabled}} am-disabled{{/if}}">
 7         <dt class="am-accordion-title"> 8             <!-- 添加图标的关键代码 -->
 9             {{#if icon}}<img src="{{icon}}">10             {{{title}}}
11                 </dt>
12                 <dd class="am-accordion-bd am-collapse {{#if active}}am-in{{/if}}">
13                     <div class="am-accordion-content">
14                         {{{content}}}
15                     </div>
16                 </dd>
17             </dl>
18     {{/each}}
19 </section>
20 {{/this}}');

示例中关键代码2(引用相关js文件):

1 <!-- handlebars.js 是一个开源的js库,用于在网页上实现语义模板。 -->
2 <script src="assets/js/handlebars.min.js"></script>
3 <!-- 华瑞手风琴组件,调用 handlebars.js 的辅助类 -->
4 <script src="assets/js/huarui.accordion.helper.js"></script>

示例中关键代码3(调用JS使其工作):

 1 var demoData = {  //定义数据
 2     "content": [..略.., {
 3         "title": "标题二",
 4         "content": "内容二",
 5         "icon": "assets/i/favicon.png" //关键:多出一个icon属性
 6     }, ..略..]
 7 };
 8 //得到编译后的模板,传入数据,运行模板,得到结果
 9 var demoHtml = Handlebars.compile('{{>hr-accordion}}')(demoData); 
10 $("#div1").html(demoHtml); //显示结果

 

看完以上的示例,得出结论: 在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插件没什么太大区别,官方原话也说可以这么调用的。 Web组件与JS插件的不同之处在于,Web组件借助 handlebars.js 实现了强大的模板功能,我们能编写自定义模板从而使Web组件更具个性,甚至是编写出新的Web组件。

下载附件:AmazeUI的Web组件.zip

 

AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件、JS插件与...

 

**Textillate 下载  **        案例演示

  

分分快三计划 1

      进入不下载,点击下载开始下载,暂停则暂停,原理控制setInterval和cleanInterval

Textillate是一款基于 class="wp_keywordlink">jquery的使用 class="wp_keywordlink_affiliate">CSS3实现文字动画的小巧插件。Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字。

body {
        background-color: #f5f7f9;
        color: #6c6c6c;
        font: 300 1em/1.5em;
    }

    .container {
        left: 50%;
        position: absolute;
        top: 40%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
    /* PROGRESS */

    .progress {
        background-color: #e5e9eb;
        height: 0.25em;
        position: relative;
        width: 24em;
    }

    #progress-bar {
        animation-duration: 3s;
        animation-name: width;
        background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
        background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
        background-size: 24em 0.25em;
        height: 100%;
        position: relative;
    }

    @keyframes width {
        0%,
        100% {
            transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
        }
        0% {
            width: 0;
        }
        100% {
            width: 100%;
        }
    }

    .container .notice {
        animation: change 5s linear 0s infinite;
        font-size: 15px;
        margin: 10px;
    }

    @keyframes change {
        0% {
            color: #4cd964;
        }
        25% {
            color: #5ac8fa;
        }
        50% {
            color: #007aff;
        }
        75% {
            color: #5856d6;
        }
        100% {
            color: #ff2d55;
        }
    }

事件

  • start.tlt – textillate开始时触发
  • inAnimationBegin.tlt – 动画进入开始时触发
  • inAnimationEnd.tlt – 动画进入结束时触发
  • outAnimationBegin.tlt –  动画退出开始时触发
  • outAnimationEnd.tlt – 动画退出结束时触发
  • end.tlt – ttextillate结束触发

第二种:

使用方法

引入核心文件

<link href="assets/animate.css" rel="stylesheet">
<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/jquery.lettering.js"></script>

构建html标签

<h1 class="tlt">My Title</h1>

写入JS,初始化

$(function () {
    $('.tlt').textillate();
})

 

以上代码使用了默认的动画效果,如果你想改变动理效果,可以在html中调用data API

<h1 class="tlt" data-in-effect="rollIn">Title</h1>

你也可以在初始化时使用参数来改变

$('.tlt').textillate({ in: { effect: 'rollIn' } });

当然,你也可以用Textillate给一个列表的文字都具有动画

<h1 class="tlt">
    <ul class="texts">
        <li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>
        <li data-in-effect="fadeIn">Another Title</li>
    </ul>
</h1>
$('.tlt').textillate();

 

注意:你可以通过调用data api配置动画参数来控制每个li的动画效果。

【页面代码】

参数选项

$('.tlt').textillate({
  // the default selector to use when detecting multiple texts to animate
  selector: '.texts',
  // enable looping
  loop: false,
  // sets the minimum display time for each text before it is replaced
  minDisplayTime: 2000,
  // sets the initial delay before starting the animation
  // (note that depending on the in effect you may need to manually apply 
  // visibility: hidden to the element before running this plugin)
  initialDelay: 0,
  // set whether or not to automatically start animating
  autoStart: true,
  // custom set of 'in' effects. This effects whether or not the 
  // character is shown/hidden before or after an animation  
  inEffects: [],
  // custom set of 'out' effects
  outEffects: [ 'hinge' ],
  // in animation settings
  in: {
    // set the effect name
    effect: 'fadeInLeftBig',
    // set the delay factor applied to each consecutive character
    delayScale: 1.5,
    // set the delay between each character
    delay: 50,
    // set to true to animate all the characters at the same time
    sync: false,
    // randomize the character sequence 
    // (note that shuffle doesn't make sense with sync = true)
    shuffle: false,
    // reverse the character sequence 
    // (note that reverse doesn't make sense with sync = true)
    reverse: false,
    // callback that executes once the animation has finished
    callback: function () {}
  },
  // out animation settings.
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },
  // callback that executes once textillate has finished 
  callback: function () {}});

 

      CSS3 JS

      CSS3控制进度

<div class="container">
        <div class="notice"id="notice">
            奴家,正在~客官不要急啦~(づ ̄ 3 ̄)づ
        </div>
        <div class="progress">
            <div id="progress-bar">
            </div>
        </div>
  </div>

        根据CSS来调整,时间

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>进度条</title>
        <style type="text/css">
            #pro {
                width: 0px;
                height: 20px;
                background-color: #cea;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <button onclick="down()">下载</button>
        <button onclick="stop()">暂停</button>
        <br />
        <div id="pro"></div>
    </body>
    <script>
        var count = 0;
        var tid;

        function Progress() {
            count  ;
            if (count == 101) {
                Fn();
            } else {
                var oPro = document.getElementById("pro")
                oPro.innerText = count   "%";
                oPro.style.width = 3 * count   "px";
            }
        }

        function down() {
            oStria = setInterval("Progress()", 100)
        }
        function stop(){
            clearInterval(oStria)
        }

        function Fn() {
            clearInterval(oStria)
            alert("下载完成")
        }
    </script>

</html>
  window.onload = function() {
            var progressBar = {
                //初始化
                init: function() {
                    var oBar = document.getElementById('progress-bar');
                    var oNotice = document.getElementById('notice');
                    var count = 0;
                    //百分比计算,根据css的来
                    var timer = setInterval(function() {
                        count  ;
                        oBar.innerHTML = count   '%';
                        if (count === 100) {
                            oNotice.innerHTML = '客官,奴家好了~(✿◡‿◡)'
                            clearInterval(timer);
                        }
                    }, 30);
                }
            };
            progressBar.init();
        }

        利用CSS3中的 @keyframes

      JS实现百分比

  第一种:

  CSS代码

 

   JS代码

  

 

  

 

【构想】

 

      默认直接进入就是下载  

 

  HTML代码

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 文字 HTML5 web前端 Textillate.j