js封装求教

seal_li 2018-02-23 09:24:24

css部分

html部分

js部分


第一次使用jQuery封装，求教大佬如何封装js代码，有没有BAT的代码规范给参考下。
觉得自己写的又乱又没逻辑。

以下为源码
(function($){
$.extend({
select:function(options){
var id=options.id;
var ulheight=options.height==null?200:options.height;
var inputBoxWidth=parseFloat($("#"+id+">input").css("padding-right"))+parseFloat($("#"+id+">input").css("padding-left"))+parseFloat($("#"+id+">input").css("width"))
$("#"+id+">ul").css("width",inputBoxWidth+"px")
$(document).click(function(event){
if($("#"+id+">ul").css("display")!="none"){
if($("#"+id+">input").is(event.target)){
}else{
$("#"+id+">ul").fadeOut("fast");
}
}
})
$("#"+id+">input").click(function(){
var thisinput=$(this);
var thisul=$(this).parent().find("ul");
if(thisul.css("display")=="none"){
if(thisul.height()>parseFloat(ulheight)){thisul.css({
height:ulheight+"px"
,"overflow-y":"scroll"
})
};
thisul.fadeIn("100");
thisul.find("li").click(function(){
thisinput.val($(this).text());
thisul.fadeOut("100");
})
}
else{
thisul.fadeOut("fast");
}
})
}
})
})(jQuery)
...全文
1171 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
roffer 2018-02-26
  • 打赏
  • 举报
 回复
引用 3 楼 seal_li 的回复:
[quote=引用 2 楼 roffer的回复:] 个人觉得，你这个插件复用性不高，而且页面元素要写一大堆，还要写那么多css样式。 既然是插件，就要方便使用，调用插件时，只需要传递一个input输入框和下拉选项数组(后面可以再扩展更多属性支持)，插件内部动态封装好css部分以及动态生成html元素
就是不会，第一次写，所以才来请教一下，能不能改一下。css这些直接是引入的，不用写。[/quote] 今天比较闲，给你写了个完整的demo，代码如下： 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Select</title>
	<style>
		.sel{
			width: 130px;
    		font-size: 12px;
    		cursor: pointer;
    		color: #555;
    		margin: 10px;
		}
		.sel .result{
			position: relative;
			padding: 5px;
			height: 20px;
    		border: 1px solid #bbb;
    		border-radius: 5px;
		}
		.sel .text{
			
		}
		.sel .arrow{
			display: inline-block;
		    position: absolute;
		    right: 8px;
		    top: 10px;
		    width: 0;
		    height: 0;
		    border-left: 4px solid transparent;
		    border-right: 4px solid transparent;
		    border-top: 8px solid #999;
		}
		.sel .option{
			padding: 0;
		    margin: 0;
		    border: 1px solid #ccc;
		    border-radius: 5px;
		    box-shadow: 0 6px 12px rgba(0,0,0,.175);
		    position: relative;
		    top: 4px;
		    list-style: none;
		    display: none;
		    max-height: 200px;
    		overflow: scroll;
		}
		.sel .option li{
			padding: 2px 5px;
		}
		.sel .option li:hover{
			background: #eee;
		}
	</style>
</head>
<body>
	<div class="sel"></div>
	<div class="sel"></div>
	<div class="sel"></div>

	<button>获取选中的值</button>
	<div id="show"></div>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
		(function($){
			$.fn.dropdown = function(option){
				var _this = this;
				this.each(function(){
					var defaults = {
						data:[],
						value:null,
						placeholder:'请选择'
					}

					option = $.extend(defaults,option);

					var innerHtml = [],self = $(this);

					innerHtml.push('<div class="dropdown">');
					innerHtml.push('	<div class="result"><span data-value="" class="text">' + option.placeholder + '</span><span class="arrow"></span></div>');
					innerHtml.push('	<ul class="option">');

					$(option.data).each(function(index,item){
						innerHtml.push('<li data-value="' + item.id + '">' + item.text + '</li>');
					})

					innerHtml.push('	</ul>');
					innerHtml.push('</div>');

					$(this).html(innerHtml.join(''));

					if(option.value){
						$(option.data).each(function(index,item){
							if(item.id == option.value){
								$('.text',self).text(item.text);
								$('.text',self).data('value',option.value);
							}
						})
					}

					$('.result',this).click(function(){
						$('.dropdown .option').hide();
						$('.option',self).slideToggle();
					})

					$('li',this).click(function(){
						$('.text',self).text($(this).text());
						$('.text',self).data('value',$(this).data('value'));
						$('.option',self).hide();
					})
				})

				return {
					val:function(){
						if(_this.length > 1){
							return $('.text',_this).map(function(index,item){return $(item).data('value')}).get();
						}
						return $('.text',_this).data('value');
					}
				}
			}

			$(document).click(function(e){
				var target = e.target||e.srcElement;
				var isDropdown = $(target).closest('.dropdown').length == 0;
				
				isDropdown && $('.dropdown .option').hide();
			})
		})(jQuery)
	</script>
	<script>
		var list = [{id:1,text:'选项一'},{id:2,text:'选项二'},{id:3,text:'选项三'}];
		var option = {
			data:list,
			value:3,
			placeholder:'请选择选项'
		}

		var a = $('.sel').dropdown(option);

		$('button').click(function(){
			$('#show').html(a.val().join(','))
		})
	</script>
