Search jQuery

jQuery Forum

JQM select menu without the full framework

in Developing jQuery Plugins • 11 years ago

I am attempting to use a JQuery Mobile select menu without having to use the full framework and running into problems.

I would prefer to not use the full jquery mobile library because it adjusts my entire page and all controls, links on it and applies style's to the page tag. This causes the look and feel to be adjusted for the whole page. I am using adaptive web design to adjust the pages controls and have been able to successfully apply the JQuery Mobile look and feel for the text boxes when the max-width hits 680, this looks great but my select boxes look bad when applying those same styles. Specifically the drop down arrow is chopped off on the right because of the rounded edges. If possible I would love to have the same look as the text boxes applied to the select menu's and control everything in the CSS file but if there is a trimmed down .js library for select menu's that would be a viable option too.

Has anyone successfully applied the JQuery Mobile look and feel for select boxes with just CSS? Has anyone used a narrow JQuery Mobile library that allows you to target just select menu's and doesn't require the entire JQuery Mobile .js library or style sheets?

I understand the download manager will be available at some point that could potentially allow you to use just the components you are interested in, that would be exactly the kind of thing I could use in order to plug in select menus. Any help will be greatly appreciated! Thanks in advance.

Replies(2)

seanmchug..

Re: JQM select menu without the full framework

11 years ago

I sort of had to do something like that. This may help get you started:

	<html>
	<head>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
	<style type="text/css">
	.lookup-listview
	{
	height:400px;
	width:400px;
	border:3 px ridge #295170;
	background: rgba(188, 220, 255, 0.3);
	position:absolute;
	z-index:10;
	overflow:hidden;

	}
	.lookup-container
	{
	display:inline-block;
	}

	.clicker
	{
	height:100px;
	width:100px;
	border:1px solid Black;
	display:inline-block;
	}
	.clicker:hover
	{
	background-color:#D6EFFF;
	}
	.clicker-container
	{
	margin-left:auto;
	margin-right:auto;
	border:1px solid black;
	padding-left:4px;
	text-align:center;
	}

	</style>
	<script type="text/javascript">
	$(document).ready(function () {
	var myContent = '<li data-role="list-divider">Friday, October 9, 2099 <span class="ui-li-count">2</span></li> <li><a href="index.html"> <h3>Big Bird</h3> <p><strong>You\'ve been invited to a meeting at Filament Group in Boston, MA</strong></p> <p>Hey Stephen, if you\'re available at 10am tomorrow, we\'ve got a meeting with the jQuery team.</p> <p class="ui-li-aside"><strong>6:24</strong>PM</p> </a></li> <li><a href="index.html"> <h3>jQuery Team</h3> <p><strong>Boston Conference Planning</strong></p> <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p> <p class="ui-li-aside"><strong>9:18</strong>AM</p> </a></li> <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li> <li><a href="index.html"> <h3>Avery Walker</h3> <p><strong>Re: Dinner Tonight</strong></p> <p>Sure, let\'s plan on meeting at Highland Kitchen at 8:00 tonight. Can\'t wait! </p> <p class="ui-li-aside"><strong>4:48</strong>PM</p> </a></li> <li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li> <li><a href="index.html"> <h3>Amazon.com</h3> <p><strong>4-for-3 Books for Kids</strong></p> <p>As someone who has purchased children\'s books from our 4-for-3 Store, you may be interested in these featured books.</p> <p class="ui-li-aside"><strong>12:47</strong>PM</p> </a></li> <li><a href="index.html"> <h3>Mike Taylor</h3> <p><strong>Re: This weekend in Maine</strong></p> <p>Hey little buddy, sorry but I can\'t make it up to vacationland this weekend. Maybe next weekend?</p> <p class="ui-li-aside"><strong>6:24</strong>AM</p> </a></li> <li><a href="index.html"> <h3>Redfin</h3> <p><strong>Redfin listing updates for today</strong></p> <p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p> <p class="ui-li-aside"><strong>5:52</strong>AM</p> </a></li> <li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li> <li><a href="index.html"> <h3>Angela Smith</h3> <p><strong>Link Request</strong></p> <p>My name is Angela Smith, SEO Consultant. I\'ve greatly enjoyed looking through your site and I was wondering if you\'d be interested in providing a link</p> <p class="ui-li-aside"><strong>6:24</strong>AM</p> </a></li> <li><a href="index.html"> <h3>Mike Taylor</h3> <p><strong>This weekend in Maine</strong></p> <p>Sounds good, let me check into our plans.</p> <p class="ui-li-aside"><strong>6:24</strong>AM</p> </a></li>';
	$(".clicker").bind("click", function (e) {
	var caller = $(e.currentTarget);
	var caller_top = caller.position().top;
	var caller_left = caller.position().left;
	$("p").html("top: " + caller_top + ", " + "left: " + caller_left);
	$(".clicker").css({ "background-color": "" });

	$(this).css("background-color", "blue");

	var lookup = $("#lookup");
	var lookup_container = lookup.find(".lookup-container");
	var lookup_listview = lookup.find(":jqmData(role=listview)");
	lookup_listview.html(myContent);
	lookup_listview.listview("refresh");
	var height = lookup_container.height();
	var width = lookup_container.width();

	lookup.css({
	"top": caller_top + caller.height() / 2,
	"left": caller_left + caller.width() / 2,
	"height": "0px",
	"width": "0px"
	});
	lookup.animate({
	"top": caller_top + caller.height() / 2 - height / 2,
	"left": caller_left + caller.width() / 2 - width / 2,
	"height": height,
	"width": width,
	"opacity": "0.5",
	"filter": "alpha(opacity=50)"
	}, 5000);

	});
	});
	</script>
	</head>
	<body>
	<div data-role="page">
	<div data-role="header"><h1>Lookup Test</h1></div>
	<div data-role="content" style="text-align:center;">


	<div id="lookup" class="lookup-listview" style="opacity:0.0;filter:alpha(opacity=0);">
	<div class="lookup-container">
	<ul data-role="listview">
	</ul>
	</div>
	</div>





	<div class="clicker-container">
	<p>top: 0, left: 0</p>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<br />
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<br />
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<br />
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<br />
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<br />
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<div class="clicker"></div>
	<br />
	</div>
	</div>
	<div data-role="footer"><h4>Lookup Test</h4></div>
	</div>
	</body>
	</html>

nhporter

Re: Re: JQM select menu without the full framework

11 years ago

Thanks much for your help!

Top Reply

Response title

Attachments

jQuery Forum

JQM select menu without the full framework

Replies(2)

Re: JQM select menu without the full framework

Re: Re: JQM select menu without the full framework

Statistics

Tags

Actions