標籤: UI

Drop and drag

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-lists/

GRIDSTACK.JS
http://troolee.github.io/gridstack.js/[……]

閱讀更多

網頁前端 framework 整理

Bootstrap 4 alphahttp://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

bootstrap 3 v3.3.7
http://getbootstrap.com/

bootstrap 3 v3.3.1 (中文)
https://kkbruce.tw/bs3/

Foundation for Sites 6
http://foundation.zurb.com/

Google Material design

Polymer Paper Elements Paper elements
https://elements.polymer-project.org/

[……]

閱讀更多

CSS li float:center 實現li水平居中對齊

2020/03/12 更新
發現更簡單的方法，請參考這篇文章
https://vector.cool/css-ul-li-horizontal-align-center-only-css/
在切網頁版的時候，常常需要用到選單水平居中，雖然用<a>標籤很方便，在父容器下text-align center，就可達成上圖編排，但有時候HTML並不是由設計師自己開的，很多清單功能的在HTML上都會用<ul><li>方式呈現，例如頁碼，這是一個普遍慣用的作法，工程師一目了然。
但前端設計師套CSS時卻會遇到無法居中對齊問題，可以向左對齊，可以向右對齊，就是不能水平居中對齊，所以本篇提供一個解決方法，可以順利向上圖一樣，項目居中對齊。
HTML：
<div class="main-container">
    <div class="fixer-container">
        <ul class="list-of-floating-elements">
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li> 
        </ul>
    </div>
</div>

CSS：

<style>
ul li{
	float:left;
	margin:0 20px
}
.main-container {
	float:left;
	position:relative;
	left:50%;
}
.fixer-container {
	float:left;
	position:relative;
	left:-50%;
}
</style>

參考：

[……]

閱讀更多

jQuery javascript關閉 fancybox視窗

由fancybox視窗中關閉：

<a href="javascript:parent.$.fancybox.close();">關閉</a>

或

<script>
$('a').click(function(e){
	parent.$.fancybox.close();
})
</script>

由主頁上關閉fancybox視窗：

<a href="$.fancybox.close();">關閉</a>

或

<script>
$('a').click(function(e){
	$.fancybox.close();
})
</script>

 [……]

閱讀更多