我想设计一些像我放在上面的照片，它给出了我想要完成的事情的基本概念。我认为这样的事情可以让用户根据车牌的外观(和类别)进行选择。
此外，它还预先向用户显示价格，并允许用户浏览不同的车牌。我还想要如果用户点击盘子，他们可以看到完整尺寸的盘子。
我设计中的灰色方框代表车牌的图像，下方是我放置的许可证名称和价格。
我想出的是一个组合下拉菜单，但我试图找到更像这个弹出窗口的东西。我必须选择单选按钮(是/否)如果是，如果没有任何反应，除了清除价格，如果已经选择了一个盘子，就会出现像图像一样的弹出窗口。
如有任何帮助，我们将不胜感激!
http://jsfiddle.net/j585zy0y/4/
$(document).ready(function(){
// When the header for the custom drop-down is clicked
$(".selectHeader").click(function() {
// cache the actual dropdown scroll container
var dropdown = $(this).parent().find(".drop_down_scroll_container");
// Toggle the visibility on click
if (dropdown.is(":visible")) {
dropdown.slideUp();
$(this).parent().find(".dropdown-subcategory").fadeOut();
} else {
dropdown.slideDown();
}
});
// When a top-level menu item is hovered, decide if its
// coorespnding submenu should be visible or hidden
$(".drop_down_scroll_container span").hover(
// hover on
function() {
// Remove the "highlighted class from all other options
$(this).parent().find("span").removeClass("highlighted").removeClass("selected");
$(this).addClass("highlighted").addClass("selected");
// Get the index of the hovered span
var index = $(this).index();
// Use the hovered index to reveal the
// dropdown-subcategory of the same index
var subcategorydiv = $(this).parent().parent().find(".dropdown-subcategory").eq(index);
hideallSubmenusExceptMenuAtIndex($(this).parent().parent(), index);
subcategorydiv.slideDown();
},
// hover off
function() {
if (!$(this).hasClass("highlighted")) {
var index = $(this).index();
var subcategorydiv = $(this).parent().parent().find(".dropdown-subcategory").eq(index);
subcategorydiv.slideUp();
}
});
// Hide all submenu items except for the submenu item at _index
// This will hide any of the previously opened submenu items
function hideallSubmenusExceptMenuAtIndex(formElement, _index) {
formElement.find(".dropdown-subcategory").each(
function(index) {
if (_index != index) {
$(this).hide();
}
}
);
}
// When any menu item is hovered
$("span").hover(
function() {
$(".hoveredOver").text($(this).text());
},
function() {
$(".hoveredOver").text("");
}
);
// When a sub-menu option is clicked
$(".dropdown-subcategory span").click(function() {
$(".dropdown-subcategory span").removeClass("selected");
$(".clickedOption").text($(this).text());
$(this).addClass("selected");
$(this).parent().parent().find(".selectHeader").text($(this).text());
closeDropDown($(this).parent().parent());
showSpecialPlateModal($(this).text(), $(this).attr("data-image"), $(this).attr("data-price"), $(this).attr("data-code"));
});
// Close the dropdowns contained in divToSearch
function closeDropDown(divToSearch) {
divToSearch.find(".drop_down_scroll_container").fadeOut();
divToSearch.find(".dropdown-subcategory").fadeOut();
};
// Populate and Launch the bootstrap Modal Dialog Specialty Plates
function showSpecialPlateModal(name, image, price, code) {
$('#modal_special').find('.modal-body')
.html('<h2>' + name + '</h2>')
.append('<br/>Special Plate Code: <span class="code">' + code + '</span><br/>')
.append('<p>Image will go here:</p><br/><img alt="" src="' + image + '"/>')
.append('<br/><br/>Price: <span class="price">' + price + '</span><br/>')
.end().modal('show');
}
// When the modal "Accept" button is pressed
$('.accept').on('click', function() {
var modal_element = $('#modal_special');
var name = modal_element.find("h2").text();
var price = modal_element.find("span.price").text();
var code = modal_element.find("span.code").text();
$('#modal_special').modal('hide').end(alert(name + " was selected for a price of " + price));
});
});
#dropdown {
width:175px;
height:200px;
position:relative;
font-size:12px;
}
.selectHeader {
height:20px;
width:100%;
background-color:#fff;
border:solid thin #ccc;
color:#000;
cursor:pointer;
padding:0 3px;
}
#dropdown span {
display:block;
background-color:#fff;
color:#000;
cursor:pointer;
font-weight:400;
font:inherit;
padding:0 3px;
}
#dropdown span:hover {
background-color:#1C7BD2;
color:#fff;
}
.drop_down_scroll_container {
display:none;
width:100%;
height:100%;
overflow:scroll;
border:solid thin #ccc;
}
.dropdown-subcategory {
display:none;
position:absolute;
top:20px;
left:100%;
z-index:100;
width:100%;
border:solid thin #ccc;
}
.selected {
background-color:#1C7BD2!important;
color:#fff!important;
}
.boxshadow {
box-shadow:0 2px 7px 1px rgba(119,119,119,0.68);
-moz-box-shadow:0 2px 7px 1px rgba(119,119,119,0.68);
-webkit-box-shadow:0 2px 7px 1px rgba(119,119,119,0.68);
}
.hoveredOver,.clickedOption {
font-weight:700;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You are hovered over: <span class="hoveredOver"></span><br/>
You have clicked on option: <span class="clickedOption"></span>
<br/><br/>
<!-- CUSTOM DROP DOWN EXAMPLE -->
<div id="dropdown" class="specialtyPlatesCategories">
<div class="selectHeader">Click to Select Plates:</div>
<!-- THIS IS WHERE YOU WILL PUT YOUR TOP-LEVEL OPTIONS -->
<div class="drop_down_scroll_container">
<span>Environment / Wildlife</span>
<span>Community Interest</span>
<span>Health Interest</span>
<span>Family / Kids</span>
<span>American Heroes</span>
<span>Professional Sports</span>
<span>Collegiate</span>
<span>Motorcycle</span>
</div>
<!-- THIS IS WHERE YOU WILL PUT YOUR SUB-LEVEL OPTIONS -->
<div id="Environment / Wildlife_subcategories" class="dropdown-subcategory">
<span data-code="ANR" data-image="/images/img/AnimalFriend.png" data-price="30">Animal Friend</span>
<span data-code="QCR" data-image="/images/img/Aquaculture.png" data-price="30">Aquaculture</span>
<span data-code="CER" data-image="/images/img/ProtectOurOceans.png" data-price="30">Protect Our Oceans</span>
<span data-code="CWR" data-image="/images/img/ConserveWildlife.png" data-price="30">Conserve Wildlife</span>
<span data-code="DFR" data-image="/images/img/DiscoverFloridaOceans.png" data-price="30">Discover Florida Oceans</span>
<span data-code="ERR" data-image="/images/img/EvergladesRiverofGrass.png" data-price="25">Everglades River of Grass</span>
<span data-code="FVR" data-image="/images/img/FishFlorida.png" data-price="27">Fish Florida</span>
<span data-code="INR" data-image="/images/img/IndianRiverLagoon.png" data-price="20">Indian River Lagoon</span>
<span data-code="LBR" data-image="/images/img/LargemouthBass.png" data-price="30">Largemouth Bass</span>
<span data-code="PAR" data-image="/images/img/ProtectthePanther.png" data-price="30">Protect the Panther</span>
<span data-code="PFR" data-image="/images/img/ProtectFloridaSprings.png" data-price="30">Protect Florida Springs</span>
<span data-code="WHR" data-image="/images/img/ProtectFloridaWhales.png" data-price="30">Protect Florida Whales</span>
<span data-code="POR" data-image="/images/img/ProtectOurReefs.png" data-price="30">Protect Our Reefs</span>
<span data-code="PWR" data-image="/images/img/ProtectWildDolphins.png" data-price="25">Protect Wild Dolphins</span>
<span data-code="SZR" data-image="/images/img/SaveOurSeas.png" data-price="30">Save Our Seas</span>
<span data-code="MTR" data-image="/images/img/SavetheManatee.png" data-price="30">Save the Manatee</span>
<span data-code="FBR" data-image="/images/img/SaveWildFlorida.png" data-price="30">Florida Biodiversity - Save Wild Florida</span>
<span data-code="STR" data-image="/images/img/SeaTurtle.png" data-price="28">Sea Turtle</span>
<span data-code="SNR" data-image="/images/img/WildlifeFoundationofFlorida.png" data-price="30">Wildlife Foundation of Florida</span>
<span data-code="FFR" data-image="/images/img/StateWildflower.png" data-price="20">State Wildflower</span>
<span data-code="TAR" data-image="/images/img/TampaBayEstuary.png" data-price="20">Tampa Bay Estuary</span>
<span data-code="TCR" data-image="/images/img/TreesareCool.png" data-price="30">Trees are Cool</span>
</div>
<div id="Community Interest_subcategories" class="dropdown-subcategory">
<span data-code="AER" data-image="/images/img/AgriculturalEducation.png" data-price="30">Agricultural Education</span>
<span data-code="AGR" data-image="/images/img/Agriculture.png" data-price="25">Agriculture</span>
<span data-code="CLR" data-image="/images/img/ChallengerColumbia.png" data-price="30">Challenger/Columbia</span>
<span data-code="CFR" data-image="/images/img/CorrectionsFoundation.png" data-price="30">Corrections Foundation</span>
<span data-code="ESR" data-image="/images/img/EndlessSummer.png" data-price="30">Endless Summer</span>
<span data-code="ARR" data-image="/images/img/FloridaArts.png" data-price="25">Florida Arts</span>
<span data-code="HFR" data-image="/images/img/FloridaHorsePark.png" data-price="30">Florida Horse Park (Discover Florida's Horses)</span>
<span data-code="FYR" data-image="/images/img/FloridaSheriffsYouthRanches.png" data-price="30">Florida Sheriffs Youth Ranches</span>
<span data-code="TNR" data-image="/images/img/FloridaTennis.png" data-price="30">Florida Tennis</span>
<span data-code="ORR" data-image="/images/img/FraternalOrderofPolice.png" data-price="30">Fraternal Order of Police</span>
<span data-code="FQR" data-image="/images/img/FreeMasonry.png" data-price="30">Free Masonry</span>
<span data-code="GOR" data-image="/images/img/GolfCapital.png" data-price="30">Golf Capital</span>
<span data-code="HAR" data-image="/images/img/HomeOwnership.png" data-price="30">Home Ownership</span>
<span data-code="HRR" data-image="/images/img/HorseCountry.png" data-price="30">Horse Country</span>
<span data-code="IMR" data-image="/images/img/Imagine.png" data-price="30">Imagine</span>
<span data-code="IGR" data-image="/images/img/InGodWeTrust.png" data-price="30">In God We Trust</span>
<span data-code="LHR" data-image="/images/img/VisitOurLights.png" data-price="30">Lighthouse Association - Visit Our Lights</span>
<span data-code="LDR" data-image="/images/img/LivetheDream.png" data-price="30">Live the Dream</span>
<span data-code="AHR" data-image="/images/img/PoliceAthleticLeague.png" data-price="25">Police Athletic League</span>
<span data-code="SAR" data-image="/images/img/SharetheRoad.png" data-price="20">Share the Road</span>
<span data-code="SPR" data-image="/images/img/SpecialOlympics.png" data-price="20">Special Olympics</span>
<span data-code="EDR" data-image="/images/img/SupportEducation.png" data-price="25">Support Education</span>
<span data-code="SYR" data-image="/images/img/SupportSoccer.png" data-price="30">Support Soccer</span>
<span data-code="SOR" data-image="/images/img/USOlympic.png" data-price="20">US Olympic</span>
</div>
<div id="Health Interest_subcategories" class="dropdown-subcategory">
<span data-code="RXR" data-image="/images/img/AmericanRedCross.png" data-price="30">American Red Cross</span>
<span data-code="CSR" data-image="/images/img/ChooseLife.png" data-price="25">Choose Life</span>
<span data-code="DOR" data-image="/images/img/DonateOrgans.png" data-price="30">Donate Organs</span>
<span data-code="CRR" data-image="/images/img/EndBreastCancer.png" data-price="30">End Breast Cancer</span>
<span data-code="HOR" data-image="/images/img/Hospice.png" data-price="30">Hospice</span>
<span data-code="MJR" data-image="/images/img/MoffittCancerCenter.png" data-price="25">Moffitt Cancer Center</span>
<span data-code="VIR" data-image="/images/img/StateofVision.png" data-price="30">State of Vision</span>
<span data-code="SDR" data-image="/images/img/StopHeartDisease.png" data-price="30">Stop Heart Disease</span>
<span data-code="ASR" data-image="/images/img/SupportAutismPrograms.png" data-price="30">Support Autism Programs</span>
</div>
<div id="Family / Kids_subcategories" class="dropdown-subcategory">
<span data-code="SCR" data-image="/images/img/BoyScouts.png" data-price="25">Boy Scouts</span>
<span data-code="CAR" data-image="/images/img/StopChildAbuse.png" data-price="30">Stop Child Abuse</span>
<span data-code="FJR" data-image="/images/img/FamilyFirst.png" data-price="30">Family First</span>
<span data-code="FUR" data-image="/images/img/FamilyValues.png" data-price="30">Family Values</span>
<span data-code="CHR" data-image="/images/img/InvestinChildren.png" data-price="25">Invest in Children</span>
<span data-code="KKR" data-image="/images/img/KeepKidsDrugFree.png" data-price="30">Keep Kids Drug Free</span>
<span data-code="KDR" data-image="/images/img/KidsDeserveJustice.png" data-price="30">Kids Deserve Justice</span>
<span data-code="LKR" data-image="/images/img/LaurensKids.png" data-price="30">Lauren's Kids</span>
<span data-code="PMR" data-image="/images/img/ParentsMakeaDifference.png" data-price="30">Parents Make a Difference</span>
</div>
<div id="American Heroes_subcategories" class="dropdown-subcategory">
<span data-code="SPRT01" data-image="" data-price="34.00">Sports 01</span>
<span data-code="SPRT02" data-image="" data-price="35.00">Sports 02</span>
<span data-code="SPRT03" data-image="" data-price="36.00">Sports 03</span>
</div>
<div id="Professional Sports_subcategories" class="dropdown-subcategory">
<span data-code="MAR" data-image="/images/img/FloridaMarlins.png" data-price="30">Florida Marlins</span>
<span data-code="PTR" data-image="/images/img/FloridaPanthers.png" data-price="30">Florida Panthers</span>
<span data-code="JJR" data-image="/images/img/JacksonvilleJaguars.png" data-price="30">Jacksonville Jaguars</span>
<span data-code="MDR" data-image="/images/img/MiamiDolphins.png" data-price="30">Miami Dolphins</span>
<span data-code="MHR" data-image="/images/img/MiamiHeat.png" data-price="30">Miami Heat</span>
<span data-code="OMR" data-image="/images/img/OrlandoMagic.png" data-price="30">Orlando Magic</span>
<span data-code="BBR" data-image="/images/img/TampaBayBucs.png" data-price="30">Tampa Bay Bucs</span>
<span data-code="DRR" data-image="/images/img/TampaBayRays.png" data-price="30">Tampa Bay Rays</span>
<span data-code="TBR" data-image="/images/img/TampaBayLightning.png" data-price="30">Tampa Bay Lightning</span>
<span data-code="NZR" data-image="/images/img/Nascar.png" data-price="30">Nascar</span>
</div>
<div id="Collegiate_subcategories" class="dropdown-subcategory">
<span data-code="ENV01" data-image="" data-price="31.00">Environment 01</span>
<span data-code="ENV02" data-image="" data-price="32.00">Environment 02</span>
<span data-code="ENV03" data-image="" data-price="33.00">Environment 03</span>
</div>
<div id="Motorcycle_subcategories" class="dropdown-subcategory">
<span data-code="MYR" data-image="/images/img/MotorcycleSpecialty.png" data-price="22">Motorcycle Specialty</span>
<span data-code="MUR" data-image="/images/img/MotorcylceUnderage.png" data-price="22">Motorcylce Underage</span>
</div>
<!-- BOOTSTRAP MODAL FOR SPECIAL PLATES -->
<div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Specialty Plate</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary accept">Accept</button>
</div>
</div>
</div>
</div>最佳答案
好的，所以我明白您要做什么了，您正在尝试创建一个奇特的选择窗口，而不是尝试使用自定义“下拉”菜单。所以我迎接挑战并为您创建了一个模型。
YOU CAN REVIEW THE MOCKUP DEMO ON JSFIDDLE
基本思想是将您的自定义下拉列表转换为自定义应用程序。
首先，我转换了你所有的<optgroup></optgroup>为这种格式:
<div class="licenseSection" id="licenseSection0">
<!-- buttons for this section go here -->
</div>
和每一个 <option></option>标签已转换为:
<div class="licenseButton" data-price="30" data-code="2" data-name="Aquaculture">
<div class="selectedLicenseFlag"></div>
<div class="licenseImage">
<img src="/images/img/Aquaculture.png" alt="Aquaculture" />
</div>
<div class="licenseInfoName">Aquaculture</div>
<div class="licenseInfoPrice">$30</div>
</div>
现在，由于每个“类别”现在都属于自己的 licenseSection div，这只是让 jQuery 显示或隐藏相应部分的问题。像这样:
$("ul.SL_category_buttons li").click(function(){
var buttonIndex = $(this).index();
// Handle the button highlighting if the button is already selected
if ($(this).hasClass("selectedLicenseCategory") == false){
$("ul.SL_category_buttons li").removeClass("selectedLicenseCategory");
$("ul.SL_category_buttons li").removeClass("hoverLicenseCategory");
$(this).addClass("selectedLicenseCategory");
// Reveal the category options
revealLicenseCategoryPageAtIndex(buttonIndex);
}
});
function revealLicenseCategoryPageAtIndex(index){
$(".licenseSection").fadeOut().end(
$(".licenseSection").eq(index).delay(300).fadeIn()
);
}
此演示的一些功能包括:
- 许可证缩略图出现时会显示许可证价格 徘徊。
- 所选许可证显示在许可证选择器下方，因此用户可以 在接受之前保持审查
- 整个模态窗口是一个引导组件，因此可以很容易地 打开和关闭。
如何将此选择器集成到您的应用程序中:
<强>1。启动模态窗口:
// Option #01
$('#modal_special').modal('show');
// Option #02
// Assign a button with the id of launchLicenseModalSelect to reach this code
$("#launchLicenseModalSelect").click(function(){
$('#modal_special').modal('show');
});
<强>1。获取用户选择的数据:
此应用程序设置一个名为 selectedLicense 的变量跟踪选择了哪个许可证，因此当用户单击表单上的“接受”按钮时，您可以使用 selectedLicense 做任何您想做的事情对象(更新您的 UI、更新您的计算等):
$(".accept").click(function(){
// Hide the modal
$('#modal_special').modal('hide');
// Access the selectedLicense object.
console.log("The following license was selected:", selectedLicense);
alert("The following license was accepted:\n\n"+selectedLicense.name+" $"+selectedLicense.price);
});
这是基本的想法。 Please review the JSFiddle demo ，并随时提出您可能有的任何问题。
希望这对您有所帮助!
关于javascript - jQuery 弹出窗口 - 菜单/图像设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26726585/