0

Jsfiddle - JQuery 手风琴

第一次尝试使用 ractive 模板 - 将整个 html 复制并粘贴到模板中。JQuery 也在单独的文件中。

<a id="test" href="#" data-toggle="modal" data-target="#modal-signup">Sign up new account</a>
    <div id="modal-signup" data-js-test>

此代码在完整索引页面上，但模态在不同的模板文件中。

$("#test").click(function(){

    var sign =  new Ractive({
      el: document.querySelector('[data-js-test]'),
      template: '#template',
      data : {
        error: false
      }

    });

但是手风琴不起作用 - 它不会像 jsfiddle 中所示的那样向上或向下滑动。我不确定是否是因为 ractive : <script id="template" type='text/ractive'>with html。有办法解决吗？尝试使用 CSS3，但无法像这个 jsfiddle 示例那样使选项卡折叠或展开。

帮助或指导将不胜感激。

4

1 回答 1

1

保持您拥有的基本设计，您可以执行此操作（完整示例请参见http://jsfiddle.net/kDUhU/1）。像这样组织你的html：

<a id="test" href="#" data-toggle="modal" data-target="#modal-signup">Sign up new account</a>
    <div id="modal-signup" data-js-test>

<script id='template' type='text/ractive'>
    //ractive template goes here, see fiddle for full example
</script>

然后在你的javascript中：

$("#test").click(function(){

    var sign =  new Ractive({
      el: document.querySelector('[data-js-test]'),
      template: '#template',
      data : {
          error: false,
          steps: [
              { 
                  name: 'Step 1 - Information',
                  color: 'yellow',
                  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc...'
              },
              ...
          ]
      }
    })

    // now apply your accordion logic
    $('.accordion div.content').slideToggle(0) 
    ...

});

对于更“活跃”的示例，您可以使用幻灯片插件（请参阅http://jsfiddle.net/kDUhU/2/）。为了清楚起见，我已经删除了大部分格式属性，基本上你的模板变成了：

<script id='template' type='text/ractive'>
    <a href="#" on-click='show'>Sign up new account</a>
    {{# selected > -1 }}
    <div>
        <h3>Sign up a new account</h3>
        <div class="accordion">
            {{#steps:i}}
            <div id="step-{{i+1}}">
                <a href="#" on-click='select'>{{name}}</a>
                {{#selected===i}}
                <div intro-outro='slide' style="background: {{color}};">
                    {{content}}
                </div>
                {{/}}
            </div>
            {{/}}
        </div>
    </div>
    {{/}}
</script>

你的js是

var sign =  new Ractive({
    el: document.body,
    template: '#template',
    data : {
        steps: [
              { 
                  name: 'Step 1 - Information',
                  color: 'yellow',
                  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc'
              },
              ...
          ]
      }
})

sign.on('show', function(){
    this.set('selected', 0)
    sign.off('show')
})
sign.on('select', function(e){
    this.set('selected', e.index.i)  
})

最后，有一些限制有点笨拙，但只是为了好玩，这是一个纯 CSS 手风琴：http: //jsfiddle.net/kDUhU/4/

模板的关键部分：

<label for='step{{i}}'>{{name}}</label>
<input name='steps' type='radio' id='step{{i}}' checked='{{i===0}}'>
<div intro-outro='slide' style="background: {{color}};">
    {{content}}
</div>

CSS：

label {
    cursor: pointer;
    text-decoration: underline;
}
input[type=radio] {
    display: none;
}
input[type=radio]:not(:checked) + div {
    max-height: 0;
}
input[type=radio] + div {
    max-height: 2em;
    overflow: hidden;
    -webkit-transition: max-height 1s;

}
于 2014-06-25T20:58:07.873 回答