zoukankan      html  css  js  c++  java
  • 使用Chose来美化Select

    Select 控件在每个浏览器里面表现都不一样,和网站的整体风格非常不协调。

    今天有点时间,就使用Chose把网站前端的Select都美化了一番, ^_^

    Chose 目前在Github里面关注度非常高,项目演示地址是:http://harvesthq.github.com/chosen/

    使用起来也非常简单:

    首先我在Head区引入样式:

    <% this.AddClientCss("/style/chosen.css"); %>

    然后在页面底部引入脚本:

    <% this.AddClientScript("/Js/chosen/chosen.jquery.min.js"); %>

    最后再调用就行了:

    $(function () {
             $("#ClassID").chosen();
    });

    由于我的Option是动态加载的,所以后来改成了这样:

    function fnLoadClass() {
                var url = "http:// myapi address";
                $.ajax({
                    url: url,
                    data: null,
                    dataType: "json",
                    success: function (res) {
                        if (res.success == true) {
                            var html = "<option value=''>请选择分类...</option>";
                            for (var i = 0; i < res.items.length; i++) {
                                html += "<optgroup  label='" + res.items[i].Title + "'>";
                                for (var j = 0; j < res.items[i].Childrens.length; j++) {
                                    var citem = res.items[i].Childrens[j];
                                    html += "<option value='" + citem.InfoID + "'>" + citem.Title + "</option>";
                                }
                                html += "</optgroup>";
                            }
                            $("#ClassID").html(html);
                            $("#ClassID").chosen();
                        }
                        else {
                            alert(res.msg);
                        }
                    },
                    error: function () {
                        alert("发生错误,请刷新重试!");
                    }
                });
            }

    也就是在AJAX返回结果以后,再使用 chose ;最后效果如下:

    QQ20130113-1

    好吧这下心情好多了~~

    作者:Peter Zhan
    博客园blog地址:http://www.cnblogs.com/zhanxp/
    本文版权归作者和博客园所有,欢迎转载,转载请注明出处
  • 相关阅读:
    Javascript进阶(7)---函数参数
    Django连接mssql(SqlServer)
    ORM查询
    Django-Model操作数据库
    Django去操作已经存在的数据库
    如何设置CentOS 7获取动态及静态IP地址
    nginx代理设置
    Django+Linux+Uwsgi+Nginx项目部署文档
    nginx的安装部署
    Django项目在linux系统中虚拟环境部署
  • 原文地址:https://www.cnblogs.com/zhanxp/p/2858310.html
Copyright © 2011-2022 走看看