jquery插件leipi.form.build实现拖拽设计生成表单效果代码

代码语言:html

所属分类:拖放

代码描述:jquery插件leipi.form.build实现拖拽设计生成表单效果代码

代码标签: 实现 拖拽 设计 生成 表单 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE HTML>
<html>
<head>

    <title>拖拽式表单设计器 Formbuild.leipi.org</title>
    <meta name="keyword" content="拖拽式表单设计器,Web Formbuilder,Formbuild,专业表单设计器,高级表单设计器,智能表单设计器,WEB表单设计器,web formdesign,formdesigner">
    <meta name="description" content="拖拽式表单设计器Formbuild是强大的在线WEB表单设计器,它通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用,你可以在此基础上任意修改使功能无限强大!">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="leipi.org">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.2.3.css">

    <style>
        /*
*
 * Main navigation
 */
        .bs-docs-nav {
            text-shadow: 0 -1px 0 rgba(0,0,0,.15);
            /* background-color: #563d7c;*/
            border-color: #463265;
            box-shadow: 0 1px 0 rgba(255,255,255,.1);
        }
        .bs-docs-nav .navbar-collapse {
            border-color: #463265;
        }
        .bs-docs-nav .navbar-brand {
            color: #fff;
        }
        .bs-docs-nav .navbar-nav > li > a {
            color: #cdbfe3;
        }
        .bs-docs-nav .navbar-nav > li > a:hover {
            color: #fff;
        }
        .bs-docs-nav .navbar-nav > .active > a,
        .bs-docs-nav .navbar-nav > .active > a:hover {
            color: #fff;
            background: none;
        }
        .bs-docs-nav .navbar-toggle {
            border-color: #563d7c;
        }
        .bs-docs-nav .navbar-toggle:hover {
            background-color: #463265;
            border-color: #463265;
        }

        /* Page headers */
        .bs-header {
            padding: 40px 15px 20px;
            /* side padding builds on .container 15px, so 30px */
            margin: 20px 0;
            font-size: 16px;
            text-align: left;
            text-shadow: 0 1px 0 rgba(0,0,0,.15);
            background-color: #000;
            color: #fff;;
            background-repeat: repeat-x;
            background-image: -webkit-linear-gradient(45deg, #020031, #563d7c);
            background-image: -moz-linear-gradient(45deg, #020031, #563d7c);
            background-image: linear-gradient(45deg, #020031, #563d7c)

        }
        .bs-header p {
            font-weight: 300;
            line-height: 1.5;
        }
        /*
 * Footer
 *
 * Separated section of content at the bottom of all pages, save the homepage.
 */

        .bs-footer {
            padding-top: 40px;
            padding-bottom: 30px;
            margin-top: 40px;
            color: #777;
            text-align: left;
            border-top: 1px solid #e5e5e5;
            background-color: #f5f5f5
        }
        .footer-links {
            margin: 10px 0;
            padding-left: 0;
        }
        .footer-links li {
            display: inline;
            padding: 0 2px;
        }
        .footer-links li:first-child {
            padding-left: 0;
        }
    </style>
    <script type="text/javascript">
        var _root = 'http://formbuild/index.php?s=/', _controller = 'index';
    </script>

    <style>

        #components {
            min-height: 600px;
        }
        #target {
            min-height: 200px;
            border: 1px solid #ccc;
            padding: 5px;
        }
        #target .component {
            border: 1px solid #fff;
        }
        #temp {
            width: 500px;
            background: white;
            border: 1px dotted #ccc;
            border-radius: 10px;
        }

        .popover-content form {
            margin: 0 auto;
            width: 213px;
        }
        .popover-content form .btn {
            margin-right: 10px
        }
        #source {
            min-height: 500px;
        }
    </style>
    <!--link href="Public/css/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"-->


