jquery ui - Gmail like listview item removing - jquerymobile -

-

i'm building phonegap mobile app jqm 1.3. have listview element, each list item have 2 actions, rename when swipe right, , delete when swipe left. want achieve behavior in gmail mobile application. when list item dragged aside (more threshold), "layer" shown related buttons. i'm using code jquery mobile swipe list demo, popup on swipe event, not fulfill needs.

how stuff can implemented ? there plugin achieve functionality?

i tried make this. working demo here - http://jsfiddle.net/q9htn/19/

first html:

<ul id="list" data-role="listview"></ul>

then css. not happy having define row height way , sure there must better ways how dynamically, should ok purpose. makes sure row stays during animations happen.

.row {     height: 1em; }  .item {     position: absolute;     display: inline-block;     width: 100%;     right: -1em; /* makes item fly out right */ }  .menu {     width: 100%;     display: inline-block;     text-align: center; }

javascript:

var items = ["audi", "mercedes", "skoda", "rover", "nisan", "mazda", "toyota"];  $.each(items, function(index, item) {     var li = $("<li class='row'>");     var contents = $("<span class='item'>" + item + "</span>");     contents.attr("data-customid", index); // set id     li.append(contents);     $("#list").append(li); });  $("#list").listview("refresh");  // attach swiperight handler on list $("#list").on("swiperight",">li",function(e){     var li = $(this);     var contents = $(li.children()[0]);     var item = contents.text(); // item value     var itemid = contents.attr("data-customid");      var delbutton = $("<a>").text("yes").click(function(e){              // delete handler, fade out menu , remove row             menu.fadeout(function(){                 li.remove();                 alert("deleted " + item + " id = " + itemid);             });         });         var cancelbutton = $("<a>").text("no").click(function(e){             // cancel handler, remove menu , show item             menu.fadeout(function(){                contents.animate({width: 'toggle'}, function(){                    menu.remove();                 });             });          });          // create menu         var menu = $("<span />").append("sure? - ").append(delbutton).append(" | ").append(cancelbutton)             .css("display", "none")             .addclass("menu");          // insert menu         contents.after(menu);            // slide item          contents.animate({width: 'toggle'}, function(){             // , fade in menu             menu.fadein();         });  });

Comments

Post a Comment

Popular posts from this blog

html5 - What is breaking my page when printing? -

-
Image
i have questioner , don't know why when printing it's creating break before first question. live demo (link) i able resolve issue removing fieldset container had wrapped in.. having fieldset element causing of fields grouped together, , since not fit on first page, being pushed second page. removing fieldset element, able firefox print first 2 questions on page 1 identically chrome. it seems not new problem firefox , fieldset not playing nice found old bugzilla ticket 2008 has persisted , still being commented on in 2014 (link) if retaining fieldset important, found solution else came here (link) <script type='text/javascript'> $(window).bind('beforeprint', function(){ $('fieldset').each( function(item) { $(this).replacewith($('<div class="fieldset">' + this.innerhtml + '</div>')); } ) }); $(window).bind(
Read more

c# - must be a non-abstract type with a public parameterless constructor in redis -

-
when save object, got below error must non-abstract type public parameterless constructor in order use parameter 't' in generic type or method 'servicestack.redis.redisclient.store<t>(t) redisclass.getinstnace().store(msg); // error here redisclass.getinstnace().save(); as third party's class, can not edit how save object? could create wrapper around third party object call constructor, store wrapper? e.g. public class mywrapper { public thirdpartyobject thirdpartyinstance { get; set; } public mywrapper() { thirdpartyinstance = new thirdpartyobject("constructors"); } }
Read more

ajax - PHP/JSON Login script (Twitter style) not setting sessions -

-
i'm having trouble getting twitter style login work properly, reason gets stuck at session_register("useremail"); session_register("userpass"); and doesn't redirect after it. if enter wrong account data, works , appropriate error message pops up. this full code: <?php if(empty($_post['email']) || empty($_post['password'])) { die(msg(0,"all fields required")); } if(!(preg_match("/^[\.a-z0-9_\-\+]+[@][a-z0-9_\-]+([.][a-z0-9_\-]+)+[a-z]{1,4}$/", $_post['email']))) die(msg(0,"you haven't provided valid e-mail")); $host="localhost"; $username="root"; $password="x"; $db_name="x"; $tbl_name="x"; mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select db"); $useremail=$_post['email']; $userpass=
Read more