Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add sortable list #19

Open
wants to merge 18 commits into
base: dev
Choose a base branch
from
Open

add sortable list #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
33e7294
add sortable list
Aug 15, 2015
9be797c
update from origin
Oct 27, 2015
8876576
修改fastclick.js 允许对lable里元素的点击事件使用模拟点击，且允许事件传递到label，解决iOS上的点击延迟问题
xiaran113 Nov 23, 2015
4bbd66a
修改fastclick.js 允许对lable里元素的点击事件使用模拟点击，且允许事件传递到label，解决iOS上的点击延迟问题 #95
xiaran113 Nov 23, 2015
38607ef
修改fastclick.js 允许对lable里元素的点击事件使用模拟点击，且允许事件传递到label，解决iOS上的点击延迟问题以及sa…
xiaran113 Nov 23, 2015
1bb9a8a
因为修改了fastclick， 兼容了复合label内点击事件的冒泡，因此将switch改回由label包裹的形式，解决了微信和qq浏览器…
xiaran113 Nov 23, 2015
9a465fa
修改switch样式
xiaran113 Nov 23, 2015
f7f9c77
修改了switch的样式和文档中的html结构；之前在安卓下的微信以及qq浏览器中，switch无法选中是因为input上设置的宽高没有生…
xiaran113 Nov 23, 2015
88625fe
Merge pull request #104 from sdc-alibaba/safriFlicker
Mickey- Nov 23, 2015
645299e
优化fastclick代码
xiaran113 Nov 24, 2015
d4a2d10
Merge branch 'safriFlicker' of github.com:sdc-alibaba/SUI-Mobile into…
Mickey- Nov 24, 2015
7494234
toast组件支持自定义显示时间和自定义样式
Mickey- Nov 24, 2015
8304887
多个Modal类组件（包括toast）同时被呼起时，会按先后顺序被缓存在队列中，前一个modal关闭后，下一个modal才会打开. fix…
Mickey- Nov 24, 2015
15ef330
Merge branch 'dev' of github.com:sdc-alibaba/SUI-Mobile into dev
Nov 24, 2015
e83e281
merge
Dec 17, 2015
69ea552
merge
Feb 3, 2016
c1b625e
Merge branch 'dev' of github.com:sdc-alibaba/SUI-Mobile into dev
Mar 15, 2016
0eece08
uncomment sortable list
Mar 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ module.exports = function(grunt) {
'js/datetime-picker.js',
'js/iscroll.js',
'js/scroller.js',
'js/sortable.js',
'js/tabs.js',
'js/fixed-tab.js',
'js/pull-to-refresh-js-scroll.js',
Expand Down
9 changes: 8 additions & 1 deletion docs/demos/list/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<header class="bar bar-nav">
<a class="button button-link button-nav pull-left back" href="/demos">
<span class="icon icon-left"></span>
返回
返回
</a>
<h1 class="title">列表</h1>
</header>
Expand Down Expand Up @@ -62,6 +62,13 @@ <h1 class="title">列表</h1>
</div>
</a>
</li>
<li>
<a href="/demos/list/sortable-list" class="item-link item-content">
<div class="item-inner">
<div class="item-title">可排序列表</div>
</div>
</a>
</li>
</ul>
</div>
</div>
Expand Down
90 changes: 90 additions & 0 deletions docs/demos/list/sortable-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
---
layout: demo
title: SUI Mobile Demo
---
<div id="page-check-list" class="page">
<header class="bar bar-nav">
<a class="button button-link button-nav pull-left back" href="/demos/list">
<span class="icon icon-left"></span>
返回
</a>
<h1 class="title">可排序列表</h1>
</header>
<div class="content">
<div class="content-block-title">可排序</div>
<div class="list-block sortable sortable-opened">
<ul>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">1 Jenna Smith</div>
<div class="item-after">CEO</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">2 John Doe</div>
<div class="item-after">Director</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">3 John Doe</div>
<div class="item-after">Developer</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">4 Aaron Darling</div>
<div class="item-after">Manager</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">5 Calvin Johnson</div>
<div class="item-after">Accounter</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">6 John Smith</div>
<div class="item-after">SEO</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">7 Chloe</div>
<div class="item-after">Manager</div>
</div>
</div>
<div class="sortable-handler"></div>
</li>
</ul>
</div>
</div>
</div>
1 change: 1 addition & 0 deletions js/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
$.initPullToRefresh($content);
$.initInfiniteScroll($content);
$.initCalendar($content);
$.initSortable();

//extend
if ($.initSwiper) $.initSwiper($content);
Expand Down
8 changes: 3 additions & 5 deletions less/lists.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
max-width: 100%;

&.label {
width: 35%;
width: 55%;
.flex-shrink(0);
margin: 4px 0;
}
Expand Down Expand Up @@ -326,7 +326,6 @@
.hairline-remove(top);
}
// Sortable
/*
.sortable-handler {
position: absolute;
right: 0;
Expand All @@ -335,12 +334,12 @@
z-index: 10;
background-repeat: no-repeat;
background-size: 0.9rem 0.6rem;
background-image: url("@{imgBaseUrl}/i-sortable-handler.png");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAAXUlEQVRIS+3UQQoAIAhEUT153c5Fl2pvxKwMg9+ugpLHqFtaEWua+cjnr/ZOQYK6v9CrrNz+OYQoKAkgpCLRX4hJrUKNkBJSXVB937/LqgXU+wj9L8QcUnMIoSS0ATBUKEUz4fuNAAAAAElFTkSuQmCC");
background-position: center;
width: 1.75rem;
opacity: 0;
visibility: hidden;
right: 0;
cursor: pointer;
}
&.sortable {
.item-inner {
Expand Down Expand Up @@ -373,7 +372,6 @@
.hairline-remove(bottom);
}
}
*/

// Last-childs
li {
Expand Down