用下拉框选择CSS的代码如何写

html-css022

用下拉框选择CSS的代码如何写,第1张

将CSS用变量写到页面中去

比如你有3个CSS

css1.css2.css3

<%

CssUrl=Request("CssName")

if CssUrl="" then

CssUrl="默认的css"

else

CssUrl=Request("CssName")

End if

%>

加载的时候加载默认的一个随便那个都可以了

<link id="CssInclude" href="<%=CssUrl%>" rel="stylesheet" type="text/css">

然后再下来菜单中

<form name=frm1 method=post>

<select name="CssName" onchange="js:frm1.submit()">

<option value=<%=css1地址%>selected>css1</option>

<!--默认css样式-->

<option value=<%=css2地址%>>css2</option>

<option value=<%=css3地址%>>css3</option>

</select></form>

你是什么写的页面

asp按照我说做

如果是html

<link id="CssInclude" href="默认css地址" rel="stylesheet" type="text/css">

然后再下来菜单中

<form name=frm1 method=post>

<select name="CssName" onchange="document.all.CssInclude.href=this.valuelocation.location.reload()">

<option value=<%=css1地址%>selected>css1</option>

<!--默认css样式-->

<option value=<%=css2地址%>>css2</option>

<option value=<%=css3地址%>>css3</option>

</select></form>

简单的代码实现,仅供参考:

单选框:

<body>    <input type="radio" name="sex" value="n" />    <input type="radio" name="sex" value="v" /></body>

复选框:

<body>    <input type="checkbox" value="n" />    <input type="checkbox" value="v" /></body>

下拉框:

<body>    <select>        <option>n</option>        <option>n</option>        <option>n</option>    </select></body>

扩展资料:

css注意事项

1、每个标签的属性设置必须是被一对花括号包含。像下面的样子:

标签

{

属性名称:属性值

}

2、花括号中每个属性值赋值后必须用分号隔开。分号就相当于C#和C中的分号,指示一行语句的结束,加上分号就是和网页的解释器说明这个属性的赋值已经结束了,下面开始一个新的属性的赋值。正确的格式是下面的样子:

标签

{

属性名称1:属性值

属性名称2:属性值

属性名称3:属性值

}

3、关于颜色值。我们在前面的文章中,在设置style时,不论是color属性还是background-color属性,赋值时都是指定的颜色名称。这种方式在网页编程中比较不通用。比较常用的做法是赋16进制值,类似于#RRGGBB这种样式,每一位的取值都是从1到F,每两位对应一类颜色值。具体的颜色值可以在网上搜到。

4、关于字体。我们在style中的font-family中设置字体。有时候我们设置的字体可能用户电脑中没有,这时候我们可以在font-family中设置多个可选字体,用逗号分隔,这样如果前面的字体用户电脑中没有,则可以使用后面的字体进行替换。下面是个例子:

<p sytle="font-family:serif,Cursive,Fantasy">

参考资料来源:百度百科:CSS

1、扩展js类库,在项目中建立一个 js文件,命名为:xxx.js  其代码为

if ('function' !== typeof RegExp.escape)   

{  

    RegExp.escape = function (s)   

    {  

        if ('string' !== typeof s)   

        {  

            return s  

        }  

        return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1')  

    }  

}  

  

Ext.ns('Ext.form')  

  

Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox,   

