<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery/jquery-2.1.1.min.js"></script>
    <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerComboBox.js"></script>
    <script src="js/ckeditor/ckeditor.js"></script>
    <title>文章管理列表</title>
    <style>
        .content{  margin:0 auto; width:100%;  }
        .title{  margin:0 auto; width:500px;  }
        input{  width:350px; }
        .ad-padd{  height: 100px;  width: 95%;  padding: 10px;  margin:30px border: solid 1px #dcdcdc;  border-radius: 2px;  font-size: 12px;  }
        .ad-padd::-webkit-input-placeholder{  color:#ccc;  }
        .ad-padd::-moz-placeholder{  color:#ccc;  }
        .ad-padd:-moz-placeholder{  color:#ccc;  }
        .ad-padd:-ms-input-placeholder{  color:#ccc;  }
        .hidden{  display: none;  }
        table{    margin-top: 30px;}
        table tr{height: 40px;  line-height: 40px;}
        .td-left{text-align: right;}
        .td-right{text-align: left;}
        .width350{width: 350px !important;}
    </style>
</head>

<body>
    <form  id="article" onsubmit="return sub()">
        <div class="liger-form">
            <div class="content">
                <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="30%" class="td-left"><label>标&emsp;&emsp;题：</label></td>
                        <td width="70%" class="td-right">
                            <input class="liger-textbox width350" name="title" data-label="标题" required="required" />
                        </td>
                    </tr>
                    <tr>
                        <td width="30%" class="td-left"><label>文章类型：</label></td>
                        <td width="70%" class="td-right">
                            <input id="typeSelect"/>
                            <input type="hidden" name="type" id="type"/>
                            <input type="hidden" name="typeName" id="typeName"/>
                        </td>
                    </tr>
                    <tr>
                        <td width="30%" class="td-left"><label>文章来源：</label></td>
                        <td width="70%" class="td-right">
                            <input id="articleFrom"  required="required" />
                        </td>
                    </tr>
                    <tr class="fromUrl hidden">
                        <td width="30%" class="td-left">
                            URL：
                        </td>
                        <td width="70%" class="td-right">
                            <input type="url" id="url" name="url"  class="liger-textbox" class="width350"/>
                        </td>
                    </tr>
                    <tr class="bySelf hidden">
                        <td width="30%" class="td-left">
                            关&ensp;键&ensp;字：
                        </td>
                        <td width="70%" class="td-right">
                            <input name="keyword" class="liger-textbox" class="width350"/>
                        </td>
                    </tr>
                    <tr class="bySelf hidden">
                        <td width="30%" class="td-left"><label class="bySelf hidden">简&emsp;&emsp;介：</label></td>
                        <td width="70%" class="td-right">
                            <div class="width350"><textarea class="ad-padd" name="contentFirst" placeholder="简介" ></textarea></div>
                        </td>
                    </tr>
                    <tr class="bySelf hidden">
                        <td colspan="2">
                            <div  style="width: 80%;margin:0 auto;"><textarea id="TextArea1"  cols="20" rows="2" name="ckeditor" class="ckeditor"></textarea></div>
                            <input  type="hidden" name="content" id="content" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center">
                            <input type="reset" value="重置" style="width: 80px;">&emsp;&emsp;
                            <input type="submit" value="保存" style="width: 80px;"/>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
</body>
<script>
    $("#typeSelect").ligerComboBox(
        {
            url:"getArticleType",
            valueField: 'code',
            textField: 'name',
            selectBoxWidth: 400,
            onSelected:function(value,text){
                $("#type").val(value);
                $("#typeName").val(text);
            }
        }
    );

    $("#articleFrom").ligerComboBox(
            {
                data: [
                    {id: 1, name: '从url获取'},
                    {id: 2, name: '录入'},
                ],
                valueField: 'id',
                textField: 'name',
                selectBoxWidth: 400,
                onSelected:function(value,text){
                    if(value==1){
                        $(".fromUrl").each(function(){
                            $(this).removeClass("hidden");
                            $(".bySelf").each(function(){
                                $(this).addClass("hidden");
                            })
                        })
                        $("#url").attr("required",true);//设置url必输
                    }else if(value==2){
                        $(".bySelf").each(function(){
                            $(this).removeClass("hidden");
                            $(".fromUrl").each(function(){
                                $(this).addClass("hidden");
                            })
                        })
                        if(typeof($("#url").attr("required"))!=="undefined"){
                            $("#url").attr("required",false);//取消设置url必输
                        }
                    }
                }
            }
    );
    var editor = CKEDITOR.replace('ckeditor');

    function sub(){
        var articleFrom = $("#articleFrom").ligerComboBox().getValue();
        if(articleFrom==''){
            alert("请选择文章来源");
            return false;
        }

        var typeSelect = $("#typeSelect").ligerComboBox().getValue();
        if(typeSelect==''){
            alert("请选择文章类型");
            return false;
        }

        var data = editor.getData();
        if(articleFrom==2){
            if(data==undefined||data==''){
                alert("请输入文章内容")
                return false;
            }
        }
        $("#content").val(data);
        $.ajax({
            cache: true,
            type: "POST",
            url:"save",
            data:$('#article').serialize(),
            async: false,
            error: function(request) {
                alert("服务器忙");
            },
            success: function(data) {
                alert("保存成功");
                window.location.href="toList";
            }
        });
        return false;
    }
</script>
</html>