http://jsfiddle.net/bcAH2/5/
i am working on a simple project there are 12 objects that are sort able using jquery ui
how can i add link behind each block and enable it so if i double click it the link open in new tab
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default four">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
and the jquery function obviously
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
You can add the URLs to each li element as follows (see here for details on HTML5 custom attributes):
<ul id="sortable">
<li class="ui-state-default" data-href="http://www.google.co.uk">1</li>
<li class="ui-state-default" data-href="http://www.bbc.co.uk">2</li>
<li class="ui-state-default" data-href="http://www.yahoo.co.uk">3</li>
...
Then use the .dblclick() function in jQuery to capture the double click event, retrieve the URL behind the block and navigate to the URL:
$( "#sortable li" ).dblclick(function() {
window.open( $(this).attr('href') );
});
See here for a Fiddle
Related
I would like to use feather-icons in Asp.net Core cshtml files. I followed their github steps but it won't show as it is stated in the docs:
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" asp-controller="Home">
<i data-feather="home"></i>
Home
</a>
</li>
</ul>
_Layout
<script src="~/lib/feather-icons/dist/feather.js"></script>
You should add this code feather.replace() in js first.
And you can use online js reference, you can refer to this.
#{
ViewData["Title"] = "Test";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Scripts{
<script src="https://unpkg.com/feather-icons"></script>
<script>
feather.replace()
</script>
}
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" asp-controller="Home">
<i data-feather="home"></i>
Home
</a>
</li>
</ul>
Here is the result:
Hi I am using jQuery mobile to build a mobile web application.
And I am learning from this page.
Specifically, how can I display children when I filter in collapsible set?
For example, from the example code, when I enter cats, it gives me back Animal blocks. I need to click it then see the cats. Is there any ways I can display only cats (or in another words: how can auto expand corresponding blocks?) when I search cats.
<form>
<input data-type="search" id="searchForCollapsibleSetChildren">
</form>
<div data-role="collapsibleset" data-filter="true" data-children="> div, > div div ul li" data-inset="true" id="collapsiblesetForFilterChildren" data-input="#searchForCollapsibleSetChildren">
<div data-role="collapsible" data-filtertext="Animals Cats Dogs Lizards snakes">
<h3>Animals</h3>
<ul data-role="listview" data-inset="false">
<li data-filtertext="Animals Cats">Cats</li>
<li data-filtertext="Animals Dogs">Dogs</li>
<li data-filtertext="Animals Lizards">Lizards</li>
<li data-filtertext="Animals Snakes">Snakes</li>
</ul>
</div>
<div data-role="collapsible" data-filtertext="Cars Acura Audi BMW Cadillac">
<h3>Cars</h3>
<ul data-role="listview" data-inset="false">
<li data-filtertext="Cars Acura">Acura</li>
<li data-filtertext="Cars Audi">Audi</li>
<li data-filtertext="Cars BMW">BMW</li>
<li data-filtertext="Cars Cadillac">Cadillac</li>
</ul>
</div>
<div data-role="collapsible" data-filtertext="Planets Earth Jupiter Mars Mercury">
<h3>Planets</h3>
<ul data-role="listview" data-inset="false">
<li data-filtertext="Planets Earth">Earth</li>
<li data-filtertext="Planets Jupiter">Jupiter</li>
<li data-filtertext="Planets Mars">Mars</li>
<li data-filtertext="Planets Mercury">Mercury</li>
</ul>
</div>
</div>
You can use the filterablefilter event (see API) to execute some JS after each search:
$(document).on("filterablefilter", "#collapsiblesetForFilterChildren", function(event)
{
var results = $("[data-role=collapsible]:visible");
if (results.length !== 0)
$(results[0]).collapsible("expand");
});
This code expands the first collapsible in the result set (if present).
JSFiddle
Can anyone please help me?
I'm trying to create a menu inside an external jquery mobile panel. This is JQM 1.4.0 that supports external panels.
I have a collapsible listview inside the external panel. There is some kind of inset applied that I don't seem to be able to get rid off for submenu3 and inside it as well.
Please check out my fiddle: http://jsfiddle.net/UHYz9/2/
Here's the html:
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header">
<h1>External panels</h1>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth">
Open External Panel
</div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h3>Menu</h3>
<ul data-role="listview" style="padding-right: 8px">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li data-role="collapsible" data-iconpos="right" data-inset="false">
<h2>Submenu 3</h2>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Submenu 4</li>
<li>Submenu 5</li>
</ul>
</div>
Here's the js:
$(function() {
$("body>[data-role='panel']").panel();
$("#externalpanel ul").listview();
$("#externalpanel").trigger("create");
});
For this to work, please include the following css and js links:
http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css
http://demos.jquerymobile.com/1.4.0/js/jquery.js
http://demos.jquerymobile.com/1.4.0/js/jquery.mobile-1.4.0.min.js
Thanks a lot!
You need to wrap contents on panel in <div data-role="content"> or `.
To enhance content of panel or any other div, use .enhanceWithin().
$(function () {
$("body>[data-role='panel']").panel().enhanceWithin();
});
Demo
I have problem of dynamically URL in a popup. Here my code:
<!-- content -->
<ul data-role="listview">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul><!-- /content -->
<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
<ul data-role="listview" style="min-width:210px;">
<li data-role="divider">Choose an action</li>
<li>View details</li>
<li>Share</li>
</ul>
</div><!-- /popup-menu -->
Basically, when I click link on my popup, I'll go to the page where the callee's url is.
So, if I click List 1a the popup shows, then I click View details the page direct me to URL person.php?id=1
How can I do that?
I could just create popup divs multiple times according to the number of the list, but I think it's a waste of DOM object (my last resort if I don't find any elegant solution)
Thanks
Since you actually need to pass only an id of a person to your popup you can achieve your goal this way:
First of all simplify your listview markup and store an id in data-id attribute of an anchor of a listview item
<ul data-role="listview" id="list">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul>
and add an id tag to 'View Details` anchor in your popup for easier access later on
<li><a id="details" href="#">View details</a></li>
Second on click() event store current id to a globally available variable (let's call it currentId) and programmatically open the popup.
var currentId = 0;
...
$('#page').on('pageinit', function(){
$('#list li a').click(function(e){
e.preventDefault();
currentId = $(this).attr("data-id");
$("#popup-menu").popup("open", {transition:"slideup"} );
});
});
Third in popupbeforeposition event construct your url and assign it to appropriate anchor.
var baseURL = "person.php?id=";
...
$('#popup-menu').on('popupbeforeposition', function(){
$("#details").attr("href", baseURL + currentId);
});
And finally here is working jsFiddle for you.
i have a simple nested UL's and i need to make only main UL sortable not the sub UL
example
<ul class="blocks-list" id="sortme">
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-tags">Server</li>
<li class="tag-user">You</li>
</ul>
</li>
<ul class="mini-blocks-list">
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-user">You</li>
</ul>
</li>
</ul>
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-user">You</li>
</ul>
</li>
</ul>
when i used this Jquery Code
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "sort_menu.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
});
it made both UL blocks-list and mini-blocks-list sortable
what i need is only to make blocks-list LI's sortable not both UL's
It seems a limitation in jQuery sortable, you could try this plugin or this one if you don't find out a pure jQuery solution.
You can use the sortable items option to filter exactly what you need and to keep other items from being sortable. For example items: "> li". docs