{  

    checkField: 'checked',  

    multi: true,  

    separator: ',',  

    initComponent: function ()   

    {  

        if (!this.tpl)   

        {  

            this.tpl = '<tpl for=".">' + '<div class="x-combo-list-item">'  

                    + '<img src="' + Ext.BLANK_IMAGE_URL + '" '  

                    + 'class="ux-MultiSelect-icon ux-MultiSelect-icon-'  

                    + '{[values.' + this.checkField + '?"checked":"unchecked"'  

                    + ']}">'  

                    + '{[values.' + this.displayField + ']}'  

                    + '</div>'  

                    + '</tpl>'  

        }  

  

        Ext.form.MultiSelect.superclass.initComponent.apply(this, arguments)  

  

        this.on(  

        {  

            scope: this,  

            beforequery: this.onBeforeQuery,  

            blur: this.onRealBlur  

        })  

  

        this.onLoad = this.onLoad.createSequence(function ()   

        {  

            if (this.el)   

            {  

                var v = this.el.dom.value  

                this.el.dom.value = ''  

                this.el.dom.value = v  

            }  

        })  

    },  

    initEvents: function ()   

    {  

        Ext.form.MultiSelect.superclass.initEvents.apply(this, arguments)  

        this.keyNav.tab = false  

    },  

    beforeBlur: function ()   

    {  

    },  

    postBlur: function ()   

    {  

    },  

  

    clearValue: function ()   

    {  

        this.value = ''  

        this.setRawValue(this.value)  

        this.store.clearFilter()  

        this.store.each(function (r)   

        {  

            r.set(this.checkField, false)  

        }, this)  

        if (this.hiddenField)   

        {  

            this.hiddenField.value = ''  

        }  

        this.applyEmptyText()  

    },  

    getCheckedDisplay: function ()   

    {  

        var re = new RegExp(this.separator, "g")  

        return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ')  

    },  

    getCheckedValue: function (field)   

    {  

        field = field || this.valueField  

        var c = []  

        var snapshot = this.store.snapshot || this.store.data  

        snapshot.each(function (r)   

        {  

            if (r.get(this.checkField))   

            {  

                c.push(r.get(field))  

            }  

        }, this)  

  

        return c.join(this.separator)  

    },  

    onBeforeQuery: function (qe)   

    {  

        qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), '')  

    },  

    onRealBlur: function ()   

    {  

        this.list.hide()  

        var rv = this.getRawValue()  

        var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'))  

        var va = []  

        var snapshot = this.store.snapshot || this.store.data  

  

        Ext.each(rva, function (v)   

        {  

            snapshot.each(function (r)   

            {  

                if (v === r.get(this.displayField))   

                {  

                    va.push(r.get(this.valueField))  

                }  

            }, this)  

        }, this)  

        this.setValue(va.join(this.separator))  

        this.store.clearFilter()  

    },  

    onSelect: function (record, index)   

    {  

        if (this.fireEvent('beforeselect', this, record, index) !== false)   

        {  

            record.set(this.checkField, !record.get(this.checkField))  

  

            if (this.store.isFiltered())   

            {  

                this.doQuery(this.allQuery)  

            }  

  

            if (this.multi)   

            {  

                if (record.get("key") == "---" && record.get(this.checkField))   

                {  

                    this.setValue("---")  

                }  

                else   

                {  

                    this.setValue(this.getCheckedValue())  

                }  

            }  

            else   

            {  

                this.clearValue()  

                this.value = record.get(this.valueField)  

                this.setRawValue(record.get(this.displayField))  

                this.list.hide()  

            }  

  

            this.fireEvent('select', this, record, index)  

        }  

    },  

    setValue: function (v)   

    {  

        if (v)   

        {  

            v = '' + v  

            if (this.valueField)   

            {  

                this.store.clearFilter()  

                this.store.each(function (r)   

                {  

                    var checked = !(!v.match('(^|' + this.separator + ')'  

                                + RegExp.escape(r.get(this.valueField))  

                                + '(' + this.separator + '|$)'))  

                    r.set(this.checkField, checked)  

                }, this)  

                this.value = this.getCheckedValue()  

                this.setRawValue(this.getCheckedDisplay())  

                if (this.hiddenField)   

                {  

                    this.hiddenField.value = this.value  

                }  

            }  

            else   

            {  

                this.value = v  

                this.setRawValue(v)  

                if (this.hiddenField)   

                {  

                    this.hiddenField.value = v  

                }  

            }  

            if (this.el)   

            {  

                this.el.removeClass(this.emptyClass)  

            }  

        }  

        else   

        {  

            this.clearValue()  

        }  

    },  

    selectAll: function ()   

    {  

        this.store.each(function (record)   

        {  

            record.set(this.checkField, true)  

        }, this)  

        this.doQuery(this.allQuery)  

        this.setValue(this.getCheckedValue())  

    },  

    deselectAll: function ()   

    {  

        this.clearValue()  

    }  

})  

Ext.reg('multiSelect', Ext.form.MultiSelect)

2、在ext-all.css文件最后,加入css样式

.ux-MultiSelect-icon { width:16px height:16px float:left background-position: -1px -1px ! important background-repeat:no-repeat ! important }  

.ux-MultiSelect-icon-checked { background: transparent url(../images/default/menu/checked.gif) }  

.ux-MultiSelect-icon-unchecked { background: transparent url(../images/default/menu/unchecked.gif) }

3、使用

    var DepartUserStore=new Ext.data.Store(  

     {  

            proxy: new Ext.data.HttpProxy(  

            {  

                    url:'/Web/Manage/DeskTop/JSON/ScheduleManager/GetSimpleDepartUserInfo.aspx'  

            }),  

            //读取Json  

            reader: new Ext.data.JsonReader(  

            { totalProperty: "totalCount", root: "root" },   

            [  

                    {name:'UserId',type:'int'},  

                    {name:'UserName',type:'string'}  

            ])  

    })  

      

    var DepartUserCbox = new Ext.form.MultiSelect(  

    {  

            fieldLabel: '    姓名',  

            labelStyle: 'width:80px',  

            width: 150,  

            editable: false,  

            id: 'DepartUserDS',  

            hiddenName:'DepartUserIdDS',  

            store: DepartUserStore,  

            emptyText: '--请选择--',  

            allowBlank: false,   

            blankText: '请选择',   

            mode:'remote',  

            displayField: 'UserName',  

            valueField: 'UserId',  

            triggerAction: 'all',  

            selectOnFocus: true,  

            listWidth: 200  

    })  

      

    DepartUserStore.on('load', function ()   

    {  

            DepartUserCbox.selectAll() //全选  

    }) 

    

    DepartUserStore.load()