https://github.com/erlendellingsen/swipeaction-jquery

A simple code that allows you to implement SwipeActions (like delete, favorite, etc) using only jQuery and html.
https://github.com/erlendellingsen/swipeaction-jquery

Last synced: about 1 month ago
JSON representation

A simple code that allows you to implement SwipeActions (like delete, favorite, etc) using only jQuery and html.

• Host: GitHub
• URL: https://github.com/erlendellingsen/swipeaction-jquery
• Owner: ErlendEllingsen
• License: mit
• Created: 2015-11-30T14:37:57.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-11-30T14:54:05.000Z (about 9 years ago)
• Last Synced: 2023-05-23T00:26:20.982Z (over 1 year ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SwipeAction-jquery

A simple code that allows you to implement SwipeActions (like delete, favorite, etc) using only jQuery and html. 

### Information / Disclaimer / Warning

This is not finished at all, and is simply just a code dump from something I did at work, and is therefore not (yet) optimized as a plugin, and you therefore have to do some effort yourself to customize it to your needs. I have made it available as a jQuery-plugin, but you have to implement actions etc. yourself.

### Basic setup

You can use this basic setup to implement the functionality to your own app/site.. 

#### HTML

```



  


  	Lorem ipsum dolor sit amet..

  

  


  	Delete

  
 



```


#### CSS

```

div.reportRow {

	width: 100%;

	overflow: hidden;

	white-space: nowrap;

	height: 80px; 

	vertical-align: top;

	border-radius: 0px;

	padding: 0px;

	margin: 0px;

}

div.reportRow div.reportSwipe {

	width: 100%;

	display: inline-block;

	left: 0px;

	width: 100%;

	padding: 10px; 

	margin: 0px;

	height: 80px; 

	position: relative;

	overflow: auto;

	vertical-align: top;

}

div.reportRow div.deleteBtn {

	display: inline-block;

	width: 300px;

	padding: 10px;

	position: relative;

	overflow: hidden;

	white-space: nowrap;

	height: 80px; 

	min-height: 80px;

	max-height: 80px;

	vertical-align: top;

	text-align: center;

	color: #FFF;

	background-color: #BB0000; 

	font-size: 22px;

}

```

#### Javascript

```

$('.reportSwipe').swipeAction({

	name: 'offlineReports'

});

```