jquery input选择弹框

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="jquery.plugin.js"></script>

<link rel="stylesheet" type="text/css" href="jquery.plugin.css" />

<script type="text/javascript">

    jQuery.fn.selectCity = function(targetId) {

        var _seft = this;

        var targetId = $(targetId);

        this.click(function() {

            var A_top = $(this).offset().top + $(this).outerHeight(true);

            var A_left = $(this).offset().left;

            targetId.bgiframe();

            targetId.show().css({

                "position" : "absolute",

                "top" : A_top + "px",

                "left" : A_left + "px"

            });

        });

        targetId.find("#selectItemClose").click(function() {

            targetId.hide();

        });

        targetId.find("#selectSub :checkbox").click(function() {

            targetId.find(":checkbox").attr("checked", false);

            $(this).attr("checked", true);

            _seft.val($(this).val());

            targetId.hide();

        });

        $(document).click(function(event) {

            if (event.target.id != _seft.selector.substring(1)) {

                targetId.hide();

            }

        });

        targetId.click(function(e) {

            e.stopPropagation();

        });

        return this;

    };

    $(function() {

        $("#address").selectCity("#selectItem");

        $("#address2").selectCity("#selectItem2");

    });

</script>

</head>

<body>

    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input type="text" name="address" id="address" size="33"><br>

    <div id="selectItem" class="selectItemhidden">

        <div id="selectItemAd" class="selectItemtit bgc_ccc">

            <h2 id="selectItemTitle" class="selectItemleft">请选择城市</h2>

            <div id="selectItemClose" class="selectItemright">关闭</div>

        </div>

        <div id="selectItemCount" class="selectItemcont">

            <div id="selectSub">

                <input type="checkbox" name="cr01" id="cr01" value="北京1" />

                <label for="cr01">北京1</label>

                <input type="checkbox" name="cr02" id="cr02" value="北京2" />

                <label for="cr02">北京2</label>

                <input type="checkbox" name="cr03" id="cr03" value="北京3" />

                <label for="cr03">北京3</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

            </div>

        </div>

    </div>

<!--

    <input type="text" name="address2" id="address2" size="20">

    <div id="selectItem2" class="selectItemhidden">

        <div id="selectItemAd" class="selectItemtit bgc_ccc">

            <h2 id="selectItemTitle" class="selectItemleft">请选择城市</h2>

            <div id="selectItemClose" class="selectItemright">关闭</div>

        </div>

        <div id="selectItemCount" class="selectItemcont">

            <div id="selectSub">

                <input type="checkbox" name="cr04" id="cr04" value="北京1" />

                <label for="cr04">北京1</label>

                <input type="checkbox" name="cr05" id="cr05" value="北京2" />

                <label for="cr05">北京2</label>

                <input type="checkbox" name="cr06" id="cr06" value="北京3" />

                <label for="cr06">北京3</label>

                <input type="checkbox" name="cr07" id="cr07" value="北京4" />

                <label for="cr07">北京4</label>

            </div>

        </div>

    </div>

 -->

</body>

</html>

jquery.plugin.css

body{font-size:12px;}

#selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;width:240px;z-index:;}

.selectItemtit{line-height:20px;height:20px;margin:1px;padding-left:12px;}

