- Tech
- JavaScript jump menu (level 1, second, third)
A level jump menu
One-side object method
Object Jump menu </ title> <script language = "javascript"> <! - begin // Establish Object Function Page (Name, URL) {this.name = Name; this.url = URL;} // Track and save object var PageIndex = -1; var pages = new array (); // Construct Object method Function NewPage (Name, URL) {PageIndex ; Page (Name, URL);} // Backup Network Function Gotopage (Page> 0) Var URL = Pages [PageIndex] .url; if (URL! = Null) Window.location = URL;} // Instantiate the object NewPage (China Sina "," http://www.sina.com); NewPage ("China Software", "http://www.cscn.net"); NewPage (" Google Search "," http://www.google.com "); // end -> </ script> </ head> <body> <script language =" javascript> Document.write ("<form> "); Document.write (" "<select onchange = 'gotopage (this.selectedIndIndex);'>"); document.write ("<option>" "Web Page Option " </ option> "); for VAR i = 0; i <pages.length; i ) {document.write ("<option>" pages.name "</ option>");} Document.write ("</ select> </ form>" ); </ script> </ body> </ html> Non-objective method 01 <html> <head> <title> Non-object method Jump menu </ title> <script language = "javascript"> <! Begincar web = new array (); web [0] = "Resource" WEB [1] = "Google"; Web [2] = "China Software"; Web [3] = "China Yilou"; Web [4] = "China Sina"; Web [5] = "QQ Network" VAR URL = New Array (); URL [0] = ""; URL [1] = "http://www.google.com"; URL [2] = "http://www.9cbs.net/ "; URL [3] =" http://www.eyou.com "; URL [4] ="</p>
<p>http://www.sina.com "; URL [5] =" http://www.myqq.com "; function gotopage (form) {var URLID = form.Item.selectedIndIndex; if (urlid! = 0) Window.Location = URL [URLID];} // end -> </ script> </ head> <body> <script language = "javascript"> <! - begindocument.write ("<form name = 'menu '> "); document.write (" <select name =' item 'onchange =' gotopage (this.form); '> "); for (var i = 0; i <url.length; i ) {document. Write ("<option>" Web "</ option>");} Document.write ("</ SELECT> </ form>"); // end -> </ script> </ body> </ HTML> Non-objective method 02 <html> <head> <title> Non-object method implementation jump menu </ title> </ head> <body> <form name = "free" method = "post"> <select id = "SELECT1" Name = "SELECT1" οnchange = "Window.Open (free.select1.Options [selectedindex] .value, target = '_ blank', 'top = 20, left = 200, width = 500, Height = 460, Scrollbars = yes, resizable = yes')> <option selected> Please select an item </ option> <option value = "beijing.asp"> Beijing </ option> <option value = "shanhai.asp"> Shanghai < / option> <option value = "tianjin.asp"> Tianjin </ option> <option value = "shenzhen.asp"> Shenzhen </ option> <option value = "guangzhou.asp"> Guangzhou </ Option> </ select> </ form> </ body> </ html> ---------------------------------- ---------------------------------------------</p>
<p>B. Secondary Jump Menu (Principles) An Read Group: There is a programming basis, there is a JS foundation. two. . Establish a secondary associated menu. It consists mainly of two custom objects. Type (Name) and Item (Name, URL) class consists. This two classes are associated by the method RelateObj (Type). Store data by two-dimensional array type Types.</p>
<p>Method gotopage is used to load the Item class instance to the current page Window.Location = URL; three specific code as <HTML> <head> <title> Level 2 Item Menu Production Principle Articles </ Title> <script language = "javascript"> <! - begin // Establish a category diagonal and project diagonal Type (Name) and Item (Name, URL); // Establishing an object is an object attribute. With the function (reference) function type (name) {THIS. Name = name; this.Length = 0;} function item (name, url) {this.name = name; this.url = url;} // establishes diagonal and project creation methods NewType (Name), NewItem (Name, URL) Var types = new array (); // is used to store specific objects, is a two-dimensional array var typeIndex = -1; // is used to track the type. Assignment is negative 1 is clearing the default option .var itemindex = - 1; // Used to track the project function newtype (name) {typeIndex ; // Each category is established, the array index is added to a itemIndex = -1; Types [typeIndex] = new type (name); // Putting New Category Object Save to Array Types [TypeIndex]} Function NewItem (Name, URL) {ItemIndex ; Types [TypeIndex] = New Item (Name, URL); Types [typeIndex] .length ; // A full Type creation It is complete (including all each item class with it)} // Tool Type (Name) and item list item (name, url) function relateObj (type) {if (type> 0) {// Decisive Object , Is instantiated. More intuitive: Judging DOCMUNET.FORMS [0] .Elements [0] n> 0 typeIndex = type-1; // Used to clear the default time option var ItemMenu = Document.Forms [0]. Elements [1]; / / Clear items in the project list for (VAR i = itemmenu .Options.Length; ItemMenu.Options = null;} // Add new category item list to the list in For (var i = 0; i <types [typeIndex] .length; i ) { ItemMenu.Options [i 1] = new option (types [typeindex] .name);} itemmenu.Options [0] .selected = true; // Default Option} ItemIndex = 0;} // Load URLFunction Gotopage (item) {IF (item> 0) URL = types [typeIndex] [item-1] .ur1; if (url! = Null) window.location = url; // load URL to the current page} // Use build method NewType (Name) NEWTYPE NEWITEM (NAME, URL) establishes specific object type (name) and Item (Name, URL) NewType ("javaandejb"); NewItem ("Said Technology Network", "http://tech.ccidnet.com/pub /Dimension/d732.html "); newItem ("</p>
<p>Gray Fox Technology Online "," http://www.huihoo.com/index.html "); NewItem (" Shi Special Technology Network "," http://www.fawcette.com/china/default.aspx " ); NewItem ("ZDNET China Technology", "http://www.zdnet.com.cn/developer"); NewItem ("Java: Solving", "http://www.jdon.com/" NEWITEM ("Java Research Organization", "TTP: //www.javaresearch.org/"); NewItem ("China Software", "http://www.9cbs.net/"); NewItem ("Matrix Java Dance "," http://www.matrix.org.cn/website.asp "); NewType (" Open Source Project "); NewItem (" Creating Alliance "," TTP: //cosoft.org.cn / html / "); NewItem (" Tongji Alliance "," http://gro.clinux.org/ "); NewType (" JspandServlet "); NewItem (" China JSP Technology Network "," http: // CNJSP. ORG / "); NewItem (" Window of ASP & JSP Technology "," http: // http://www.51jsp.net/ "); NewItem (" Dynamic Website Production Guide "," http://www.dnsasp. COM / "); NewItem (" Galaxy Technology Online "," http://www.oryh.net "); NewType (" XmlandJs ... "); NewItem (" No Storage Record "," # "); // end -> </ script> </ head> <body> <script language = "javascript"> <! - begindocument.write ("<form>"); document.write ("<select"); Document.write ("onchange = 'RelateObj (this.selectedIndIndex);'>"); Document.write ("<option>" "Select Resource Website Type" "</ Option>"); for (VAR i = 0; i <types.length; i ) {document.write ("< Option> " types.name " </ option> "); Document.write (" </ select> "); document.write (" <select "); document.write (" onchange = 'gotopage (this. " SELECTEDINDEX); '> "); Document.Write (" <option> " " Select the website " " </ option> "); for (var i = 0; i <16;</p>
<p>i ) {document.write ("<option> </ option>");} Document.write ("</ SELECT> </ form>"); // -> </ script> </ body> </ HTML> ------------------------------------------------ ----</p>
<p>C. Three-level related menu (consolidation)</p>
<p><html> <head> <title> Three-level related menu </ title> <script language = "javascript"> <! - begin // Establish an object Parenttype (Name), ChildType (Name), Item (Name, URL) Function ParentType (Name) {this.name = Name; this.Length = 0;} function childType (name) {this.name = name; this.Length = 0;} function item (name, url) {this.name = Name; this.url = URL;} // Track the parent category, subcategory, and project lists and save them to the three-dimensional array of Type, var parentIndex = -1; var leldindex = -1; var ittex = -1; var type = new Array (); // build parent class function newParentType (name) {parentIndex ; childIndex = -1; itemIndex = -1; type [parentIndex] = new ParentType (name);} // build subcategories function newChildType (name) {childIndex ; itemIndex = -1; type [parentIndex] [childIndex] = new ChildType (name); type [parentIndex] .length ;} // build options list function newItem (name, url) {itemIndex ; type [parentIndex] [ childIndex] [itemIndex] = new Item (name, url); type [parentIndex] [childIndex] .length ;} // associated with the parent category and subcategory function relateObj (parentType) {if (parentType> 0) {parentIndex = parentType- 1; var childTypeMenu = Document.Forms [0] .Elements [1]; var itemmenu = document .forms [0] .Elements [2]; for (var i = childTypeMenu.Options.Length; i> 1; i-) childTypeMenu.Options = null; // for (var i = itemmenu.Options.LENGTH; i > 1; I -) //ItemMenu.Options=null; for (var i = 0; i <type [parent ".length; i ) childTypeMenu.Options [i 1] = new option (Type [ParentIndex]. Name); ChildTypeMenu.Options [0] .selected = true;} childindex = 0;} // Offline subcategory and option list Function RelateItem (childType) {if (childType> 0) {childIndEx = childType-1; // var ChildTypeMenu = Document.Forms [0] .Elements [1]; var itemmenu =</p>
<p>Document.Forms [0] .Elements [2]; // for (var i = childTypeMenu.Options.Length; i> 1; i-) //childtypemenu.Options=null;for(VAR i = itemmenu.options. Length; i> 1; i - itemmenu.Options = null; for (var i = 0; i <type [parentindex] [childindex] .length; i ) itemmenu.Options [i 1] = new option (TYPE [parentindex] .name; itemmenu.Options [0] .selected = true;} itemindex = 0;} / * * Load URL to the current window or framework function (item) {if (item> 0) Var URL = Type [ParentIndex] [productIndex] [itemindex] .url; if (url! = null) window.location = url;} * /// instantiate object newParentType ("Parent Class 1"); // Parent Category NEWCHILDTYPE ("Parent Class 1"); // Subcategory a newitem ("parent1.child1.a", "#"); newItem ("parent1.child1.b", "#"); newItem ("Parent1 .child1.c "," # "); newItem (" parent1.child1.d "," # "); NewChildType (" Parent Class 2 "); // Subcategory II NEWITEM (" Parent1.child2. A "," # "); newItem (" parent1.child2.b "," # "); newItem (" parent1.child2.c "," # "); newItem (" parent1.child2.d "," # "); NewParentType (" Parent Class II "); // Parent Object 2 NewChildType (" P Pf Different Sub-class 1 "); // Object a newitem ("parent2.child1.a", "#"); newItem ("parent2.child1.b", "#"); newItem ("parent2.child1.c", "#"); newItem (" Parent2.child1.d "," # "); newItem (" Parent2.child1.e "," # "); NewChildType (" P Pf Different Sub 2 "); // Sub-object Two NewItem (" Parent2. Child2.a "," # "); newItem (" parent2.child2.f "," # "); newItem (" parent2.child2.b "," # "); newItem (" parent2.child2.c ", "#"); newItem ("</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-14837.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="14837" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.053</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'RF_2BSYHa2pmFJXe_2Fjg_2FjPqDirceCtzZ0NR0bNUlZcTgpoQzSFMNid2RILyQ8oijOGR8BemT0V_2F4SwD0V_2BnFMZAw_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script> 
