位置:首页  >   前端编程  > input单选框实现

input单选框实现

需求:新增广告,链接分三种1,普通的链接如:httP://www.baidu.com/map.php.  2.商品谅解  如ID005  3.搜索结果链接 如:对应地区,分类,主题下的搜索结果。后台处理为json字符串存入数据库。
效果:点击三个中的其中一个input另外两个input框灰显。
项目:旅游app项目后台
<div class="main-title">
        <h2>新增广告<span>(<i class="red">*</i> 为必填项)</span></h2>
    </div>

    <form action="{:U('Adver/doAddAdver')}" method="post"  enctype = "multipart/form-data"class="form-horizontal" name="myform" id="myform">

                <div class="form-item fix">
            <label class="item-label fl wid80 pr10"><i class="red">*</i>上传图片:</label>
        <div class="controls fl">
                <!--input-large-->
                <input type="file" class="file" name="adverurl" value="">
                <span class="onshow" style="margin-left:250px;">图片尺寸:640x272,图片格式为png、jpg、gif</span>
        </div>
        </div>
                <div class="form-item fix parentDiv">
            <label class="item-label fl wid80 pr10">链接:</label>
            <div class="controls fl sonfirst">
                <input type="text" class="text check" name="weblink" id="weblink" value="" class="check" />
                                <span class="onshow" style="margin-left:250px;">请输入链接地址</span>
            </div>
                        <div class="defaultpage" id="webpage"></div>
        </div>
        <div class="form-item fix parentDiv">
            <label class="item-label fl wid80 pr10">单个商品:</label>
            <div class="controls fl sonfirst">
                <input type="text" class="text check" name="goodsn" id="goodslink" value="" class="check" />
                                <span class="onshow" style="margin-left:250px;">请输入商品编号</span>
            </div>
                        <div class="webpage" id="goodspage"></div>
        </div>
                
                
                <div class="form-item fix parentDiv">
            <label class="item-label fl wid80 pr10">搜索结果:</label>
            <div class="controls fl sonfirst">
                                <span class="onshow">地区</span>
                                <select name="zoon" id="zoonlink">
                                        <option value='0'>请选择</option>
                                        <option value="-1">全部</option>
                                        <volist name="zoonInfo" id="vo">
                                                <option value="{$vo.area_id}">{$vo.title}</option>
                                        </volist>
                                </select>
                                <span class="onshow">分类</span>
                                <select name="kind" id="kindlink">
                                        <option value='0'>请选择</option>
                                        <option value="-1">全部</option>
                                {$kindInfo}
                                </select>
                                <span class="onshow">主题</span>
                                <select name="theme" id="themelink">
                                        <option value='0'>请选择</option>
                                        <option value="-1">全部</option>
                                        <volist name="themeInfo" id="vo">
                                                <option value="{$vo.id}">{$vo.themename}</option>
                                        </volist>
                                </select>
            </div>
                        <div class="longpage" id="searchpage"></div>
        </div>
                
                
                <div class="form-item fix">
            <label class="item-label fl wid80 pr10">释义:</label>
            <div class="controls fl">
                                <textarea class="textarea" name="title" cols="60" rows="3" maxlength="50"></textarea>
                                
            </div>
                        <span class="onshow" style="margin-left:20px;">50字以内</span>
        </div>

                 <div class="form-item ">
                        <label class="item-label fl wid80 pr10"><i class="red"></i></label>
                         <div class="controls fl">
                                <button class="btn submit-btn " id="submit" type="submit" target-form="form-horizontal">确 定</button>
                                    
                                <a class="btn" href="{:U('adverList')}" style="width:100px;height:22px;">返回</a>
                         </div>
        </div>
                

    </form>


js代码:

        //链接覆盖点击事件
        function onWebPage(ob){
                $(ob).css({'z-index':'0',display:'none'});
                $('#goodspage').css({'z-index':'2',display:'block'});
                $('#searchpage').css({'z-index':'2',display:'block'});
                
                //清空其他两项的值
                $('#goodslink').val('');
                $('#zoonlink').val('');
                $('#themelink').val('');
                $('#kindlink').val('');
        }
        
        //商品覆盖点击事件
        function onGoodsPage(ob){
                $(ob).css({'z-index':'0',display:'none'});
                $('#webpage').css({'z-index':'2',display:'block'});
                $('#searchpage').css({'z-index':'2',display:'block'});
                
                //清空其他两项的值
                $('#weblink').val('');
                $('#zoonlink').val('');
                $('#themelink').val('');
                $('#kindlink').val('');
        }
        
        //搜索结果覆盖点击事件
        function onSearchPage(ob){
                $(ob).css({'z-index':'0',display:'none'});
                $('#webpage').css({'z-index':'2',display:'block'});
                $('#goodspage').css({'z-index':'2',display:'block'});
                
                //清空其他两项的值
                $('#weblink').val('');
                $('#goodslink').val('');
        }


css样式:
<style>
.sonfirst{
        //border:1px solid red;
        position:absolute;
        z-index:1;
}
.parentDiv{
                //width:600px;
                height:30px;
                //border:1px solid green;
                position:relative;
}
.webpage{
        width:228px;
        height:30px;
        border:1px solid gray;
        position:absolute;
        left:95px;
        top:4px;
        z-index:2;
        background:#ccc;
}

.defaultpage{
        width:228px;
        height:30px;
        border:1px solid gray;
        position:absolute;
        left:95px;
        top:4px;
        z-index:0;
        background:#ccc;
        display:none;
}
.longpage{
        width:480px;
        height:30px;
        border:1px solid gray;
        position:absolute;
        left:95px;
        top:4px;
        z-index:2;
        background:#ccc;
}
</style>
图片1.png


小结:1.思路:input灰显,用一个div层进行遮挡。2.注意默认的z-index的设置!



0
文章属性
精彩评论