HTML5交互式在线页面布局设计和代码自动生成工具

基于U-build.js实现网页布局在线定制，并自动生成代码的功能，可以帮助提高布局效率。

html5, design, tool

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 10476
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//Custom .js

//Copy
if (document.querySelector('footer button')) {
    let copyBtn = document.getElementById('u-copy-btn');
    let x = document.getElementById('u-copy-area')
    let y = document.getElementById('u-copy-state')
    copyBtn.onclick = function() {
        if (document.getElementsByTagName('textarea')[0].value) {
            x.removeAttribute('disabled')
            setTimeout(function() {
                x.setAttribute('disabled', 'disabled')
                y.classList.add('active')
                y.innerHTML = 'Structure has been copied to the clipboard successfully'
                y.classList.remove('warn')
            }, 1000)
            setTimeout(function() {
                x.setAttribute('disabled', 'disabled')
                y.classList.remove('active')
            }, 5000)
            x.select()
            document.execCommand('copy')
        } else {
            y.classList.add('warn')
            y.innerHTML = 'But there is nothing yet!'
            setTimeout(function() {
                y.classList.remove('warn')
            }, 5000)
        }
    }
}

for (let i = 0; i < document.querySelectorAll('.u-build *').length; i++) {
                    document.querySelectorAll('.u-build *')[i].style.borderColor = '#999'
                    document.querySelectorAll('.u-build *')[i].removeAttribute('data-select')
                }
                this.buildingForm.targetTitle.removeAttribute('data-select')
                eventObj.targetEl.style.borderColor = 'yellow'
                this.buildingForm.targetTitle.innerHTML = eventObj.targetClass
                this.buildingForm.form.className += ' active'
                this.buildingForm.submitBtn.onclick = function(e) {
                    e.preventDefault();

if (this.rowCheckbox.checked && !this.flexCheckbox.checked) {
                        var newRow = document.createElement('div')
                        newRow.className = 'row clf'
                        eventObj.targetEl.appendChild(newRow)

} else if (this.flexCheckbox.checked && !this.rowCheckbox.checked) {
                        var newFlex = document.createElement('div')
                        newFlex.setAttribute('data-flex', 'flex')
                        eventObj.targetEl.appendChild(newFlex)

}
                    if (this.flexCheckbox.checked && this.rowCheckbox.checked) {
                        var newRowFlex = document.createElement('div')
                        newRowFlex.setAttribute('data-flex', 'flex')
                        newRowFlex.className = 'row'
                        eventObj.targetEl.appendChild(newRowFlex)
                    }

for (let i = 0; i < this.quantity.value; i++) {
                        var newElement = document.createElement(this.tagName.value)
                        newElement.className = 'span-' + Math.floor((12 / this.quantity.value))
                        if (this.rowCheckbox.checked && !this.flexCheckbox.checked) {
                            newRow.appendChild(newElement)
                        } else if (this.flexCheckbox.checked && !this.rowCheckbox.checked) {
                            newFlex.appendChild(newElement)
                        } else if (this.flexCheckbox.checked && this.rowCheckbox.checked) {
                            newRowFlex.appendChild(newElement)
                        } else {
                            eventObj.targetEl.appendChild(newElement)
                        }

}
                    for (let i = 0; i < document.querySelectorAll('.u-build *').length; i++) {
                        document.querySelectorAll('.u-build *')[i].title = "Size: " + document.querySelectorAll('.u-build *')[i].offsetWidth + 'px'
                    }
                    for (var i = 0; i < document.querySelectorAll('.u-build *').length; i++) {
                        document.querySelectorAll('.u-build *')[i].removeAttribute('style')

}

var copyArea = document.getElementById('u-copy-area')
                    copyArea.value = document.querySelector('.u-build').innerHTML

}.bind(u.buildingForm)

}.bind(u), false)
        })
    },
    buildingForm: {
        form: document.forms[0],
        targetTitle: document.getElementById('u-target'),
        init: function() {
            this.enable()
        },
        enable: function() {
            let wrap = []
            let el = document.getElementsByClassName('u-item-text-input')
            for (let i = 0; i < el.length; i++) {
                wrap.push(el[i])
            }
            wrap.forEach(function(n, ind, arr) {
                n.oninput = function() {
                    if (arr[0].value && arr[1].value) {
                        this.submitBtn.removeAttribute('disabled')
                    } else {
                        this.submitBtn.setAttribute('disabled', 'disabled')
                    }
                }.bind(u.buildingForm)
            })

flexCheckbox: document.getElementById('u-flexCheckbox'),
        rowCheckbox: document.getElementById('u-rowCheckbox'),
        tagName: document.getElementById('u-item-tagName'),
        quantity: document.getElementById('u-item-quan'),
        labelsWrap: document.getElementById('u-item-labels-wrap'),
        submitBtn: document.getElementById('u-item-btn')
    }
}

window.addEventListener('load', () => {
    u.init()
})

编译

CSS

HTML

<p id="u-copy-state" class="u-copy-state gv-padding">
    Structure has been copied successfully
</p>

<section class="u-system">
    <h1 class="gv-align-center gv-margin-bottom-lg gv-padding-bottom-sm gv-bold gv-margin-auto">在线页面布局设计工具（Blueprint builder）</h1>
    <div class="container gv-no-padding gv-margin-bottom gv-align-right">
        <div class="u-container-input-wrap gv-relative gv-inline-block">
            <h3 class="gv-align-left">Container Width</h3>
            <input type="text" placeholder="Container width by default = 960px" class="u-container-input" id="u-container-input">
            <div class="gv-align-left"><small>Value must be between 320px and 1920px</small>
            </div>
        </div>
    </div>

<form action="" class="u-item-inputs">
        <h3 id="u-target" data-select='select-item'>Select Container</h3>
        <div id="u-item-labels-wrap" class="u-item-labels-wrap">
            <label for="" class="u-item-inputs-flex">Flex
                <input id="u-flexCheckbox" type="checkbox">
            </label>
            <label for="" class="u-item-inputs-flex u-item-inputs-row">Row
                <input id="u-rowCheckbox" type="checkbox">
            </label>
            <label for="" class="u-item-text">
                <select class="u-item-text-input" id="u-item-tagName" placeholder="Tag name">
                    <option value="div">div</option>
                    <option value="span">span</option>
                    <option value="article">article</option>
                    <option value="section">section</option>
                </select>
            </label>
            <label for="" class="u-item-text">
                <input class="u-item-text-input" id="u-item-quan" type="number" min="0" max="12" placeholder="Cols quantity">
            </label>
            <label for="" class="u-item-inputs-btn">
                <input disabled="" type="button" id="u-item-btn" value="Submit">
            </label>
        </div>
    </form>

</div>
    </div>

基于U-build.js实现网页布局在线定制，并自动生成代码的功能，可以帮助提高布局效率。

html5, design, tool

编辑器支持Emmet

快捷键

基于U-build.js实现网页布局在线定制，并自动生成代码的功能，可以帮助提高布局效率。

html5, design, tool

HTML5在线布鲁斯音乐演奏和交互制作工具

HTML5交互式动态景深（DOF）控制动画特效代码实例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：