Home > Developer > Web Develop
This article is used somewhere, I say first, last week, I got a task. Because the Company's business to docking different banks, such as the color is red under the other banks, the default is blue, so in the case of consistent page, ensure that the page button and icon can be configured, so that the order changes a value "color or path", it will be able to fully fit the normal, in fact, this business is simple:
**第一种方案：我们有新建两个config1.js和config2.js,代码分别类似如下：**
var config = { // 改变全局按钮颜色 btncolor: "red", // 配置优惠券和同意的Icon img1: "../images/icon_01.png", img2: "../images/icon_02.png", img3: "../images/icon_03.png"}
Why build two config.js, one is the configuration information by default, and one is the configuration information of the custom Version.
After the new, we will introduce them to the page, how to quote it, which one to quote, good tangled ah ...
Read this article, I decided to use Document.writeln (), we can check and document.write () differences in where
But which config file to introduce, we need to determine which bank it is, we assume that the header is the name of the bank, okay, so it's done.
($("header").text().indexOf("工商银行") > -1) ? document.writeln("<script src=\"./js/config1.js\"><\/script>") : document.writeln("<script src=\"./js/config2.js\"><\/script>");
Put the code into the page to complete the task, The complete code is as Follows:
<! DOCTYPE html><Htmllang="en" ><Head><Metacharset="UTF-8" ><MetaName="viewport"Content="width=device-width, initial-scale=1.0" ><Metahttp-equiv="x-ua-compatible"Content="ie=edge" ><Title>document</Title><ScriptSrc="./js/jquery-2.1.1.min.js" ></Script><Script>($("header"). Text (). indexOf ("icbc") >-1)? Document.writeln ("<script src=\"./js/config1.js\ "><\/script>"): Document.writeln ("<script src=\"./js/config2.js\ "><\/script>");</Script></Head><Body><Header> ICBC</Header><Div><Ahref="> I am the button 1</A><Ahref="> I am the button 2</A><Ahref="> I am the button 3</A><P> I'm the button 4</P><Button> I'm the button 5</Button><Imgclass="img1" ></Div><Script> $ ( "header"). text (). indexOf ( "icbc" ) >-1? document.writeln ( "i am icbc"): Document.writeln ( "i am not icbc"); Console.log ($ ( "header"). text ()); Console.log (config); var btncolor = config.btncolor; console.log (btncolor); $ (" color ", btncolor); var img1 = config.img1; console.log (img1); $ ( ' src ', img1); </script></ body></html> **第二种方法就是，只有一个文件 config.js**
We feel config.js. configuration items are not many and must contain all the configuration items in a file
var config = { first: { // 改变全局按钮颜色 btncolor: "yellow", // 配置优惠券和同意的Icon img1: "../images/icon_01.png", img2: "../images/icon_02.png", img3: "../images/icon_03.png" }, second: { // 改变全局按钮颜色 btncolor: "red", // 配置优惠券和同意的Icon img1: "../images/icon_03.png", img2: "../images/icon_02.png", img3: "../images/icon_01.png" }}
But this time the method and the above is basically the same, I do not elaborate, the direct code is as Follows:
<! DOCTYPE html><Htmllang="en" ><Head><Metacharset="UTF-8" ><MetaName="viewport"Content="width=device-width, initial-scale=1.0" ><Metahttp-equiv="x-ua-compatible"Content="ie=edge" ><Title>document</Title><ScriptSrc="./js/jquery-2.1.1.min.js" ></Script><ScriptSrc="./js/config.js" ></Script></Head><Body><Header> 1 Commercial Bank</Header><Div><Ahref="> I am the button 1</A><Ahref="> I am the button 2</A><Ahref="> I am the button 3</A><P> I'm the button 4</P><Button> I'm the button 5</Button><Imgclass="img1" ></Div><Script>$("header"). Text (). indexOf ("icbc") >-1? Document.writeln ("i am icbc"): Document.writeln ("i am not icbc");var a = config.first, b = config.second, C = $ ("header"). Text (). indexOf ("icbc") >-1; Console.log ($ ("header"). text ());If (c) {console.log (a);var btncolor = a.btncolor; Console.log (btncolor); $("a,p,button"). css ("color", btncolor); var img1 = a.img1; console.log (img1); $ (". img1"). attr (' src ', img1);} Else {console.log (b); var btncolor = b.btncolor; console.log (btncolor); $ ("a,p,button"). css ("color", btncolor); var img1 = b.img1; console.log (img1); $ (". img1"). attr (' src ', img1);} </script></body></html> Extrapolate Case: How can we configure the global color in the react project, and look directly at the Code:
<! DOCTYPE html><Html><Head><Metacharset="UTF-8"/><Title></Title><ScriptSrc="https://static.runoob.com/assets/react/react-0.14.7/build/react.min.js" ></Script><ScriptSrc="https://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js" ></Script><ScriptSrc="https://static.runoob.com/assets/react/browser.min.js" ></Script><ScriptSrc="./js/config2.js" ></Script></Head><Body><DivId="example" ></Div><ScriptType="text/babel" > var nolink = React.createclass ({show:function(dd) {alert (dd)}, Render:function() {var o =Thisvar message = [1,5,7,9,0]; Console.log (config);var btncolor = config.btncolor;var sss = Message.map (function(data) {Return<InputType="button"Value={data} onclick={o.show.bind (data , data)} style={{ Backgroundcolor:btncolor}}/>)}) return (<div> {sss} </div>)}); Reactdom.render (<nolink/>, document.getElementById (' Example ') </script> </body></html> Config.js styles and picture paths in the configuration page
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
