The custom select control may be messy in IE6, and all scripts have been tested based on jquery.
:
Metadata:
This metadata can be created by yourself. The template is as follows. The type is used to create different types of templates. The items set is used to render specific data, and the value is used to hide the domain.
//JavaScript source code{"Type": "checkbox","Items":[{"Text": "Ba Jin", "value": "0"},{"Text": "Shen Congwen", "value": "1"},{"Text": "Tibetan mastiff", "value": "2"},{"Text": "Tibetan password", "value": "3"},{"Text": "World of Warcraft", "value": "4"},{"Text": "JavaScript", "value": "5"}]}
<Div id = "con"> </div> must have this parent container for page rendering.
I have attached the source code. I don't know why. jquery's Ajax on my laptop always returns 405, but the native method does. I don't know what is wrong with IIS. If there is any hero, I know, I also hope to leave a message to help solve the problem.
<! Doctype HTML> <HTML lang = "en" xmlns = "http://www.w3.org/1999/xhtml"> . Con {width: 90%; font-family:; font-size: 12px; margin: 0 auto; margin- Top: 30px;}. jsondisplay {width: 260px; Float : Left;}. Val {width: 260px; Border: 1px solid # CCC; Height: 25px; color: # CCC ;}. select {width: 50px; Height: 27px; Background -Color: #00ff90; Float : Left;}. eventlistmous {width: 50px; Height: 27px; display: block; Background - Color: #00ff90;}. eventlistmous: hover {background - Color: # 0ff;}. Option {width: 308px; position: absolute; top: 57px; Background: # FFF; Border -Left: 1px solid # CCC; border-bottom: 1px solid # CCC; border- Right: 1px solid # CCC;}. tion {width: 308px; Height: 25px; line -Height: 25px; Float : Left;}. Sure {width: 308px; Height: 30px; Border -Top: 1px solid # CCC; Float : Left; line- Height: 30px;}. eventclose {width: 50px; Height: 30px; display: block; Float : Right;}. eventclose A {width: 50px; Height: 30px; display: block; Background -Color: # b6ff00; color: # FFF; text-align: center; text- Decoration: none;}. eventclose A: hover {background - Color: # ffd800;}. eventsure {width: 50px; Height: 30px; display: block; Float : Right; margin-Right: 10px;}. eventsure A {width: 50px; Height: 30px; display: block; Background -Color: # b6ff00; color: # FFF; text-align: center; text- Decoration: none;}. eventsure A: hover {background - Color: # ffd800;}. Hover {background - Color: # 0072bc; color: # FFF ;} </Style> <SCRIPT type = "text/JavaScript" src = "JQuery-1.80.min.js"> </SCRIPT> <SCRIPT type = "text/JavaScript"> Function Ajax (){ If (Typeof XMLHttpRequest! = "Undefined" ){ Return New XMLHttpRequest ();} Else If ( Typeof Activexobject! = "Undefined" ){ If ( Typeof Arguments. callee. activexstring! = "String" ){ VaR Versions = ["msxml2.xmlhttp. 6.0", "msxml2.xmlhttp. 3.0", "msxml2.xmlhttp" ]; For ( VaR I = 0, Len = versions. length; I <Len; I ++ ){ Try { VaR Xhr = New Activexobject (versions [I]); arguments. callee. activexstring = Versions [I]; Return Xhr ;} Catch (Ex ){}}} Return New Activexobject (arguments. callee. activexstring );} Else { Throw New Error ("error" );}} VaR Eventslid = True ;// Record pop-up and close // Select custom control pop-up button VaR Selbut = Function (){ VaR $ Eventlistslid = $ ('# eventlistslid' ); VaR $ Optionlist = $ ('# optioncon' ); VaR $ Tion = $ ('span. exception' ); $ Eventlistslid. BIND ( 'Click ',Function (){ If (Eventslid = True ) {$ Optionlist. Show (); eventslid = False ;} Else {$ Optionlist. Hide (); eventslid = True ;} $ Tion. Hover ( Function () {$ ( This ). Addclass ('hover' );}, Function () {$ ( This ). Removeclass ('hover' );});});} // Cancel button VaR Closebut = Function (){ VaR $ Close = $ ('# close'); VaR $ Optionlist = $ ('# optioncon' ); $ Close. BIND ( 'Click ', Function (){ If (Eventslid = False ) {$ Optionlist. Hide (); eventslid = True ;}});} // OK VaR Surebut = Function (){ VaR Valueils = []; VaR Textballs = []; VaR Suredown = $ ('# suredown' ); VaR Bing = $ ('# Bing' ); VaR Hid = $ ('# hid' ); VaR Optioncon = Document. getelementbyid ('optioncon' ); VaR Inputballs = optioncon. getelementsbytagname ('input' ); VaR Tionballs = $ ('span. tion' ); VaR $ Optionlist = $ ('# optioncon' ); Suredown. BIND ( 'Click ', Function (){ For ( VaR I = 0, Len = inputballs. length; I <Len; I ++){ If (Inputils [I]. Checked) {valueils. Push (inputils [I]. Value); textils. Push (tionils. eq (I). Text ());}} VaR Bin = Document. getelementbyid ('bin' ); VaR Hideen = Document. getelementbyid ('hid' ); If (Bin. value! ='' ) {Bin. Value ='' ; Hideen. Value ='' ;} Bing. Val (textballs. Join ( ',' ); Hid. Val (valueils. Join ( ',' ); $ Optionlist. Hide (); eventslid = True ;});} VaR Domils = []; // DOM data VaR Type ='' ; $ ( Function (){ VaR Con = Document. getelementbyid ('Con' ); VaR Xhr = New Ajax (); xhr. onreadystatechange = Function (){ If (Xhr. readystate = 4 ){ If (Xhr. Status> = 200 & xhr. Status <300) | xhr. Status = 304 ){ VaR Cons = eval ("(" + xhr. responsetext + ")"); // If a json2.js file exists, you can use the $. parsejson () method to obtain metadata. Type = cons. type; // Metadata type VaR Items = cons. items; // Metadata items set // Type-based rendering Template Domils. push ('<Div class = "jsondisplay"> <input type = "text" class = "Val" id = "bing"/> <input type = "hidden" id =" hid "/> </div> <Div class =" select "> <a href =" # "class =" eventlistmous "id =" eventlistslid "> </a> </ div> <Div class = "option" id = "optioncon">' ); For ( VaR A In Items ){ VaR TEXT = Items [A]. text; VaR Value =Items [A]. value; Switch (Type ){ Case "Checkbox" : Domils. Push ( '<SPAN class = "tion"> <input type = "' + Type + '" name = "box" class = "boxed" value = "' + value + '"/> '+ TEXT +' </span>' ); Break ; Case "Radio" : Domils. Push ( '<SPAN class = "tion"> <input type = "' + Type + '" name = "box" class = "boxed" value = "' + value + '"/> '+ TEXT +' </span>' ); Break ; Case "None" : Domils. Push ( '<SPAN class = "tion">' + TEXT + '</span>' ); Break ; // Case can generate a template based on the metadata type } Domils. Push ( '<Div class = "sure"> <SPAN class = "eventclose"> <a href = "#" id = "close"> cancel </a> </span> <SPAN class = "eventsure"> <a href = "#" id = "suredown"> OK </a> </span> </div>' ); VaR DOM = domils. Join ('' ); Con. innerhtml = Dom; VaR Optioncon = Document. getelementbyid ('optioncon' ); Optioncon. style. Display = 'None'; }}} Xhr. Open ( "Get", "data. js ", False ); Xhr. Send ( Null ); Selbut (); closebut (); surebut ();}); </SCRIPT>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