</body>
</html>
roffer 2018-02-24
  • 打赏
  • 举报
 回复
个人觉得，你这个插件复用性不高，而且页面元素要写一大堆，还要写那么多css样式。 既然是插件，就要方便使用，调用插件时，只需要传递一个input输入框和下拉选项数组(后面可以再扩展更多属性支持)，插件内部动态封装好css部分以及动态生成html元素
zekelove 2018-02-24
  • 打赏
  • 举报
 回复
这是扩展函数的写法
Go 旅城通票 2018-02-24
  • 打赏
  • 举报
 回复
jquery插件大概下面，自己看，http://ask.csdn.net/questions/680639这个也记得采纳了 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
    <style>
        /*tag begin*/
        /*select_box begin*/
        .select_box {
            width: 150px;
            position: relative;
            padding: 0;
            font-size: 12px;
        }

            .select_box > input {
                cursor: pointer;
                line-height: 25px;
                width: 100%;
                height: 25px;
                overflow: hidden;
                border: 1px solid #ccc;
                padding-right: 10px;
                padding-left: 10px;
            }

            .select_box ul, li {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

            .select_box ul {
                position: absolute;
                left: 0;
                top: 29px;
                border: 1px solid #ccc;
                overflow: hidden;
                display: none;
                background: #ebebeb;
                z-index: 99999;
            }

            .select_box .arrows {
                position: absolute;
                border: 6px solid transparent;
                top: calc(50% - 4px);
                right: 0px;
                border-top-color: black;
            }

            .select_box ul li {
                display: block;
                height: 30px;
                overflow: hidden;
                line-height: 30px;
                padding-left: 5px;
                cursor: pointer;
            }

            .select_box li:hover {
                background: #ccc;
            }
        /*select_box begin*/
        /*tag end*/
    </style>
    <title>ul模拟select</title>
</head>
<body>
    <div class="select_box">
        <div class="arrows"></div>
        <input type="text" value="请选择..." readonly="readonly" />
        <ul>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
            <li>选项四</li>
            <li>选项五</li>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
            <li>选项四</li>
            <li>选项五选项五选项五选项五选项五</li>
        </ul>
    </div>
    <div class="select_box">
        <div class="arrows"></div>
        <input type="text" value="请选择..." readonly="readonly" />
        <ul>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
            <li>选项四</li>
            <li>选项五</li>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
            <li>选项四</li>
            <li>选项五选项五选项五选项五选项五</li>
        </ul>
    </div>
    <script>
        (function ($) {
            $.fn.select = function (options) {
                return this.each(function(){
                    var container = $(this), input = container.find('>input'),ul=container.find('>ul');
                    var ulheight = options.height == null ? 200 : options.height;
                    var inputBoxWidth = parseFloat(input.css("padding-right")) + parseFloat(input.css("padding-left")) + parseFloat(input.css("width"))
                    ul.css("width", inputBoxWidth + "px")
                    $(document).click(function (event) {
                        if (ul.css("display") != "none") {
                            if (!input.is(event.target)) {
                                ul.fadeOut("fast");
                            }
                        }
                    })
                    input.click(function () {
                        if (ul.css("display") == "none") {
                            if (ul.height() > parseFloat(ulheight)) {
                                ul.css({
                                    height: ulheight + "px"
                                 , "overflow-y": "scroll"
                                })
                            };
                            ul.fadeIn("100");
                            ul.find("li").click(function () {
                                input.val($(this).text());
                                ul.fadeOut("100");
                            })
                        }
                        else {
                            ul.fadeOut("fast");
                        }
                    })
                });
            }
        })(jQuery)
    </script>
    <script type="text/javascript">
        $('.select_box').select({  height: "200" })
    </script>
</body>
</html>
seal_li 2018-02-24
  • 打赏
  • 举报
 回复
[quote=引用 4 楼 showbo 的回复:] 样式，html，js一起发出来，不要截图，都不好调试 已发求帮助
seal_li 2018-02-24
  • 打赏
  • 举报
 回复
html部分代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="taglibs.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="${root}/js/jquery-3.2.1.min.js"></script> <link rel="stylesheet" type="text/css" href="${root}/css/tag.css"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>ul模拟select</title> </head> <body> <div class="select_box" id="select"> <div class="arrows"></div> <input type="text" value="请选择..." readonly="readonly" /> <ul> <li>选项一</li> <li>选项二</li> <li>选项三</li> <li>选项四</li> <li>选项五</li> <li>选项一</li> <li>选项二</li> <li>选项三</li> <li>选项四</li> <li>选项五选项五选项五选项五选项五</li> </ul> </div> <script type="text/javascript" src="${root}/js/tag.js"></script> <script type="text/javascript"> $.select({id:"select",height:"200"}) </script> </body> </html>
seal_li 2018-02-24
  • 打赏
  • 举报
 回复
css部分代码 /*tag begin*/ /*select_box begin*/ .select_box { width:150px; position:relative; padding:0; font-size:12px; } .select_box>input { cursor:pointer; line-height:25px; width:100%; height:25px; overflow:hidden; border:1px solid #ccc; padding-right:10px; padding-left:10px; } .select_box ul,li { list-style-type:none; padding:0; margin:0 } .select_box ul { position:absolute; left:0; top:29px; border:1px solid #ccc; overflow: hidden; display:none; background:#ebebeb; z-index:99999; } .select_box .arrows{ position:absolute; border: 6px solid transparent; top:calc(50% - 4px); right: 0px; border-top-color:black; } .select_box ul li { display:block; height:30px; overflow:hidden; line-height:30px; padding-left:5px; cursor:pointer; } .select_box li:hover { background:#ccc; } /*select_box begin*/ /*tag end*/
Go 旅城通票 2018-02-24
  • 打赏
  • 举报
 回复
样式，html，js一起发出来，不要截图，都不好调试

Web开发学习资料推荐
jqGrid导航Navigator配置
JavaScript apply与call的用法及区别
seal_li 2018-02-24
  • 打赏
  • 举报
 回复
引用 2 楼 roffer的回复:
个人觉得，你这个插件复用性不高，而且页面元素要写一大堆，还要写那么多css样式。 既然是插件，就要方便使用，调用插件时，只需要传递一个input输入框和下拉选项数组(后面可以再扩展更多属性支持)，插件内部动态封装好css部分以及动态生成html元素
就是不会，第一次写，所以才来请教一下，能不能改一下。css这些直接是引入的，不用写。
实用的js封装
以下这些是项目中用到的，封装的方法，如果有问题虚心求教。 /** * 存储 sessionStorage */ export const __setItem = (name, content) => { if (!name) return; if (typeof content !== 'string') { ...
java js渲染_(JS):求教前台页面JS渲染Table的优化方法
(JS高手请进):求教前台页面JS渲染Table的优化方法前台页面显示一个若干行列的Table,行列数由后台服务器传递的总记录来计算,通过Firebug可以查看到数据传授到前后至正常显示Table的这段时间很长,用户估计等不及,所以...
jquery 组件 PHP,jquery 求教：如何去思考一个JQ的组件封装？
主要是在JS的代码结构规划上面。比如：我有一个表格，里面放进了数量，名字，高度，宽度，等等一系列的数据，数据格式object,array,number,fn()等等各种都有。在外面调用这个组件时根据传入的数据将对应的信息显示...
小程序获取详细地址后 省市区县分割 js
代码部分：我是将公共方法封装在了util.js文件里，在需要的页面进行调用的；2、再将所有的市分割，包括行政区、县、自治州、区、行政区划、盟；3、最后截取完省市的地址就市县、镇、乡之类的地址了。1、先将所有的省...
【Java学习笔记】——JavaScript
【Java学记笔记】——JavaScript
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章