dynamic sitemap | upgrade squeeze to wheezy | php ads banner code | html autocomplete ajax
 


 

jui_theme_switch (v1.0.6)


Share:

jui_theme_switch is a jquery plugin, displays a list of jquery-ui themes and applies selected theme.

Compatible with modern web browsers. Tested with: Google Chrome, Mozilla Firefox, Microsoft Internet Explorer >= 8, (default) Android browser.

PROJECT HOME: http://pontikis.net/labs/jui_theme_switch

DEMO: http://pontikis.net/labs/jui_theme_switch/demo

SUPPORT FORUM: http://pontikis.net/bbs

SOURCE REPOSITORY: https://github.com/pontikis/jui_theme_switch

JQUERY PLUGIN REGISTRY: http://plugins.jquery.com/jui_theme_switch/

NuGet GALLERY: https://nuget.org/packages/jui_theme_switch/

Copyright © Christos Pontikis http://pontikis.net

License MIT

Requires

Tested with jquery >= 1.8.2 and >= jquery-ui 1.8.23

Current Release 1.0.6 (21 Jan 2013) Download here.

CHANGELOG here.

Syntax highlight using http://alexgorbatchev.com/SyntaxHighlighter/

Documentation structure

Available documentation:

Features

  • Displays a list with jquery-ui css and applies selected theme.

Copyright notice

Themes used

Most themes can be used for free. But read carefully license for each theme, before you use it (see above links or json_data/dist/demo-all.json "author" and "license" properties for each theme).

Usage

HTML (head section)

The link tag to juery-ui theme css must have an ID (e.g. "ui-theme")

    <link id="ui-theme" rel="stylesheet" type="text/css" href="/path/to/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="/path/to/jquery.jui_theme_switch.css">

    <script type="text/javascript" src="/path/to/jquery.js"></script>
    <script type="text/javascript" src="/path/to/jquery-ui.js"></script>
    <script type="text/javascript" src="/path/to/jquery.jui_theme_switch.min.js"></script>
    

JS code

The id attribute of the link tag to jquery-ui theme css must be passed as parameter stylesheet_link_id:

    $("#element_id").jui_theme_switch({
        stylesheet_link_id: "ui-theme",  // REQUIRED
        datasource_url: '../json_data/dist/default.json',  // REQUIRED
        project_url: "/path/to", // url relative to web server document root (required only for locally hosted themes)
    });
    

JSON data structure

ATTENTION: "theme_name" must be unique.
    [
        {
            "theme_name": "ui-lightness",
            "theme_url": "http://code.jquery.com/ui/1.9.2/themes/ui-lightness/jquery-ui.css",
            "group": "Official",
            "active": "yes",
            "author": "jQuery Project",
            "license": "http://jquery.org/license"
        },
        {
            "theme_name": "Absolution",
            "hosted_locally": "yes",
            "theme_url": "/lib/jquery-ui-1.9.2.custom/css/3rd-party/Absolution/absolution.css",
            "group": "3rd-party",
            "active": "yes",
            "author": "http://www.michaelvanderheeren.be/archives/382",
            "license": "https://github.com/michaelvanderheeren/Absolution/blob/master/README.md",
            "notes": "You are free to redistribute or change the theme. You can change the theme, but you should keep the references to contributors!"
        },
        ...
    ]
    

Options

    $("#element_id").jui_theme_switch({

        stylesheet_link_id: "the id of the link tag",  // REQUIRED
        datasource_url: 'json data url',  // REQUIRED

        // DEFAULTS
        switcher_label: "Select theme",
        default_theme: "ui-lightness",
        list_size: "1",
        use_groups: "yes",
        show_all: "no", // default is show items having "active": "yes"

        project_url: "", // url relative to web server document root (required only for locally hosted themes)

        containerClass: "switcher_container",
        labelClass: "switcher_label",
        listClass: "switcher_list",

        switcher_label_id_prefix: "lbl_",
        switcher_id_prefix: "switcher_",

        onChangeTheme: function() {

        },
        onDisplay: function() {

        }
    });
    

Methods list

COMMON

getDefaults

    $("#element_id").jui_theme_switch('getDefaults');
    

getOption

    $("#element_id").jui_theme_switch('getOption', 'option_name');
    

getAllOptions

    $("#element_id").jui_theme_switch('getAllOptions');
    

setOption

    $("#element_id").jui_theme_switch('setOption', 'option_name', option_value, reinit);
    

Alternative way to set one or more options

    $("#element_id").jui_theme_switch({option1_name: option1_value, etc});
    

refresh

    $("#element_id").jui_theme_switch('refresh');
    

destroy

    $("#element_id").jui_theme_switch('destroy');
    
SPECIFIC

getTheme

Returns the selected theme as JSON object

    $("#element_id").jui_theme_switch('getTheme');
    

Events

onChangeTheme

    $("#element_id").jui_theme_switch({
        onChangeTheme: function(event, theme) {
            // your code here e.g.
            console.log(theme);
        }
    });
    

onDisplay

    $("#element_id").jui_theme_switch({
        onDisplay: function() {
            // your code here
        }
    });