idsci/application/admin/view/cms/manuscript/add.html

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">新建评估</li>
        <li>选择评估项</li>
        <li>选择人员</li>
        <li>完成设置</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
        <div class="form-group required">
            <label class="control-label col-xs-12 col-sm-2">{:__('Manuscript ( Word / Zip )')}:</label>
            <div class="col-xs-12 col-sm-7">
                <input type="text" id="name" class="form-control" name="row[manuscript_zip]" value="" data-rule="required">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Emethod')}:</label>
            <div class="col-xs-12 col-sm-8">
                {:build_radios('row[emethod]', ['1'=>'定量', '2'=>'定性'])}
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Cycle')}:</label>
            <div class="col-xs-12 col-sm-8">
                {:build_radios('row[cycle]', ['1'=>__('Day'), '2'=>__('Week'), '3'=>__('Month'), '4'=>__('Term')])}
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Is_upload')}:</label>
            <div class="col-xs-12 col-sm-8">
                {:build_radios('row[filebol]', ['1'=>__('Yes'), '2'=>__('No')])}
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Upload_file')}:</label>
            <div class="col-xs-12 col-sm-7">
                <div class="input-group">
                    <input type="text" name="row[filepath]" id="file-path" class="form-control"/>
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="upload-btn" class="btn btn-primary faupload" data-input-id="file-path" data-multiple="false" data-preview-id="p-local"><i class="fa fa-upload"></i>选择文件</button></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-button"><input type="button" name="next" class="next action-button" value="下一步"></div>
    </fieldset>
    <fieldset>
        <div id="toolbar" class="toolbar">
            <a href="javascript:;" class="btn btn-success btn-items }" title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
            <a href="javascript:;" class="btn btn-danger btn-reomove btn-disabled disabled }" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
        </div>
        <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
               data-operate-edit="{:$auth->check('assessment/evaluate/term/select')}"
               data-operate-del="{:$auth->check('assessment/evaluate/term/del')}"
               width="100%">
        </table>
        <div class="form-button">
            <input type="text" name="row[terms]" id="terms" class="form-control hidden" />
            <input type="button" name="previous" class="previous action-button-previous" value="上一步">
            <input type="button" name="next" class="next action-button" value="下一步">
        </div>
    </fieldset>
    <fieldset>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">开始时间:</label>
            <div class="col-xs-12 col-sm-8">
                <input type="datetime" class="form-control datetimepicker" name="row[starttime]" id="start-time" value="" placeholder="" data-date-format="YYYY-MM-DD" data-rule="required"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">结束时间:</label>
            <div class="col-xs-12 col-sm-8">
                <input type="datetime" class="form-control datetimepicker" name="row[endtime]" id="end-time" value="" placeholder="" data-date-format="YYYY-MM-DD" data-rule="required"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">评估者:</label>
            <div class="col-xs-12 col-sm-7">
                <div class="input-group">
                    <input type="text" name="row[audit]" id="audit" class="form-control" data-rule="required"/>
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="select-audit-btn" class="btn btn-primary btn-audit">请选择</button></span>
                    </div>
                    <input type="text" name="row[auditId]" id="auditId" class="form-control hidden" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">评估范围:</label>
            <div class="col-xs-12 col-sm-7">
                <div class="input-group">
                    <input type="text" name="row[scope]" id="scope" class="form-control" data-rule="required"/>
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="select-scope-btn" class="btn btn-primary btn-assessor btn-scope">请选择</button></span>
                    </div>
                    <input type="text" name="row[scopeId]" id="scopeId" class="form-control hidden" />
                </div>
            </div>
        </div>
        <div class="form-button">
            <input type="button" name="previous" class="previous action-button-previous" value="上一步">
            <input type="submit" name="Submit" class="disabled Submit action-button" value="完成设置">
        </div>
    </fieldset>
    <fieldset>
    </fieldset>
</form>

<style>
    /*form styles*/
    #add-form {
        position: relative;
        margin-top: 30px;
    }

    #add-form fieldset {
        background: white;
        border: 0 none;
        border-radius: 0px;
        box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
        padding: 20px 30px;
        box-sizing: border-box;
        width: 90%;
        margin: 0 5%;
        /*stacking fieldsets above each other*/
        position: relative;
    }

    /*Hide all except first fieldset*/
    #add-form fieldset:not(:first-of-type) {
        display: none;
    }

    /*buttons*/
    #add-form .form-button {
        text-align: center;
    }
    #add-form .form-radio {
        padding-top: 8px;
    }
    #add-form .action-button {
        width: 100px;
        background: #33bf0b;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 3px;
        cursor: pointer;
        padding: 6px 12px;
        margin: 10px 5px;
    }


    #add-form .action-button-previous {
        width: 100px;
        background: #C5C5F1;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 3px;
        cursor: pointer;
        padding: 6px 12px;
        margin: 10px 5px;
    }

    #add-form .action-button-previous:hover, #add-form .action-button-previous:focus {
        box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1;
    }

    /*headings*/
    .fs-title {
        font-size: 18px;
        text-transform: uppercase;
        color: #2C3E50;
        margin-bottom: 10px;
        letter-spacing: 2px;
        font-weight: bold;
    }

    .fs-subtitle {
        font-weight: normal;
        font-size: 13px;
        color: #666;
        margin-bottom: 20px;
    }

    /*progressbar*/
    #progressbar {
        margin-bottom: 30px;
        overflow: hidden;
        /*CSS counters to number the steps*/
        counter-reset: step;
        text-align: center;
    }

    #progressbar li {
        list-style-type: none;
        color: #c6c2bd;
        text-transform: uppercase;
        font-size: 9px;
        width: 25%;
        float: left;
        position: relative;
        letter-spacing: 1px;
    }

    #progressbar li:before {
        content: counter(step);
        counter-increment: step;
        width: 24px;
        height: 24px;
        line-height: 26px;
        display: block;
        font-size: 12px;
        color: #333;
        background: #c6c2bd;
        border-radius: 25px;
        margin: 0 auto 10px auto;
        position: relative;
        z-index: 1;
    }

    /*progressbar connectors*/
    #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: #c6c2bd;
        position: absolute;
        left: -50%;
        top: 9px;
        z-index: 0; /*put it behind the numbers*/
    }

    #progressbar li:first-child:after {
        /*connector not needed before the first step*/
        content: none;
    }

    /*marking active/completed steps green*/
    /*The number of the step and the connector before it = green*/
    #progressbar li.active:before, #progressbar li.active:after {
        background: #33bf0b;
        color: white;
    }

    /* Not relevant to this form */
    .dme_link {
        margin-top: 30px;
        text-align: center;
    }
    .dme_link a {
        background: #FFF;
        font-weight: bold;
        color: #33bf0b;
        border: 0 none;
        border-radius: 25px;
        cursor: pointer;
        padding: 5px 25px;
        font-size: 12px;
    }

    .dme_link a:hover, .dme_link a:focus {
        background: #C5C5F1;
        text-decoration: none;
    }

    .pull-left.pagination-detail{
        display:none;
    }
    .msg-box.n-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
    }
</style>