This article mainly introduces JS combined with bootstrap imitation wechat background multi graphic interface management in detail, which has a certain reference value. Interested partners can refer to it
JS imitates the multi graphic interface of wechat background management, integrates Ajax asynchronous upload file plug-in, for your reference, the specific content is as follows
design sketch:
Detailed code:
html:
`<``div` `id``=``"wrap"``>`
`<``div` `id``=``"sidebar"``>`
`<``div` `class``=``"previewBox"``>`
`<!-- <p style="margin:10px 14px 0 14px;"><span class="msg-date">2013-08-14</span></p>-->`
`<``div` `class``=``"cover"` `onmouseout``=``"removeCover(this);"`
`onmouseover``=``"showCover(this);"``>`
`<``h4` `class``=``"msg-t"` `style``=``"width: 320px;"` `id``=``"title2div0"``>`
`Title < ` span '` class' =' ` i-title '' > < / '` span' >`
`</``h4``>`
`<``img` `src``=``"../assets/homer_admin-v1.5/images/2.png"` `style``=``"width: 320px;"` `/>`
`<``ul` `class``=``"abs tc sub-msg-opr"`
`style``=``"margin: 10px 10px; height: 150px; width: 320px;"``>`
`<``a` `class``=``"th"` `href``=``"javascript:void(0)"` `onclick``=``"editDiv('div0')"``>`
`<``div` `style``=``"width: 320px; height: 120px; font-size: 16px;"``>`
`Edit < / ` div '>`
`</``a``>`
`</``ul``>`
`</``div``>`
`</``div``>`
`<``div` `class``=``"sub-add"``>`
`<``a` `class``=``"block tc sub-add-btn"` `href``=``"#"` `id``=``"add"``> <``span`
`Class' = '"VM DIB sub add Icon"' > < / '` span' '> add a new one`
`</``a``>`
`</``div``>`
`</``div``>`
`<``div` `id``=``"main"``>`
`<``div` `class``=``"msg-editer"` `id``=``"div0"``>`
`<``form` `method``=``"POST"` `enctype``=``"multipart/form-data"` `action``=``""``>`
`< '` label' ` class' = '` block' ` for '=' '' "'> Title < /' ` label '> <' ` input '` type' = '` text'`
`Name '=' "title ','value' = '" the 0','id '=' "titlediv0"`
`onchange``=``"setTitle('div0')"` `class``=``"msg-input"` `/> <``label`
`Class' = '"block"' ` for '=' "'"' > author < '` em' ` class' = '"mp_ Desc "'" > (optional) < /' ` em '> < /' ` label '> <' ` input`
`type``=``"text"` `name``=``"Author"` `value``=``""` `id``=``"author"` `class``=``"msg-input"` `/>`
`<``label` `class``=``"block"` `for``=``""``><``span` `class``=``"upload-tip r"`
`ID '=' "upload tip" '> recommended size of large image: 720 pixels * 400 pixels < /' ` span '>' cover < / '` label' > '`
`<``div` `class``=``"cover-area"`
`style``=``"vertical-align: bottom; margin-bottom: 10px;"``>`
`<``input` `type``=``"file"` `name``=``"file"` `id``=``"filediv0"` `/> <``input`
`Type '='button','value '='upload','onclick '='ajaxfileupload ('div0') ',' / > < img`
`src``=``""` `id``=``"imgdiv0"`
`style``=``"width: 100px; vertical-align: bottom; border: 1px solid gray"` `/>`
`<``a` `id``=``"rmdiv0"` `href``=``"#"` `onclick``=``"removeImage('div0')"`
`Style '=' "vertical align: bottom; '"' > delete < / '` a' >`
`</``div``>`
`<! -- < label class = "block" for = > Graphic link < / label >`
`<input type="text" name="Message_URL" value="" id="url" class="msg-input">`
`-->`
`< '` label' ` class' = '` block' ` for '=' '' "'> text < /' ` label '>'`
`<``textarea` `name``=``"Content"` `id``=``"myEditor"``></``textarea``>`
`<``div` `class``=``"none"` `id``=``"url-block"` `style``=``"margin-top: 14px;"``>`
`The link to the original text_ Desc '' > (optional) < / '` em' > < / '` label' >`
`<``input` `type``=``"text"` `name``=``"Content_Link"` `value``=``""` `id``=``"surl"` `class``=``"msg-input"` `/> <``br` `/>`
`</``div``>`
`</``form``>`
`</``div``>`
`</``div``>`
`<``div` `style``=``"clear: both; padding-top: 20px;"``>`
`<``div`
`style``=``"clear: both; text-align: center; padding-top: 20px; border-top: 1px solid #dddddd;"``>`
`<``input` `type``=``"button"` `onclick``=``'publishTemplate()'`
`Class' = '"BTN Span2 BTN success"' ` value '=' ` save '' / > < '` input' ` type '=' ` button '`
`Onclick '=' "removetemplate()" '` class' =' ` BTN Span2 BTN danger '` value' = '` delete' / > '`
`</``div``>`
`</``div``>`
`</``div``>`javascript:
`<script>`
`var` `arr = [` `'div1'``,` `'div2'``,` `'div3'``,` `'div4'``,` `'div5'``,` `'div6'``,` `'div7'` `];`
`var` `arr2 =` `new` `Array();`
`var` `showDiv =` `"div0"``;`
`var` `option = {`
`Initialcontent: '` the default content displayed in the editor' ',' '// initializes the content of the editor`
`initialFrameHeight : 340`
`};`
`var` `editor =` `new` `UE.ui.Editor(option);`
`editor.render(``"myEditor"``);`
`function` `removeImage(id) {`
`$(``"#img"` `+ id).hide();`
`$(``"#rm"` `+ id).hide();`
`}`
`function` `showCover(obj) {`
`$(obj).addClass(``"sub-msg-opr-show"``);`
`}`
`function` `removeCover(obj) {`
`$(obj).removeClass(``"sub-msg-opr-show"``);`
`}`
`function` `editDiv(obj) {`
`if` `(showDiv != obj) {`
`$(``"#"` `+ showDiv).hide();`
`$(``"#"` `+ obj).show();`
`showDiv = obj;`
`}`
`}`
`function` `removeDiv(obj) {`
`$(``"#s"` `+ obj).remove();`
`$(``"#"` `+ obj).remove();`
`$(``"#rich"` `+ obj).remove();`
`arr.push(obj);`
`arr2.splice($.inArray(obj, arr2), 1);`
`if` `(arr2.length == 0) {`
`showDiv =` `"div0"``;`
`$(``"#"` `+ showDiv).show();`
`}` `else` `{`
`if` `(obj == showDiv) {`
`showDiv = arr2.pop();`
`arr2.push(showDiv);`
`$(``"#"` `+ showDiv).show();`
`}` `else` `{`
`$(``"#"` `+ showDiv).show();`
`showDiv = arr2.pop();`
`arr2.push(showDiv);`
`}`
`}`
`}`
`function` `setTitle(obj) {`
`$(``"#title2"` `+ obj).text($(``"#title"` `+ obj).val());`
`}`
`$(``"#add"``)`
`.click(`
`function``() {`
`var` `msgDiv;`
`//var msgDiv2;`
`if` `(arr.length == 7) {`
`$(``"#"` `+ showDiv).hide();`
`msgDiv = arr.pop();`
`arr2.push(msgDiv);`
`showDiv = msgDiv;`
`}` `else` `if` `(arr.length == 0) {`
`Alert ('` add up to 8 graphic information' ')`
`return``;`
} else {
`msgDiv = arr.pop();`
`//msgDiv2=arr2.pop();`
`$(``"#"` `+ showDiv).hide();`
`//arr2.push(msgDiv2);`
`arr2.push(msgDiv);`
`showDiv = msgDiv;`
`}`
`$(``".previewBox"``)`
`.append(`
`"<div class='cover' id='s"`
`+ msgDiv`
`+` `"' style='border-top:1px solid #C6C6C6;height: 120px;' onmouseout='removeCover(this);'"`
`+` `" onmouseover='showCover(this);'><div> <div style=' float:left;width : 250px; word- break:break-all; 'ID'title2 "' '+ msgdiv +' '"' > Title < / div > < div style = ' float:right; '> "`
`+` `"<img src='../assets/homer_admin-v1.5/images/1.png' style='width: 80px;height: 80px;'/> </div> </div> <ul class='abs tc sub-msg-opr' style='margin-left: 0;'> <li><div style='width: 150px;"``+`
`" height: 120px; font-size: 16px;'><a style='line-height:100px;' href='javascript:void(0)' onclick='editDiv(\""`
`+ msgDiv`
`+`'"\"); return false;' > Edit < / a > "`
`+` `"<a style='line-height:100px;' href='javascript:void(0)'"`
`+` `" onclick='removeDiv(\""`
`+ msgDiv`
`+`"'"); return false;' > delete < / a > < / div > < / Li > < / UL > < / div > "'"`
`$(``"#main"``)`
`.append(`
`" <div class='msg-editer' id='"``+msgDiv+``"'> "`
`+`'"< form method' ='post 'enctype' ='multipart / form data 'action' = '> < label class' ='block' for '=' > Title < / label >"`
`+` `" <input type='text' name='Title' id='title"`
`+ msgDiv`
`+` `"' onchange='setTitle(\""`
`+ msgDiv`
`+` `"\")' class='msg-input'>"`
`+`The author of this paper is_ Desc '> (optional) < / EM > < / label > < input type' ='text 'name' ='author 'value ='id' ='author 'class' ='msg-input' / > "`
`+`"Recommended size of large picture: 720 pixels * 400 pixels < / span > cover < / label >"`
`+` `"<div class='cover-area' style='vertical-align: bottom;margin-bottom: 10px;'><input type='file'name='file"``+msgDiv+``"'/>"`
`+`'"< input type ='button' value ='upload 'onclick ='ajaxfileupload (\")`
`+ msgDiv`
`+` `"\")'/>"`
`+` `" <img src='' id='img"``+msgDiv+``"' style='width: 100px;vertical-align: bottom;border: 1px solid gray'/>"`
`+` `"<a id='rm"`
`+ msgDiv`
`+` `"' href='#' onclick='removeImage(\""`
`+ msgDiv`
`+`'"\")' style ='vertical align: bottom; '> delete < / a > < / div > "`
`+`
`/*"< label class ='block 'for =' > Graphic link < / label >"+`
`"<input type='text' name='Message_URL' value='' id='url' class='msg-input'>"+*/`
`"< label class' ='block 'for =' > text < / label > < textarea name '='content' id = '"' + msgdiv + '"' > < / textarea >"`
`+` `"<div class='none' id='url-block' style='margin-top: 14px;'>"`
`+`A link to the original text_ Desc '> (optional) < / EM > < / label > < input type' ='text 'name' ='content_ Link' value='' id='surl' class='msg-input' />"`
`+` `"<br/></div></form> </div>"``);`
`editor.render(``"rich"` `+ msgDiv);`
`});`
`function` `ajaxFileUpload(id) {`
`var` `filename = $(``"#file"` `+ id).val();`
`var` `suffix;`
`if` `(filename !=` `""``) {`
`suffix = filename.substr(filename.indexOf(``"."``) + 1,`
`filename.length);`
`}`
`if` `(filename ==` `""``) {`
`Alert ('"please select the picture to upload' ')`
`}` `else` `if` `(suffix !=` `"jpg"` `&& suffix !=` `"png"``) {`
`Alert ('"whether the file format exists'')`
`}` `else` `{`
`$.ajaxFileUpload({`
`URL: '` fileUpload' ',' // the server request address for file upload`
`type:` `'post'``,`
`Fileelementid: ` ` file '` + ID, ` // the ID of the file upload domain`
`Datatype: '` JSON' ',' // the return value type is generally set to JSON`
`Success: '` function' '(data, status)' // the server successfully responds to the handler`
`{`
`Alert ('"success'')`
`},`
`Error: '` function' '(data, status, e)' // server response failure handling function`
`{`
`alert(e);`
`}`
`})`
`}`
`}`
`function` `publishTemplate() {`
`if` `(``"@ViewBag.Template.Row_ID"``) {`
`var` `result = window.confirm Are you sure you want to publish this article? "``);`
`if` `(result) {`
`window.location =` `"@PublishUrl"``;`
`}`
`}`
`}`
`function` `removeTemplate() {`
`if` `(``"@ViewBag.Template.Row_ID"``) {`
`var` `result = window.confirm Are you sure you want to delete this image? "``);`
`if` `(result) {`
`window.location =` `"@RemoveUrl"``;`
`}`
`}`
`}`
`</script>`Source code download: wechat multi graphic interface
This article has been sorted into “JavaScript wechat development skills summary”Learn moreWelcome to learn to read.
Recommend a wechat applet tutorial with high attention: wechat applet development tutorialLearn moreXiaobian is carefully arranged for you. I hope you like it.