</head>
<body>



    <!-- Docs page layout -->
    <div class="bs-header" id="content">
        <div class="container">

            <h1>拖拽式表单设计器 <small>Formbuild Leipi Org</small></h1>

            <p>
                <strong>拖拽式</strong> VS <strong>编辑器</strong><br />VS:设计的表单是兼容的,但它们的样式不同,拖拽式是傻瓜式排版而编辑器排版难度大一些但效果更好。
                <br />
                交流Q群:143263697
            </p>

        </div>
    </div>




    <div class="container">
        <div class="row clearfix">
            <div class="span6">
                <div class="clearfix">
                    <h2>我的表单</h2>
                    <hr>
                    <div id="build">
                        <form id="target" class="form-horizontal">
                            <fieldset>
                                <div id="legend" class="component" rel="popover" title="编辑属性" trigger="manual"
                                    data-content="
                                    <form class='form'>
                                    <div class='controls'>
                                    <label class='control-label'>表单名称</label> <input type='text' id='orgvalue' placeholder='请输入表单名称'>
                                    <hr/>
                                    <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
                                    </div>
                                    </form>"
                                    >
                                    <input type="hidden" name="form_name" value="" class="leipiplugins" leipiplugins="form_name" />
                                    <legend class="leipiplugins-orgvalue">点击填写表单名</legend>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>

            <div class="span6">
                <h2>拖拽下面的控件到左侧</h2>
                <hr>
                <div class="tabbable">
                    <ul class="nav nav-tabs" id="navtab">
                        <li class="active"><a href="#1" data-toggle="tab">常用控件</a></li>
                        <li class><a href="#2" data-toggle="tab">定制控件</a></li>
                        <li class><a id="sourcetab" href="#5" data-toggle="tab">源代码</a></li>
                    </ul>
                    <form class="form-horizontal" id="components">
                        <fieldset>
                            <div class="tab-content">

                                <div class="tab-pane active" id="1">


                                    <!-- Text start -->
                                    <div class="control-group component" rel="popover" title="文本框控件" trigger="manual"
                                        data-content="
                                        <form class='form'>
                                        <div class='controls'>
                                        <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
                                        <label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'>
                                        <hr/>
                                        <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
                                        </div>
                                        </form>"
                                        >
                                        <!-- Text -->
                                        <label class="control-label leipiplugins-orgname">文本框</label>
                                        <div class="controls">
                                            <input name="leipiNewField" type="text" placeholder="默认值" title="文本框" value="" class="leipiplugins" leipiplugins="text" />
                                        </div>

                                    </div>
                                    <!-- Text end -->


                                    <!-- Textarea start -->
                                    <div class="control-group component" rel="popover" title="多行文本控件" trigger="manual"
                                        data-content="
                                        <form class='form'>
                                        <div class='controls'>
                                        <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
                                        <label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'>
                                        <hr/>
                                        <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
                                        </div>
                                        </form>"
                                        >
                                        <!-- Textarea -->
                                        <label class="control-label leipiplugins-orgname">多行文本</label>
                                        <div class="controls">
                                            <div class="textarea">
                                                <textarea title="多行文本" name="leipiNewField" class="leipiplugins" leipiplugins="textarea" /> </textarea>
                                        </div>
                                    </div>
                                </div>
                                <!-- Textarea end -->

                                <!-- Select start -->
                                <div class="control-group component" rel="popover" title="下拉控件" trigger="manual"
                                    data-content="
                                    <form class='form'>
                                    <div class='controls'>
                                    <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
                                    <label class='control-label'>下拉选项</label>
                                    <textarea style='min-height: 200px' id='orgvalue'></textarea>
                                    <p class='help-block'>一行一个选项</p>
                                    <hr/>
                                    <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
                                    </div>
                                    </form>"
                                    >
                                    <!-- Select -->
                                    <label class="control-label leipiplugins-orgname">下拉菜单</label>
                                    <div class="controls">
                                        <select name="leipiNewField" title="下拉菜单" class="leipiplugins" leipiplugins="select">
                                            <option>选项一</option>
                                            <option>选项二</option>
                                            <option>选项三</option>
                                        </select>
                                    </div>

                                </div>
                                <!-- Select end -->


                                <!-- Select start -->
                                <div class="control-group component" rel="popover" title="多选下拉控件" trigger="manual"
                                    data-content="
                                    <form class='form'>
                                    <div class='controls'>
                                    <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
                                    <label class='control-label'>下拉选项</label>
                                    <textarea style='min-height: 200px' id='orgvalue'></textarea>
                                    <p class='help-block'>一行一个选项</p>
                                    <hr/>
                                    <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
                                    </div>
                                    &.........完整代码请登录后点击上方下载按钮下载查看

网友评论0