JavaScript combined with bootstrap imitating wechat background multi graphic interface management

Time:2021-1-22

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:
JavaScript combined with bootstrap imitating wechat background multi graphic interface management
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.

Recommended Today

Practice of query operation of database table (Experiment 3)

Following the previous two experiments, this experiment is to master the use of select statements for various query operations: single table query, multi table connection and query, nested query, set query, to consolidate the database query operation.Now follow Xiaobian to practice together!Based on the data table (student, course, SC, teacher, TC) created and inserted in […]