hiroprotagonist / jquery.mobile.actionsheet Goto Github PK
View Code? Open in Web Editor NEWAn actionsheet for jquerymobile
An actionsheet for jquerymobile
It seems to have an issue, the actionsheet buttons are not rendered at all when placed in a jqm datagroup
It is sometimes necessary to not be performed close transitions, for example to avoid flicker when deriving to other elements with animate.
For this, I propose change within the close method (see internal 'if'):
if( $.support.cssTransitions ) { ... }
new 'if' conditions (taking advantage of event param):
if( $.support.cssTransitions && event!==false ) { ... }
so you can call to close without transition :
$('#sheet').actionsheet('close',false);
This plugin is exactly what I was looking for however unfortunately it doesn't seem to work with Webkit browsers (tested on iPhone and Chrome). Any ideas why or plans to fix?
One of my actionsheet buttons navigates to a new page. When I return to the page that hosts the actionsheet, after any period of time, I see it disappearing (presumably the remaining close animation).
Is there a way to "clear it out" - or cleanly close it down before leaving the original page?
I see in your example that you can include a cancel button in the actionsheet, but when I try I get an unbind error.
Here is my actionsheet (still in development)
<a href="#" data-role="button" data-theme="c">Delete</a>
<a href="#" data-role="button" data-theme="c">Copy</a>
<a href="#" data-role="button" data-theme="c">Move</a>
<a href="#" data-role="button" data-theme="c" data-rel="close">Cancel</a>
here is the error
jquery.mobile.actionsheet.js:72 Uncaught TypeError: Cannot call method 'unbind' of undefined
Do you have any ideas?
when i use login sample on android pad , it jumped not smooth, please tell me how to fix it,3q
While the actionsheet is displaying on screen, I am still able to scroll down the content. And when I scroll down, the actionsheet moves up just like its position relative to the page content itself.
Does anyone know how to fix this? It is better to lock the scrollbar while the actionsheet displays on screen so that its position is fixed.
Thank you for this marvelous JQ Mobile plugin .... I'm trying to use it but I found that when I have a link with rel='external' the link doesnt work on Android phone. Its working fine in Chrome for example but not on my mobile phone. Without rel attribute it works fine ... is this something known or how to make this work properly for this case?
Thank you !!!
David
A) Is this project still alive?
And...
B) How do you open the action sheet programmatically?
possible fix
css
.ui-actionsheet-wallpaper {
background-color: black;
opacity: .3;
width: 100%;
height: 100%;
display: none;
z-index: 10;
/* added the following */
position:absolute;
top:0;
}
js
/* made changes to the open method, close method, and added to private methods (_positionContent, _resizeWallPaper)*/
open: function () {
var currentContent = this.content.parents(':jqmData(role="content")');
this.element.unbind('click'); //avoid twice opening
this.wallpaper = $('<div>', {
'class': 'ui-actionsheet-wallpaper'
});
this._resizeWallPaper(currentContent);
this.wallpaper.appendTo(currentContent);
$(window).bind('orientationchange.actionsheet',$.proxy(function () {
this._resizeWallPaper(currentContent);
this._positionContent();
},this));
this.wallpaper.show();
window.setTimeout(function (self) {
self.wallpaper.bind('click', function (event) {
self.close();
});
}, 500, this);
this._positionContent();
this.content.animationComplete(function (event) {
$(event.target).removeClass("ui-actionsheet-animateIn");
});
this.content.addClass("ui-actionsheet-animateIn").show();
},
close: function () {
var self = this;
this.wallpaper.unbind('click');
/* only change here*/
$(window).unbind('orientationchange.actionsheet');
if (!$.support.cssTransitions) {
this.wallpaper.remove();
this.content.fadeOut();
this.element.bind('click', function () {
self.open();
});
return;
}
this.content.addClass("ui-actionsheet-animateOut");
this.wallpaper.remove();
this.content.animationComplete(function (event) {
self.reset();
});
},
_resizeWallPaper: function (currentContent) {
var paddingLeft = currentContent.css('paddingLeft');
var paddingRight = currentContent.css('paddingRight');
var paddingTop = currentContent.css('paddingTop');
this.wallpaper.css({ marginTop: '-' + paddingTop, marginLeft: '-' + paddingLeft, marginRight: '-' + paddingRight });
},
_positionContent: function () {
var height = $(window).height();
var width = $(window).width();
var scrollPosition = $(window).scrollTop();
this.content.css({
'top': (scrollPosition + height / 2 - this.content.height() / 2),
'left': (width / 2 - this.content.width() / 2)
});
}
data-role='actionsheet' ,,the face will change to button, so how can i use this actionsheet on the other controller?? like the list view ?
I have 3 different action sheets in my footer. If I click one it works just fine, except that the footer is not part of the "wallpaper" that closes the actionsheet. This leads to my problem, since if I have one action sheet open, I can still click a different actionsheet in the footer and then this one pops up over the existing one.
I would either like to have the wallpaper extend into the footer (so I can't select a new sheet until I cancel the existing one) or learn how to close the open sheet before opening the new one.
Hi, thank you for creating jquery.mobile.actionsheet it's definitly a very useful plugin that I'm planning to introduce in an open-source jquerymobile game I'm developing for android.. but, it seems to me that is too ios oriented, which is good, but I'll appreciate some config options to turn it more like android action sheet, if you ask me how android action sheet looks like I would say pretty much like this:
http://dev.sencha.com/deploy/touch/examples/kitchensink/ (Go to User Inferface -> Overlays -> Action Sheet)
so the two only things I'm missing are:
I think 1) could be activated in some "android mode" setting..
I would like to know if you think these features are interesting and consider to implement them or accept patches about them..
Thank you!
Hi
Thanks for this great tool, I am using it extensively on my page.
This actionsheet works perfectly and looks like it should:
abbrechen
Art wählen
Menu
neu anmelden
Meine Einstellungen
Beobachtungen
exportieren (CSV)
Datenfelder
verwalten
Datenfelder
exportieren (CSV)
Hierarchischer
Modus
</div>
This one here, on the same page, works o.k. but looks a lot different:
How can I get this one to look the same?
My page is here: http://barbalex.iriscouch.com/evab-ch_barbalex_evab/_design/evab/index.html
You have to signup, then click "neue Beobachtung", save a Beobachtung (a sighting of a species).
Now you see the good looking actionsheet by clicking the Menusymbol on the top right of the page. And you will see the hideous one by clicking on "löschen" in the footer bar.
The code is here: https://github.com/barbalex/EvabMobile
Help is appreciated.
Sorry, don't know how to correctly include code an this page and can't upload a file either.
Alex
Hi,
I am having two separate html pages which contains just the content part of action sheet. I have one main html page which calls these two html pages. but tats not working. When i have all 3 files in a single page, it works fine. Can anyone help me out in it
Hey there!
I am using your plugin with the latest version of jQM and I wanted to have a plain button that opens the actionsheet. I have no idea how jQM < final have solved it but it's not enough to specify the data-icon attribute on a normal link (anymore?).
You are using "data-role='actionsheet'" but that doesn't allow me to style it like a button because jQM expects the element to have a data-role of "button".
I found a temporary fix by changing the selector in your file to
$( ":jqmData(role='actionsheet')", this ).each(function() {
to
$( ":jqmData(action='actionsheet')", this ).each(function() {
It's not the best solution but it allows me to use a button as an opener.
Maybe you got a better idea on how to solve it?
– Dominik
I was playing around with your examples and I noticed that it is not disabling the footer buttons. Since they are still clickable it causes multiple actionsheets to appear. Is this something that is fixable in the template or does it have to be fixed in the plugin code?
Hi,
thanks so much for creating this - is exactly what I was looking for.
I was finding a two problems when testing this in IE9. I seem to have found fixes for both which I thought I'd share. Please note that I'm a bit of a js novice so apoligies if I say anything dumb;
Firstly, IE doesn't seem to like function parameters passed to the window.setTimeout callback. I applied afix, which appears to have resolved it - see http://der-design.com/javascripts/cross-browser-settimeout
Secondly, I get null passed in to the event parameter in this.content.animationComplete. I'm guessing that this is due to IE's lack of support for css transitions? Anyway I fixed it like this:
if ($.support.cssTransitions) {
this.content.animationComplete(function (event) {
$(event.target).removeClass("ui-actionsheet-animateIn");
});
this.content.addClass("ui-actionsheet-animateIn").show();
}
else {
this.content.fadeIn();
}
thanks again
This is working beautifully for me.
Here is where I can use some help if possible.
I have a navbar with 4 buttons in the footer, 2 of them launch a dialog but I would like to have only one open at a time.Which means that one of the overlays is active (displayed), I would like it to hide when the other overlay is activated by clicking on the a data-role="actionsheet". I have tried a few things without success. Thanks!
a href="#home">Home
a href="#groupdata">Groups
a data-role="actionsheet" data-sheet='map_filter_overlay' id="filter-a">Map Filter
a data-role="actionsheet" data-sheet='holeselector_overlay' >Go to Hole
I am trying to use actionsheets with a split list, but it is converting the lists into buttons. This messes up the look. Is their a way to apply an action sheet without it converting the link to a button?
This is a really nice plugin but I am wondering if it is possible to change the look of the button. To tell you the truth, I don't want the text that calls the popup to look like a button. I want it to be plain text. I looked at the css sheet but cannot find where to change it. Is it in the js file? If it is, how can I change that?
You need to re-bind your click events to vclick for it to work in beta 1. Just a heads up.
Hi, some licencing Information would be great!
Missing css keyframes
I am building my page with ajax and it is not linking the actionsheet to the link. I assume this is because your code is running before my page is done building. So I need to know how to call this code after I am done building my page with ajax?
'top':(height / 2 - this.content.height() / 2),
'left': (width / 2 - this.content.width() / 2)
wallpaper's size is the whole page size. on some phone (i tested in webkit on HTC One X)it is slow to renderer the wallpaper. I have tried to set the wallpaper size the same as visible window size, the performance is better.
I think that the turn of Background and Content is reverse.
Background are coming above Content.
I am developing iPhone App using jQuery Mobile 1.0 Final & PhoneGap.
@hiroprotagonist this project is really great. I started using it for the second time in a project for a client and discovered that the fadeIn/fadeOut support had been removed. I was able to add the old fadeIn/fadeOut code to my application's CSS (by SCSS) but wonder if this support should be standard? Also clear directions on how to change the transition in an application, such as: add the following to your application's CSS to use fade transitions:
.ui-actionsheet-animateIn {
-webkit-animation-name: actionsheet-open-fade;
}
.ui-actionsheet-animateOut {
-webkit-animation-name: actionsheet-close-fade;
}
I tried to put the actionsheet trigger into a JQM listview. Did not work as-is.
I got it to work by doing the following:
If you want I can make a commit of the modified version. Maybe something you can use.
Sonst ein super Plugin!
JQM version: 1.0b1
Issue: After open and close first time, on the second time the box is not closed properly.
Reason: In the open function the wallpaper DIV append with jqm-content. This append content stored in the hash history, after hit the close button second time the immediate wallpaper div removed but the one from history stays on.
Solve: Create the wallpaper at initiation and keep it hidden [Check the changes on my fork.]
I think there's a mistake in the _init code that moves external actionsheets into the current page's content.
var currentContent = this.content.parents(':jqmData(role="page")').children(':jqmData(role="content")');
It should rather be:
var currentContent = this.element.parents(':jqmData(role="page")').children(':jqmData(role="content")');
/ Fredrik
JQM 1.1.0 RC1 introduced zooming issues for me (no longer respected viewport), thus I disabled zooming using $.mobile.zoom = "disable"; but this also disabled JQM-actionsheet.
Reenabling zooming, reenables actionsheet.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.