写的一个select插件很粗糙;慢慢修改

$.createSelect= function(options){
    $(options.selectors).each(function(index, item){
        $(item).each(function(index, selector){
            if($(selector).is(‘select‘)){
                var optionLength = $(this).find(‘option‘).length;
                if(optionLength > 0){
                    var divClass = $(this).attr(‘class‘);
                    var jsScroll = ‘<div class="‘+divClass+‘ selector"><span>‘+$(this).find(‘option‘).eq(0).text()+‘</span><ul>‘;
                    for(var i = 0 ; i < optionLength; i++){
                        var $op = $(this).find("option").eq(i);
                         jsScroll += "<li val=‘" + $op.attr("value") + "‘>" + $op.html() + "</li>\n";
                    }
                    jsScroll += ‘</ul></div>‘;
                    $(this).after(jsScroll);
                    $(this).hide();
                    var $divW = $(‘.‘+divClass).outerWidth();
                    $(‘.‘+divClass).find(‘span‘).css({‘width‘:$divW-5}).on(‘click‘,function(){
                                   $(this).next(‘ul‘).show();
                    }).end().find(‘ul‘).css({‘width‘:$divW}).find(‘li‘)
                    .on({
                        ‘mouseover‘:function(){$(this).addClass(‘cur‘)},
                        ‘mouseout‘:function(){$(this).removeClass(‘cur‘)},
                        ‘click‘:function(){
                        $(this).closest(‘ul‘).hide().siblings(‘span‘).text($(this).text());
                        }
                    });
                }
            }
        })
    })
}
$.createSelect({
    ‘selectors‘:[‘.selector1‘]
})
.selector{border:1px solid #ccc;position:relative;}
.selector span{padding-left: 5px;background:url(icon.png) no-repeat 265px -19px ;display: inline-block;width:100%;height:100%; cursor: pointer;}
.selector ul{position:absolute;top:31px;left:-1px;width:300px;border:1px solid #ccc;display:none;}
.selector ul li {height:25px;line-height:25px;padding-left:5px; cursor: pointer;}
.selector ul li.cur{background: #eee;}
时间: 2024-12-26 19:01:31

写的一个select插件很粗糙;慢慢修改的相关文章

最近写的一个弹窗插件

最近因为项目需要,写了一个模拟弹窗的插件,代码不是很优雅,有时间改一下,欢迎拍砖 js代码: 1 /* 2 *selfWindow组建,主要是用于模拟移动网站的alert(),confirm()窗口点解某一按钮跳转到某一个页面的效果, 3 *因为给予移动web,所以没有兼容低版本ie 4 *调用方法:var win = new SelfWinsow({ 5 * types : "confirm",//这里可以选择的参数有,alert,confirm,confirm2,link 6 *

wg_pagenation 1.0 自己写的一个分页插件_基于Jquery

前言: 现在这个分页插件也不少,感觉缺点什么,所以自己就写了一个,喜欢的人就拿去用......有bug和建议可以回复,我有空就修改和答复..... 感谢我的基友,刘总...他主要给本插件写配套主题css; 特点: 整合ajax可以异步和后台交互数据,定制化选项多.和Jquery的pagenation比较类似,但是功能更多,选择性更多. 当前版本:1.0 完成日期:20150815 效果图: White.css的效果图: default.css效果图: 上图上向下的箭头表示的是每一个可选择和更改的

自己在项目中写的一个Jquery插件和Jquery tab 功能

后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearchResult { public PDFSearchResult(string title, string fileUrl) { Title = title; FileUrl = fileUrl; } [DataMember(Name = "title")] public string Ti

一个简单js select插件

现在,通过一个select插件,来介绍一下js插件的构建过程. 1.先上效果图 2.目录构建 (1)这个select插件,我给它起名交hongselect,所以呢,首先建个hongselect的文件夹. (2)接着建一个src目录来放源码. (3)我想把源代码托管到github上,所以呢,再建一个README.md文件,来写这个插件的一个说明文档. (4)然后建一个.gitignore文件,来说明那些文件或文件夹是不需要加入代码版本管理的. (5)该插件依赖于jQuery,我们要下载它,对于js

为PhoneGap写一个android插件

为PhoneGap写一个android插件,要怎么做? 其实这句话应该反过来说,为android写一个PhoneGap插件,要怎么做? 这里以最简单的Hello World!为例,做个说明: 1.第一步,要先建立一个支持PhoneGap(Cordova)的android工程 因为这个插件本质上是安卓插件,用于PhoneGap,因此,要二者支持才行,所以我们要建立一个支持PhoneGap(Cordova)的android工程,插件在这个工程里面编写. 扫盲:PhoneGap现在已经出售给了Apac

如何给Ionic写一个cordova插件

写一个cordova插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还会有一丝丝头痛,却没有一开始那么强烈了... 在正式写下文之前,我先感谢公司大boss:王总,感谢他让我进入了一个有挑战性的技术公司 并在这个过程中一直鼓励我不断汲取新技术,同时也指正了我在开发中的一些不太好的习惯,十分感谢! 再~,感谢在开发中给予我太多帮助的杜勇以及孙金~,不论是需求讨论还是具体开发阶段都会给予一些十分有用的思

写了一个简单的jquery插件(初恋啊)

用了好久的jquery了,却没有写过插件,今天研究了一个别人的插件和一些文章,总算搞清楚了jquery插件一些写法, 代码写了一个div当鼠标事件发生时的宽高变化情况,基础,代码基础,基础好了,才能研究深入的东西. 1 (function(jQuery){ 2 /* 3 * 插件应该返回一个JQuery对象,以便保证插件的可链式操作. 4 * JQuery插件的机制:jQuery提供了2个用于扩展jQuery功能的方法 5 * jQuery.fn.extend() 6 * jQuery.exte

一个很粗糙的XXXX

改dnsrecon的代码改来改去都获取不到想要的结果,也不知道是不是py中的正则和PHP的有神马不一样的地方,但是用RegexBuddy测的时候是正确的,想不通啊想不通.果断不改了,自己动手PHP写了一个很粗糙的XX,用的X度来获取子域名,也没再改进了,能用就OK了,话说PHP真慢~~ <?php $curl=curl_init(); $page=0; $output=""; while($page<101) //这里获取前十页结果,爬的企鹅的子域名 { $query=&q

写一个umi插件 自动生成代码 解放cv的双手

引言 最近在写一个中台项目,使用的react的umi框架. 各种增删改查.基本是列表页 新建页 详情页这种页面 为了避免不必要的简单重复(主要是想偷懒) 于是想去实现自己的一个代码生成器 探索 首先,在官网上看到了官方写的一个生成器 再去源码里扒一扒 找到关键所在 简而言之,就是利用插件的api注册了一个生成model的指令,生成器指向目录里的model.js 代码如下 import { join } from 'path'; import assert from 'assert'; expor