.bgc_ccc{background:#E88E22;}

.selectItemleft{float:left;margin:0px;padding:0px;font-size:12px;font-weight:bold;color:#fff;}

.selectItemright{float:right;cursor:pointer;color:#fff;}

.selectItemhidden{display:none;}

.selectItemcont{padding:8px;}

/*.selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;}*/

/*#selectItem2{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;width:240px;z-index:1000;}*/

jquery.plugin.js

(function($){

$.fn.bgIframe = $.fn.bgiframe = function(s) {

    // This is only for IE6

    if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {

        s = $.extend({

            top     : 'auto', // auto == .currentStyle.borderTopWidth

            left    : 'auto', // auto == .currentStyle.borderLeftWidth

            width   : 'auto', // auto == offsetWidth

            height  : 'auto', // auto == offsetHeight

            opacity : true,

            src     : 'javascript:false;'

        }, s || {});

        var prop = function(n){return n&&n.constructor==Number?n+'px':n;},

            html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+

                       'style="display:block;position:absolute;z-index:-1;'+

                           (s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+

                           'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+

                           'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+

                           'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+

                           'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+

                    '"/>';

        return this.each(function() {

            if ( $('> iframe.bgiframe', this).length == 0 )

                this.insertBefore( document.createElement(html), this.firstChild );

        });

    }

    return this;

};

})(jQuery);

构建的js

var selectItemhidden = jQuery("<div></div>").addClass("selectItemhidden").attr("id","selectItem");

var selectItemtit = jQuery("<div></div>").addClass("selectItemtit bgc_ccc").attr("id","selectItemAd");

var selectItemleft = jQuery("<h2></h2>").addClass("selectItemleft").attr("id","selectItemTitle");

var selectItemright = jQuery("<div></div>").addClass("selectItemright").attr("id","selectItemClose");

var selectItemcont = jQuery("<div></div>").addClass("selectItemcont").attr("id","selectItemCount");

var selectSub = jQuery("<div></div>").attr("id","selectSub");

var checkbox = jQuery("<input>").attr("type","checkbox").attr("name","cr01").attr("id","cr01").val("北京1");

var label = jQuery("<label>").attr("for","cr01").html("北京");

var title = selectItemtit.append(selectItemleft).append(selectItemright);

var content = selectItemcont.append(selectSub.append(checkbox).append(label));

selectItemhidden.append(title).append(content);

jquery input选择弹框的更多相关文章

jquery 点击弹框
<a href="#" class="big-link" data-reveal-id="myModal" data-animatio ...
jquery点击弹框外层关闭弹框
$(document).bind("click",function(e){ if($( e.target ).closest(".game-cont ...
jquery input 下拉框(模拟select控件)焦点事件
本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...
jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于需要多添加一个属性: ...
H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...
elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错
ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...
jquery mobile将页面内容当成弹框进行显示
注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...
jquery EsayUi 里一个小弹框
网站后台大多的数据展示就都用和此插件有着密切的关系: 来用一下这个小弹框吧: 一个Html里面的代码 <link rel='stylesheet' type='text/css' href='c ...

随机推荐

Oracle性能优化--DBMS_PROFILER
想看到过程或者函数执行每一步的过程:想看到每一步所占的时间吗?借助profiler吧:它可以满足你来分析过程/函数执行比较久:可以直接快速找到病因:从而可以优化那一步需要优化下. 一 ...
Spring集成memcached的详细介绍
前提条件:工程需要引入jar包java_memcached-release_2.0.1.jar 第一步:添加memcached的配置文件. <bean class="org.sprin ...
hdwiki中模板的使用说明
HDwiki所有模版文件都在根目录view下的default文件里,以admin_开头的是后台的模版文件,其它不是以admin_开头的,就是所有的前台文件.具体列表如下:首页模版文件: index. ...
sass初步认识2
sass可以使用变量,采用 $ 来进行变量声明,格式为: $highlight-color:#f90;(声明方式和css属性声明类似.使用的变量名可以更加语义化) 与js分为全局变量和局部变量类似,s ...
prop
用法:prop(属性|key,value|fn) 用例:点击全选/取消全选 // 全选和全不选 $("#check_all").click(function () { if ($ ...
webrtc - web 应用相关网站
很有意思的网站 http://io13webrtc.appspot.com/#1 html5使用webrtc简介 http://www.html5rocks.com/en/tutorials/getu ...
[团队项目]sprint3 & 团队贡献分。
希望各组认真准备,拿出最好的阵容最好的状态,展示一学期的学习与工作成果. 各组注意完成sprint3的博客,写上团队贡献分. 将演示PPT(如果有)和代码上传到github. 截止日期:2016.6. ...
排序练习——找出前m大的数字分类：排序 2015-06-08 09:33 21人阅读评论(0) 收藏
排序练习--找出前m大的数字 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述给定n个数字,找出前m大的数字. 输入多组输 ...
检索COM类工厂中CLSID为{000209FF-0000-0000-C000-000000000046}的组件时失败，原因是出现以下错误: 80070005
检索COM类工厂中CLSID为{000209FF-0000-0000-C000-000000000046}的组件时失败,原因是出现以下错误: 80070005 http://blog.csdn.net ...
lua中特殊用法
th> a=torch.zeros(,) [.0001s] th> a [torch.DoubleTensor of size 1x5] [.0001s] th> a[{,floor ...

jquery input选择弹框

jquery input选择弹框的更多相关文章

随机推荐

热门专题