非常使用的js组件

1.实现商城评分小星星

/**
 * JS评分效果
 */
function Score(options) {
    this.config = {
        selector: ‘.star‘,     // 评分容器
        renderCallback: null,        // 渲染页面后回调
        callback: null         // 点击评分回调
    };

this.cache = {
        aMsg: [
            "很不满意|差得太离谱",
            "不满意|部分有破损",
            "一般|质量一般",
            "满意|质量不错",
            "非常满意|质量非常好"
        ],
        iStar: 0,
        iScore: 0
    };
    var scoreResult = 0;

this.init = function (options) {
        this.config = $.extend(this.config, options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;

self._renderHTML();
    };
    this._renderHTML = function () {
        var self = this,
            _config = self.config;
        var html = ‘<span class="des"></span>‘ +
            ‘<p class="star-p hidden"></p>‘;
        $(_config.selector).each(function (index, item) {
            $(item).append(html);
            $(item).wrap($(‘<div class="parentCls" style="position:relative"></div>‘));
            var parentCls = $(item).closest(‘.parentCls‘);
            self._bindEnv(parentCls);
            _config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
        });

};
    this._bindEnv = function (parentCls) {
        var self = this,
            _config = self.config,
            _cache = self.cache;

$(_config.selector + ‘ li‘, parentCls).each(function (index, item) {
            var score = index + 1;
            // 鼠标移上
            $(item).mouseover(function (e) {
                var offsetLeft = $(‘ul‘, parentCls)[0].offsetLeft;
                ismax(index + 1);

//                $(‘p‘, parentCls).hasClass(‘hidden‘) && $(‘p‘, parentCls).removeClass(‘hidden‘);
                $(‘p‘, parentCls).css({‘left‘: index * $(this).width() + 12 + ‘px‘});

//                var html = ‘<em>‘ +
//                    ‘<b>‘ + score + ‘</b>分 ‘ + _cache.aMsg[index].split(‘|‘)[0] + ‘‘ +
//                    ‘</em>‘ + _cache.aMsg[index].split(‘|‘)[1];
//                $(‘p‘, parentCls).html(html);
            });

// 鼠标移出
            $(item).mouseout(function () {
                ismax();
                !$(‘p‘, parentCls).hasClass(‘hidden‘) && $(‘p‘, parentCls).addClass(‘hidden‘);
            });

// 鼠标点击
            $(item).click(function (e) {
                var index = $(_config.selector + ‘ li‘, parentCls).index($(this));
                _cache.iStar = index + 1;

!$(‘p‘, parentCls).hasClass(‘hidden‘) && $(‘p‘, parentCls).addClass(‘hidden‘);
                var html = ‘<strong>‘ +
                    score +
                    ‘分</strong>‘ + _cache.aMsg[index].split(‘|‘)[1];
                $(‘.des‘, parentCls).html(html);
                _config.callback && $.isFunction(_config.callback) && _config.callback({starAmount: _cache.iStar});
                scoreResult=score;
            });

});

function ismax(iArg) {
            _cache.iScore = iArg || _cache.iStar;
            var lis = $(_config.selector + ‘ li‘, parentCls);

for (var i = 0; i < lis.length; i++) {
                lis[i].className = i < _cache.iScore ? "on" : "";
            }
        }
    }

this.getScore = function(){
        return scoreResult;
    }
}

HTML文件

<!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">
    <link rel="stylesheet" type="text/css" href="/Public/Review/Assets/review.css">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript" src="/Public/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/Public/Review/Assets/score.js" ></script>
    <script  type="text/javascript" src="/Public/js/jquery.enplaceholder.js" ></script>
    <script type="text/javascript" src="/Public/Review/Assets/review.js" ></script>

<title>商家评价</title>
</head>
<body>
<div class="body">
    <div class="title">
        <span class="titleText">我要点评</span>
    </div>
    <form id="regForm" class="form" name="regForm" action="/Review/Review/save" method="post" >
 <!--       <div class="navi">
            &lt;!&ndash;<span>商家名称</span>&ndash;&gt;
            <input  type="text" id="seller" name="seller_name" class="input" placeholder="请输入商家名称" />
            <input type="hidden" id="userId" name = "uid" value="{$uid}" />
        </div>-->

<div class="navi">
            <input type="hidden" id="uid" name = "uid" value="{$uid}" />
            <input type="text" id="nickName" name="nickName" class="input" placeholder="请输入用户昵称" />
        </div>
        <div id="nickTip" class="sellerTip"></div>
        <div class="content">
            <div class="textarea">
                <textarea   id="reviewContent" name="reviewContent" class="input" placeholder="请输入评价内容"></textarea>
            </div>

</div>

<div id="contentTip" class="sellerTip"></div>

<div class="star">
            <div>
                <span>总体评分</span>
            </div>
            <div>
                <div class ="list">
                    <ul>
                        <li value="1"><a href="javascript:;">1</a></li>
                        <li value="2"><a href="javascript:;">2</a></li>
                        <li value="3"><a href="javascript:;">3</a></li>
                        <li value="4"><a href="javascript:;">4</a></li>
                        <li value="5"><a href="javascript:;">5</a></li>
                    </ul>
                </div>
                <input type="hidden" id="score" name = "score" value="0" />
            </div>
        </div>

<div class="centerBtn">
            <a href="javascript:saveHandler()">
                <img src="/Public/img/bts/submit.png">
            </a>
        </div>
    </form>
</div>
</body>
</html>

css文件

* {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

ul, li {
    list-style: none;
}

.star {
    position: relative;
    height: 24px;
    margin: 10px auto 0;
}

.title {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    background: #fcfcfc;
    font-size: 20px;
    font-weight: bold;
    color: #5c5c5c;
    background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2);
    padding: 13px;
    text-align: center;
}

.titleText {
    text-align: center;
}

.star span {
    float: left;
    height: 19px;
    line-height: 19px;
    padding-right: 20px;

}

.star ul {
    margin: 0 10px;
}

.star li {
    float: left;
    width: 24px;
    height: 22px;
    text-indent: -9999px;
    background: url(‘/Public/img/star.png‘) no-repeat;
    cursor: pointer;
    padding-left: 5px;
}

.star li.on {
    background-position: 0 -28px;
}

.star p {
    background: url(‘/Public/img/icon.gif‘) no-repeat;
    padding: 10px 10px 0;
    position: absolute;
    top: 20px;
    width: 159px;
    height: 60px;
    z-index: 100;
}

.star p em {
    color: #FF6600;
    display: block;
    font-style: normal;
}

.star strong {
    color: #ff6600;
    padding-left: 50px;

}

.hidden {
    display: none;
}

.des {
    padding-left: 60px;
    height: 24px;
    padding-top: 5px;
}

.sellerTip {
    text-align: left;
    height: 12px;
    font-size: 13px;
    margin-top: -5px;
}

#contentTip {
    margin-top: 20px;
}

