Javascript 附加一个'；刀片'；装入不带'的容器中；弹出式'；现有的

我正在一个页面中实现“刀片式”体验。当我将一个额外的刀片添加到容器中时，…前面的刀片会“弹出”

• Q:如何在视图中添加新元素而不影响以前的元素

我的小提琴：
我创建了一个JSFIDLE…但该服务当前不可用…我将很快附加它

我的CSS:

<style>
    /** DASHBOARD CONTAINER **/
    .dashboard-container { border-right: solid 1px #000; margin-top: 5px; margin-bottom: 5px; overflow-x: scroll; white-space: nowrap; width: 100%; }
    .dashboard-container .widget { clear: both; display: inline-block; vertical-align: top; }

    /** FORM CONTAINER **/
    .form-container { border: 1px solid #ccc; border-radius: 3px; height: 500px; margin-bottom: 5px; padding: 5px; width: 500px; }

    /** BLADE CONTAINER **/
    .blade-container .blade { border: 1px solid #ccc; border-radius: 3px; display: inline-block; height: 506px; margin-right: 2px; padding: 2px; width: 200px; }

</style>

<script id="tmplBlade" type="text/template">
    <div class="blade">
        Blade
    </div>
</script>

<div class="dashboard-container">
    <div class="widget">
        <div class="form-container">
            Form Controls go here
            &nbsp;&nbsp;
            <input id="btnAppend" type="button" value="Append Blade" />
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
        </div>
    </div>
</div>

<script type="text/javascript">

$(document).ready(function () {

    function PageController()
    {
        var that = this,
            dictionary = {
                elements: { btnAppend: null, bladeContainer: null },
                selectors: { btnAppend: '#btnAppend', bladeContainer: '.blade-container', tmplBlade: '#tmplBlade' }
            };

        var initialize = function () {

            // Elements
            dictionary.elements.btnAppend = $(dictionary.selectors.btnAppend);
            dictionary.elements.bladeContainer = $(dictionary.selectors.bladeContainer);

            // Events
            dictionary.elements.btnAppend.on('click', that.on.click.btnAppend);
        };

        this.on = {
            click: {
                btnAppend: function (e) {
                    var html = $(dictionary.selectors.tmplBlade).html().trim();
                    var $element = $(html);

                    $element.hide();
                    dictionary.elements.bladeContainer.prepend($element);

                    // Slide-in
                    $element.show('slide', { direction: 'left' });
                }
            }
        };

        initialize();
    }

    var pageController = new PageController();
});

</script>

/**仪表板容器**/
.dashboard容器{右边框：实心1px#000；页边距顶部：5px；页边距底部：5px；溢出-x：滚动；空白：nowrap；宽度：100%；}
.dashboard container.widget{clear:both；display:inline块；vertical align:top；}
/**模板容器**/
.form容器{边框：1px实心#ccc；边框半径：3px；高度：500px；边距底部：5px；填充：5px；宽度：500px；}
/**叶片容器**/
.blade容器.blade{边框：1px实心#ccc；边框半径：3px；显示：内联块；高度：506px；右边距：2px；填充：2px；宽度：200px；}

我的HTML:

<style>
    /** DASHBOARD CONTAINER **/
    .dashboard-container { border-right: solid 1px #000; margin-top: 5px; margin-bottom: 5px; overflow-x: scroll; white-space: nowrap; width: 100%; }
    .dashboard-container .widget { clear: both; display: inline-block; vertical-align: top; }

    /** FORM CONTAINER **/
    .form-container { border: 1px solid #ccc; border-radius: 3px; height: 500px; margin-bottom: 5px; padding: 5px; width: 500px; }

    /** BLADE CONTAINER **/
    .blade-container .blade { border: 1px solid #ccc; border-radius: 3px; display: inline-block; height: 506px; margin-right: 2px; padding: 2px; width: 200px; }

</style>

<script id="tmplBlade" type="text/template">
    <div class="blade">
        Blade
    </div>
</script>

<div class="dashboard-container">
    <div class="widget">
        <div class="form-container">
            Form Controls go here
            &nbsp;&nbsp;
            <input id="btnAppend" type="button" value="Append Blade" />
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
        </div>
    </div>
</div>

<script type="text/javascript">

$(document).ready(function () {

    function PageController()
    {
        var that = this,
            dictionary = {
                elements: { btnAppend: null, bladeContainer: null },
                selectors: { btnAppend: '#btnAppend', bladeContainer: '.blade-container', tmplBlade: '#tmplBlade' }
            };

        var initialize = function () {

            // Elements
            dictionary.elements.btnAppend = $(dictionary.selectors.btnAppend);
            dictionary.elements.bladeContainer = $(dictionary.selectors.bladeContainer);

            // Events
            dictionary.elements.btnAppend.on('click', that.on.click.btnAppend);
        };

        this.on = {
            click: {
                btnAppend: function (e) {
                    var html = $(dictionary.selectors.tmplBlade).html().trim();
                    var $element = $(html);

                    $element.hide();
                    dictionary.elements.bladeContainer.prepend($element);

                    // Slide-in
                    $element.show('slide', { direction: 'left' });
                }
            }
        };

        initialize();
    }

    var pageController = new PageController();
});

</script>

刀片
表单控件在这里

我的JAVASCRIPT:

<style>
    /** DASHBOARD CONTAINER **/
    .dashboard-container { border-right: solid 1px #000; margin-top: 5px; margin-bottom: 5px; overflow-x: scroll; white-space: nowrap; width: 100%; }
    .dashboard-container .widget { clear: both; display: inline-block; vertical-align: top; }

    /** FORM CONTAINER **/
    .form-container { border: 1px solid #ccc; border-radius: 3px; height: 500px; margin-bottom: 5px; padding: 5px; width: 500px; }

    /** BLADE CONTAINER **/
    .blade-container .blade { border: 1px solid #ccc; border-radius: 3px; display: inline-block; height: 506px; margin-right: 2px; padding: 2px; width: 200px; }

</style>

<script id="tmplBlade" type="text/template">
    <div class="blade">
        Blade
    </div>
</script>

<div class="dashboard-container">
    <div class="widget">
        <div class="form-container">
            Form Controls go here
            &nbsp;&nbsp;
            <input id="btnAppend" type="button" value="Append Blade" />
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
        </div>
    </div>
</div>

<script type="text/javascript">

$(document).ready(function () {

    function PageController()
    {
        var that = this,
            dictionary = {
                elements: { btnAppend: null, bladeContainer: null },
                selectors: { btnAppend: '#btnAppend', bladeContainer: '.blade-container', tmplBlade: '#tmplBlade' }
            };

        var initialize = function () {

            // Elements
            dictionary.elements.btnAppend = $(dictionary.selectors.btnAppend);
            dictionary.elements.bladeContainer = $(dictionary.selectors.bladeContainer);

            // Events
            dictionary.elements.btnAppend.on('click', that.on.click.btnAppend);
        };

        this.on = {
            click: {
                btnAppend: function (e) {
                    var html = $(dictionary.selectors.tmplBlade).html().trim();
                    var $element = $(html);

                    $element.hide();
                    dictionary.elements.bladeContainer.prepend($element);

                    // Slide-in
                    $element.show('slide', { direction: 'left' });
                }
            }
        };

        initialize();
    }

    var pageController = new PageController();
});

</script>

$（文档）.ready（函数（）{
函数PageController（）
{
var=这个，
字典={
元素：{Btnapend:null，bladeContainer:null}，
选择器：{btnAppend:'#btnAppend'，bladeContainer:'.blade容器'，tmplBlade:'#tmplBlade'}
};
变量初始化=函数（）{
//元素
dictionary.elements.btnAppend=$（dictionary.selectors.btnAppend）；
dictionary.elements.bladeContainer=$（dictionary.selectors.bladeContainer）；
//事件
dictionary.elements.btnAppend.on（'click'，that.on.click.btnAppend））；
};
此.on={
点击：{
btnAppend:函数（e）{
var html=$（dictionary.selectors.tmplBlade.html（）.trim（）；
var$element=$（html）；
$element.hide（）；
dictionary.elements.bladeContainer.prepend（$element）；
//滑入
$element.show（'slide'，{direction:'left'}）；
}
}
};
初始化（）；
}
var pageController=新的pageController（）；
});

如何将新元素附加到视图中而不影响以前的元素

我不确定我是否完全理解了你的要求，因为当你添加新元素时，你总是通过移动它们来影响其他元素。但是，您可以防止看到的弹出效果。jQuery ui添加的

.ui效果包装器

是

display:block

，因此将以下内容添加到CSS中：

.blade-container .ui-effects-wrapper {
   display: inline-block !important;
}

然后确保其他刀片始终与容器顶部对齐：

.blade-container .blade {
  ...
  ...
  vertical-align: top;
}

这将使所有刀片碰撞（右侧），并允许新刀片从左侧滑入

如何将新元素附加到视图中而不影响以前的元素

我不确定我是否完全理解了你的要求，因为当你添加新元素时，你总是通过移动它们来影响其他元素。但是，您可以防止看到的弹出效果。jQuery ui添加的

.ui效果包装器

是

display:block

，因此将以下内容添加到CSS中：

.blade-container .ui-effects-wrapper {
   display: inline-block !important;
}

然后确保其他刀片始终与容器顶部对齐：

.blade-container .blade {
  ...
  ...
  vertical-align: top;
}

---

这将使所有刀片都发生碰撞（右侧），并允许新刀片从左侧滑入。

我以前遇到过此问题。我发现绕过它的唯一方法是执行以下操作：

1） 创建一个

.hidden

类宽度

左边距：-200px

2） 将

左边距

上的CSS转换添加到

.blade

类中

3） 将

.hidden

类应用于新刀片服务器

4） 显示新刀片

5） 从新刀片服务器中删除

.hidden

类

---

请参阅下面的解决方案：

我以前遇到过这个问题。我发现绕过它的唯一方法是执行以下操作：

1） 创建一个

.hidden

类宽度

左边距：-200px

2） 将

左边距

上的CSS转换添加到

.blade

类中

3） 将

.hidden

类应用于新刀片服务器

4） 显示新刀片

5） 从新刀片服务器中删除

.hidden

类

请参阅以下小提琴叉子，了解有效的解决方案：