I'm quite sure this has never been asked before.
I am new to jQuery and found jqmPhp very easy to use. However, I am trying to achieve a few things that I find very complicated to implement.
I need to filter list items (like here) and enable the user to check/uncheck several list items to delete. I am trying to implement a similar feature to what Gmail mobile is doing (with a checkbox on the left, where selecting it will make the relevant row highlight and allows users to just click a button to delete checked rows).
Is it possible at all to do that with jqmphp? If so, can anyone assist me with more information, links or code?
I made a Demo for you, by converting list-view into check-able list items.
http://jsfiddle.net/Palestinian/vcXmK/
HTML
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul id="list-view-test" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li>Adam Kinkaid
</li>
<li>Alex Wickerham
</li>
<li>Avery Johnson
</li>
<li>Bob Cabot
</li>
<li>Caleb Booth
</li>
<li>Christopher Adams
</li>
<li>Culver James
</li>
</ul>
Delete
Reset
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
Code
// Change icons
$('#list-view-test').find('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-arrow-r')) {
$(this).removeClass('ui-icon-arrow-r').addClass('ui-icon-checkbox-off');
}
$('#list-view-test').listview('refresh');
});
// toggle "checked/unchecked"
$('#list-view-test').on('click', 'li', function (event) {
event.preventDefault();
$(this).find('span.ui-icon').removeClass('ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');
});
// Delete selected
$('#del').on('click', function () {
$('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-checkbox-on')) {
$(this).closest('li').remove();
$('#list-view-test').listview('refresh');
}
});
});
// Clear selection
$('#reset').on('click', function () {
$('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-checkbox-on')) {
$(this).removeClass('ui-icon-checkbox-on').addClass('ui-icon-checkbox-off');
}
});
});
Related
i am currently working on an drag and drop system.
I would like to add an form that sends the outcome of the dragged boxes(location there currently in set by visitor) to my e-mail. Code is below.
<style type="text/css">
/* show the move cursor as the user moves the mouse over the panel header.*/
#draggablePanelList .panel-heading {
cursor: move;
}
</style>
<!-- Bootstrap 3 panel list. -->
<ul id="draggablePanelList" class="list-unstyled">
<li class="panel panel-info">
<div class="panel-heading">You can drag this panel.</div>
<div class="panel-body">Content ...</div>
</li>
<li class="panel panel-info">
<div class="panel-heading">You can drag this panel too.</div>
<div class="panel-body">Content ...</div>
</li>
</ul>
jQuery(function($) {
var panelList = $('#draggablePanelList');
panelList.sortable({
// Only make the .panel-heading child elements support dragging.
// Omit this to make then entire <li>...</li> draggable.
handle: '.panel-heading',
update: function() {
$('.panel', panelList).each(function(index, elem) {
var $listItem = $(elem),
newIndex = $listItem.index();
// Persist the new indices.
});
}
});
});
All help is welcome!
So I have a layout system that I am working on that allows users to click on links on a side menu to access some services.
So basically here is the simple html design
<div class="col-md-2" id="admin_menu">
<section class="list-group">
opt 1
opt 2
opt 3
Opt 4
</section>
</div>
<div class="col-md-10" id="admin_content">
<section class="">
Some content
</section>
</div>
The layout is working as i want it to. A small menu to the left and the main content to the right.
But I have a small issue with the design. As you can see the content is all on one page. When the user clicks on the opt2,3,4 links, he or she will be redirected to the respective page which will also contain the side menu.
So my questions are
What is the most convenient way/ways to create such a design whose
menu is needed in more than one interface.
How do i make the active link change color considering that most
likely the whole page will reload.
Here is the image for the design. The first link shows the style that the active link should have
include "menu.php";
And menu.php contains the menu.
Also works with
require_once "menu.php";
For question two, give each item a unique numbereid (listitem1, listitem2...) and on the page itself create a style tag:
<style>
#listitem1 {
whatever...
}
</style>
Depending on the page.
You can try this code i arranged for you:
1)first you can add some id in your code to identify in a unique way each link
2) second you just add some jquery code in the end of the body of the html code
the idea is that when you send the mouse over the link it changes color you can specify the color by yourself and when the mouse is out it changes color again try that i did it only for the first 3 links but you can do it for many link when you get the idea.
<div class="col-md-2" id="admin_menu">
<section class="list-group">
opt 1
opt 2
opt 3
Opt 4
</section>
</div>
<div class="col-md-10" id="admin_content">
<section class="">
Some content
</section>
</div>
<script>
$(document).ready(function(){
$("#first").mouseover(function () {
$("#first").css({
'color':'red'
});
});
$("#first").mouseout(function () {
$("#first").css({
'display':'lightgray'
});
});
});
$(document).ready(function(){
$("#second").mouseover(function () {
$("#second").css({
'color':'blue'
});
});
$("#second").mouseout(function () {
$("#second").css({
'display':'lightgray'
});
});
});
$(document).ready(function(){
$("#third").mouseover(function () {
$("#third").css({
'color':'yellow'
});
});
$("#third").mouseout(function () {
$("#third").css({
'display':'lightgray'
});
});
});
</script>
As #Faried said, you can include the menu into the main page.
And as for the second question you can use
<?php if(isset($_GET['page']) && $_GET['page']=="pageName")
{
//style for active link
} else
{
//non-active style
}
I have the following layout
<div id="tabs">
<ul>
<li>Create Username</li>
<li>View Search Logs</li>
<li>Assign Values Table</li>
<li>Edit Values Table</li>
<li>Create Values Table</li>
</ul>
<div id="tabs-1">
<h2>Create Username</h2>
</div>
<div id="tabs-2">
<h2>View Search Logs</h2>
</div>
<div id="tabs-3">
<h2>Assign Values Table</h2>
</div>
<div id="tabs-4">
<h2>Edit Values Table</h2>
</div>
<div id="tabs-5">
<h2>Create Values Table</h2>
</div>
</div>
Each tab has a form in it, when the form is submitted and the page reloads I want the visible tab to still be the tab the user was last on (instead of it going back to the first).
Each form has a hidden field that contains the index of that tab. I then use the below:
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?>
});
});
</script>
This results in showing the right thing e.g
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
selected: 2
});
});
</script>
However the first tab is still the tab that is shown.
$("#tabs").tabs({
selected: 2
});
Should be:
$("#tabs").tabs({
active: 2
});
Tabs uses active property and not selected property.
Also note that the index is base 0, so if you want to select the 2nd tab, your value needs to be 1.
One option would be to include jquery-cookie.js an use tabs like this:
$( "#tabs" ).tabs({
cookie: {
expires: 1
}
});
And this will automatically manage your last open tabs with cookie.
I have two questions. I am using jquery selectable ui for a checkbox.
http://jsfiddle.net/skeR4/4/
1.) How can i change the script, so on click of a different <li> it also highlights that element, instead of deselecting what was previously highlighted. and to deselect an element the user reclicks the element. this way the user can select multiple elements by clicking each one individually without having to ctrl+click to select multiple.
<div class="demo">
<ol id="selectable">
<li class="ui-state-default">1<input type="checkbox" value="something"></li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
</ol>
</div>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
$("#selectable").bind("mousedown", function(e) {
e.metaKey = true;
}).selectable();
DEMO
I have the following script which appears multiple times on my page. I have a simple slide toggle attached to <div class="info"> and contolled by <a rel="viewinfo"> tag, but when I click on the anchor, all the divs with class info slide.
here is the HTML/PHP
<div class="couplistMeta">
<a class='view' rel="viewinfo" href="#">View Coupon</a>
<a class="print" href="#">Print</a>
</div>
<div class="info">
<p><?php echo $rec2[4]." -- Phone: ".$rec2['phone']; ?></p><p><?php echo $rec2['address']." -- ".$rec2['city'].", ".$rec2['state']." ".$rec2['zip']; ?></p>
</div>
Here is the Javascript
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$('div.info').slideToggle(400);
return false;
});
});
I tried using $(this).next('div.info').slideToggle(400); but this just broke the effect. So $('div.info') is too general, how can I be more specific with the JS?
Try this:
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$(this).parent().next('.info').slideToggle(400);
return false;
});
});
The issue being due to $('div.info') implicitly iterating over all div elements with the class info on the page.