.centerBtn {
    padding-top: 22px;
    text-align: center;
}
.form{
    padding:0px 25px 0px 10px;
    margin-top: 10px
}
.form input {
    width: 100%;
    height: 30px;
}

.textarea textarea {
    width: 100%;
    height: 150px;
}

.navi {
    padding-top: 10px;
}

.content {
    padding-top: 10px;
    height: 150px;
}

.input {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    border-radius: 4px;
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
}

textarea:focus, input:focus {
    border-color: rgba(82, 168, 236, 0 sss .8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    outline: 0 none;
    border-radius: 4px;
}

非常使用的js组件

时间： 2024-11-05 12:08:15

非常使用的js组件的相关文章

js组件开发-移动端地区选择控件mobile-select-area

移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空首地址的功能,也添加了更多api参数,首先我们先来看下这次的效果图. 它的github地址请点击https://github.com/tianxiangbing/mobile-select-area 它的demo演示请点击 http://www.lovewebgames.com/jsmodule/m

JS组件系列——封装自己的JS组件

前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件,我们该如何去做呢,别急,我们慢慢来看看过程. 一.扩展已经存在的组件 1.需求背景 很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", ur

JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐

前言:之前分享过很多bootstrap常用组件,包括表格.表单验证.文件上传.复选下拉框.弹出框等.这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着“好东西要与人分享”的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考.组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧. 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“dat

JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

谈谈Ext JS组件之引子

Ext JS组件,对于Ext JS开发人员来说,应当不会陌生,毕竟做开发,都必须与它打交道.对于这样一个大家都熟悉的东西,为什么要用一个专题的形式来写呢?是否有这方面的需要?还不如去写点使用技巧? 确实,组件是可能是大家相当熟悉的东西了,但是,在使用中,大家是否在使用组件过程中或多或少都碰到一些臭虫或其他问题,从而花费不少力气去解决这 些问题呢?是什么原因造成这些问题,又该遵循什么思路去解决这些问题呢?本系列的文章就是来解决这些问题的.总的来说,就是希望大家能从文章中了解组件的 设计思路,并能从

vue.js 组件之间如何实现数据传递？

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文和大家分享的就是vue.js  组件之间传递数据相关内容,一起来看看吧,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册

自定义JS组件——系列1（TableGrid | Toolbar | LinkButton | Pager）

2月份第一次JS组件,写了几个:TableGrid, Toolbar, LinkButton, Pager,现在发出来. TableGrid可以包含Toolbar, Pager. Toolbar可以包含LinkButton.这样就构成了具有工具栏.分页栏的数据表格控件.也就是说,这4个组件可以独立使用,也可以结合使用.通篇只采用一种结构来编写,若能看懂编写规则,往后就可以按照这种模式自定义JS控件了. 1 var fjn=fjn?fjn:{}; 2 (function($,global){ 3

从零开始，搭建博客系统MVC5+EF6搭建框架（4）上,前后台页面布局页面实现，介绍使用的UI框架以及JS组件

一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页面: 技术博客风格: 详情页风格: 详情页留言风格: 1.3后台风格: 表格风格: 博客发布风格: 以上看到的系统页面是目前系统完成的风格,以后页面设计都参考这些页面风格. 二.使用前端web框架以及插件说明 2.1选择前端web框架,我找了很多框架,以前学过自学过bootstrap觉得对于没有前端

JS组件系列——封装自己的JS组件，你也可以！

前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件,我们该如何去做呢,别急,我们慢慢来看看过程. 一.扩展已经存在的组件 1.需求背景 很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", ur

JS组件系列——Bootstrap Select2组件使用小结

前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到select里面随着文字一起显示).前两天做一个菜单图标选择的功能,就要用到这个图文选择的功能.于是乎又是找啊找.终于不负所望,找到了我们伟大的select2组件.今天分享下这个组件的一些用法和特性. 一.组件说明以及API说明 Select2使用示例地址:https://select2.githu