神灯加速官网

Create up to 26 theme "swatches" lettered from A-Z, each with a unique color scheme, then mix and match for unlimited possibilities.

To upgrade a theme to 1.4.5: Click the Import button, paste in your uncompressed theme, then tweak and download the upgraded version.

神灯加速官网

Copy and paste the contents of any uncompressed jQuery Mobile theme file to load it in for editing.

神灯加速官网

This will generate a Zip file that contains both a compressed (for production) and uncompressed (for editing) version of the theme.

To use your theme, add it together with the icon CSS file to the head of your page before the jquery.mobile.structure file, like this:

				
<!DOCTYPE html>
<html>
<head>

  <title>jQuery Mobile page</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

</head>

Tip: To edit your theme later, use the import feature to paste in the uncompressed theme file

神灯加速官网

Use this link to share a copy of your theme. People can download or edit a copy of the theme, but your version won’t be changed.

Loading...

Important note: We can only store this theme URL on the server for 30 days, then it will be deleted. Download a theme to keep a copy safe that you can import later.

神灯加速官网

The ThemeRoller Mobile tool makes it easy to create custom-designed themes for your mobile site or app. Just pick colors, then share your theme URL, or download the theme and drop it into your site.

神灯加速官网

A jQuery Mobile theme contains a both global settings for things like rounded corner radius and active (on) state, and up to to 26 "swatches" lettered from A-Z, each with a unique color scheme that can be mixed and matched for unlimited possibilities. Each swatch sets the colors, textures and font settings for the primary elements: toolbar, content block and button. Buttons have 3 interaction states: normal, hover, pressed.

神灯加速官网

The ThemeRoller interface has 3 major zones: the left column contains the inspector panel, along the top is the QuickSwatch/Kuler bar, and below this is the preview window.

Use the inspector pane to set global theme settings on the first tab and tweak the individual style options for each swatch. Above the tabs, there are links to download, share, or import a theme.

In the QuickSwatch bar, you can turn the inspector feature on to automatically expand the relevant inspector section when you click on an element in the preview pane. Drag and drop a color from the QuickSwatch panel onto an element in the preview pane and the tool with automatically calculate text color and shadow, borders, gradients and even button states. The sliders make it easy to adjust the lightness and saturation of the colors. Click the Adobe Kuler Swatches to load pre-made color palettes from Adobe's popular color palette sharing site.

The preview pane shows a sample of common jQuery Mobile widgets that live update each time you make a change to the theme so you can quickly test and tweak the theme.

神灯加速官网

Once you have created your final theme, click the Download Theme link at the top of the inspector panel. In the download dialog, give your theme a name and press the Download Zip button. This will generate a zip file that contains both the compressed (production-ready) and uncompressed (editable) theme files and a simple test page (index.html) to show that everything worked (whew) and instructions on how to add the theme to your site. It's pretty simple: link your custom theme in the head of the page followed by the jQuery Mobile structure theme and you're ready to go.

好的梯子软件

The import feature is primarily designed to make it easy to either edit a theme you've downloaded or to generate an updated version of a theme for a new release of the library. When you download a theme, be sure keep the uncompressed version of the theme CSS file because this is used in the import process. To import a theme, click the Import link and paste the entire contents of the uncompressed theme file (select all > copy > paste) into the text input in the dialog, and the system will parse the theme into an editable format for sharing and downloading.

Sharing themes ^ Top

To generate a theme URL that can be shared with others, click the Share link and copy the URL. Post it on Twitter and become a famous theme artist. Anyone that opens the shared URL can edit or download the theme, but this activity won't affect your original theme. Note that due to the high volume of traffic, we can only store your theme on the server for 30 days so shared links have an expiration date. Be sure to download a copy of your theme for safekeeping.

Supported browsers ^ Top

This is a beta version of a developer tool so we're committing to supporting the 好的梯子软件 versions of popular desktop browsers: Chrome, Firefox, Safari. Even though the tool works in IE9, it doesn't support CSS gradients so we don't recommend recommend using this browser to create themes. If you're running into issues, maybe try a different browser or log an issue in the tracker.

  

jQuery Mobile
Version 1.4.5
    Switch to version:
  • 1.3.2
  • 1.2.1
  • 1.1.2
  • 好的梯子软件
Undo undo
Redo redo
Inspector off
好的梯子软件
Download theme zip file
Import
Import or upgrade
Share
Share theme link
Help
Help center
好的梯子软件
1.4.5
手机ios安卓和电脑上好用的VPN梯子推荐，毒药机场筛选出的 ...:2021-6-2 · 本文介绍的梯子，都是楼主在过去两三年中精挑细选筛选出来的，主要是对比稳定性，上手难度，安全性，价格，售后服务等多方面维度后做的评测 ...
/*! * jQuery Mobile 1.4.5 * Git HEAD hash: 68e55e78b292634d3991c795f06f5e37a512decc <> Date: Fri Oct 31 2014 17:33:30 UTC * http://jquerymobile.com * * Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors * Released under the MIT license. * http://jquery.org/license * */ /* Globals */ /* Font -----------------------------------------------------------------------------------------------------------*/ html { font-size: 100%; } body, input, select, textarea, button, .ui-btn { font-size: 1em; line-height: 1.3; font-family: sans-serif /*{global-font-family}*/; } legend, .ui-input-text input, .ui-input-search input { color: inherit; text-shadow: inherit; } /* Form labels (overrides font-weight bold in bars, and mini font-size) */ .ui-mobile label, div.ui-controlgroup-label { font-weight: normal; font-size: 16px; } /* Separators -----------------------------------------------------------------------------------------------------------*/ /* Field contain separator (< 28em) */ .ui-field-contain { border-bottom-color: #828282; border-bottom-color: rgba(0,0,0,.15); border-bottom-width: 1px; border-bottom-style: solid; } /* Table opt-in classes: strokes between each row, and alternating row stripes */ /* Classes table-stroke and table-stripe are deprecated in 1.4. */ .table-stroke thead th, .table-stripe thead th, .table-stripe tbody tr:last-child { border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */ border-bottom: 1px solid rgba(0,0,0,.1); } .table-stroke tbody th, .table-stroke tbody td { border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback */ border-bottom: 1px solid rgba(0,0,0,.05); } .table-stripe.table-stroke tbody tr:last-child th, .table-stripe.table-stroke tbody tr:last-child td { border-bottom: 0; } .table-stripe tbody tr:nth-child(odd) td, .table-stripe tbody tr:nth-child(odd) th { background-color: #eeeeee; /* non-RGBA fallback */ background-color: rgba(0,0,0,.04); } /* Buttons -----------------------------------------------------------------------------------------------------------*/ .ui-btn, label.ui-btn { font-weight: bold; border-width: 1px; border-style: solid; } .ui-btn { text-decoration: none !important; } .ui-btn-active { cursor: pointer; } /* Corner rounding -----------------------------------------------------------------------------------------------------------*/ /* Class ui-btn-corner-all deprecated in 1.4 */ .ui-corner-all { -webkit-border-radius: .3125em /*{global-radii-blocks}*/; border-radius: .3125em /*{global-radii-blocks}*/; } /* Buttons */ .ui-btn-corner-all, .ui-btn.ui-corner-all, /* Slider track */ .ui-slider-track.ui-corner-all, /* Flipswitch */ .ui-flipswitch.ui-corner-all, /* Count bubble */ .ui-li-count { -webkit-border-radius: .3125em /*{global-radii-buttons}*/; border-radius: .3125em /*{global-radii-buttons}*/; } /* Icon-only buttons */ .ui-btn-icon-notext.ui-btn-corner-all, .ui-btn-icon-notext.ui-corner-all { -webkit-border-radius: 1em; border-radius: 1em; } /* Radius clip workaround for cleaning up corner trapping */ .ui-btn-corner-all, .ui-corner-all { -webkit-background-clip: padding; background-clip: padding-box; } /* Popup arrow */ .ui-popup.ui-corner-all > .ui-popup-arrow-guide { left: .6em /*{global-radii-blocks}*/; right: .6em /*{global-radii-blocks}*/; top: .6em /*{global-radii-blocks}*/; bottom: .6em /*{global-radii-blocks}*/; } /* Shadow -----------------------------------------------------------------------------------------------------------*/ .ui-shadow { -webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/; -moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/; box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/; } .ui-shadow-inset { -webkit-box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/; -moz-box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/; box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.2) /*{global-box-shadow-color}*/; } .ui-overlay-shadow { -webkit-box-shadow: 0 0 12px rgba(0,0,0,.6); -moz-box-shadow: 0 0 12px rgba(0,0,0,.6); box-shadow: 0 0 12px rgba(0,0,0,.6); } /* Icons -----------------------------------------------------------------------------------------------------------*/ .ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after { background-color: #666666 /*{global-icon-color}*/; background-color: rgba(0,0,0,.3) /*{global-icon-disc}*/; background-position: center center; background-repeat: no-repeat; -webkit-border-radius: 1em; border-radius: 1em; } /* Alt icons */ .ui-alt-icon.ui-btn:after, .ui-alt-icon .ui-btn:after, html .ui-alt-icon.ui-checkbox-off:after, html .ui-alt-icon.ui-radio-off:after, html .ui-alt-icon .ui-checkbox-off:after, html .ui-alt-icon .ui-radio-off:after { background-color: #666666 /*{global-icon-color}*/; background-color: rgba(0,0,0,.15) /*{global-icon-disc}*/; } /* No disc */ .ui-nodisc-icon.ui-btn:after, .ui-nodisc-icon .ui-btn:after { background-color: transparent; } /* Icon shadow */ .ui-shadow-icon.ui-btn:after, .ui-shadow-icon .ui-btn:after { -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.3) /*{global-icon-shadow}*/; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.3) /*{global-icon-shadow}*/; box-shadow: 0 1px 0 rgba(255,255,255,.3) /*{global-icon-shadow}*/; } /* Checkbox and radio */ .ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after, .ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after { display: block; width: 18px; height: 18px; margin: -9px 2px 0 2px; } .ui-checkbox-off:after, .ui-btn.ui-radio-off:after { filter: Alpha(Opacity=30); opacity: .3; } .ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after { -webkit-border-radius: .1875em; border-radius: .1875em; } .ui-btn.ui-checkbox-off:after { background-color: #666; background-color: rgba(0,0,0,.3); } .ui-radio .ui-btn.ui-radio-on:after { background-image: none; background-color: #fff; width: 8px; height: 8px; border-width: 5px; border-style: solid; } .ui-alt-icon.ui-btn.ui-radio-on:after, .ui-alt-icon .ui-btn.ui-radio-on:after { background-color: #000; } /* Loader */ .ui-icon-loading { background: url("images/ajax-loader.gif"); background-size: 2.875em 2.875em; } /* Swatches */ /* A -----------------------------------------------------------------------------------------------------------*/ /* Bar: Toolbars, dividers, slider track */ .ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit { background-color: #e9e9e9 /*{a-bar-background-color}*/; border-color: #dddddd /*{a-bar-border}*/; color: #333333 /*{a-bar-color}*/; text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #eeeeee /*{a-bar-shadow-color}*/; font-weight: bold; } .ui-bar-a { border-width: 1px; border-style: solid; } /* Page and overlay */ .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { background-color: #f9f9f9 /*{a-page-background-color}*/; border-color: #bbbbbb /*{a-page-border}*/; color: #333333 /*{a-page-color}*/; text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/; } /* Body: Read-only lists, text inputs, collapsible content */ .ui-body-a, .ui-page-theme-a .ui-body-inherit, html .ui-bar-a .ui-body-inherit, html .ui-body-a .ui-body-inherit, html body .ui-group-theme-a .ui-body-inherit, html .ui-panel-page-container-a { background-color: #ffffff /*{a-body-background-color}*/; border-color: #dddddd /*{a-body-border}*/; color: #333333 /*{a-body-color}*/; text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #f3f3f3 /*{a-body-shadow-color}*/; } .ui-body-a { border-width: 1px; border-style: solid; } /* Links */ .ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a { color: #3388cc /*{a-link-color}*/; font-weight: bold; } .ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a a:visited { color: #3388cc /*{a-link-visited}*/; } .ui-page-theme-a a:hover, html .ui-bar-a a:hover, html .ui-body-a a:hover, html body .ui-group-theme-a a:hover { color: #005599 /*{a-link-hover}*/; } .ui-page-theme-a a:active, html .ui-bar-a a:active, html .ui-body-a a:active, html body .ui-group-theme-a a:active { color: #005599 /*{a-link-active}*/; } /* Button up */ .ui-page-theme-a .ui-btn, html .ui-bar-a .ui-btn, html .ui-body-a .ui-btn, html body .ui-group-theme-a .ui-btn, html head + body .ui-btn.ui-btn-a, /* Button visited */ .ui-page-theme-a .ui-btn:visited, html .ui-bar-a .ui-btn:visited, html .ui-body-a .ui-btn:visited, html body .ui-group-theme-a .ui-btn:visited, html head + body .ui-btn.ui-btn-a:visited { background-color: #f6f6f6 /*{a-bup-background-color}*/; border-color: #dddddd /*{a-bup-border}*/; color: #333333 /*{a-bup-color}*/; text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/; } /* Button hover */ .ui-page-theme-a .ui-btn:hover, html .ui-bar-a .ui-btn:hover, html .ui-body-a .ui-btn:hover, html body .ui-group-theme-a .ui-btn:hover, html head + body .ui-btn.ui-btn-a:hover { background-color: #ededed /*{a-bhover-background-color}*/; border-color: #dddddd /*{a-bhover-border}*/; color: #333333 /*{a-bhover-color}*/; text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #f3f3f3 /*{a-bhover-shadow-color}*/; } /* Button down */ .ui-page-theme-a .ui-btn:active, html .ui-bar-a .ui-btn:active, html .ui-body-a .ui-btn:active, html body .ui-group-theme-a .ui-btn:active, html head + body .ui-btn.ui-btn-a:active { background-color: #e8e8e8 /*{a-bdown-background-color}*/; border-color: #dddddd /*{a-bdown-border}*/; color: #333333 /*{a-bdown-color}*/; text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 0 /*{a-bdown-shadow-radius}*/ #f3f3f3 /*{a-bdown-shadow-color}*/; } /* Active button */ .ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-a.ui-btn-active, /* Active checkbox icon */ .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, /* Active flipswitch background */ .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, /* Active slider track */ .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active { background-color: #3388cc /*{a-active-background-color}*/; border-color: #3388cc /*{a-active-border}*/; color: #ffffff /*{a-active-color}*/; text-shadow: 0 /*{a-active-shadow-x}*/ 1px /*{a-active-shadow-y}*/ 0 /*{a-active-shadow-radius}*/ #005599 /*{a-active-shadow-color}*/; } /* Active radio button icon */ .ui-page-theme-a .ui-radio-on:after, html .ui-bar-a .ui-radio-on:after, html .ui-body-a .ui-radio-on:after, html body .ui-group-theme-a .ui-radio-on:after, .ui-btn.ui-radio-on.ui-btn-a:after { border-color: #3388cc /*{a-active-background-color}*/; } /* Focus */ .ui-page-theme-a .ui-btn:focus, html .ui-bar-a .ui-btn:focus, html .ui-body-a .ui-btn:focus, html body .ui-group-theme-a .ui-btn:focus, html head + body .ui-btn.ui-btn-a:focus, /* Focus buttons and text inputs with div wrap */ .ui-page-theme-a .ui-focus, html .ui-bar-a .ui-focus, html .ui-body-a .ui-focus, html body .ui-group-theme-a .ui-focus, html head + body .ui-btn-a.ui-focus, html head + body .ui-body-a.ui-focus { -webkit-box-shadow: 0 0 12px #3388cc /*{a-active-background-color}*/; -moz-box-shadow: 0 0 12px #3388cc /*{a-active-background-color}*/; box-shadow: 0 0 12px #3388cc /*{a-active-background-color}*/; } /* Structure */ /* Disabled -----------------------------------------------------------------------------------------------------------*/ /* Class ui-disabled deprecated in 1.4. :disabled not supported by IE8 so we use [disabled] */ .ui-disabled, .ui-state-disabled, button[disabled], .ui-select .ui-btn.ui-state-disabled { filter: Alpha(Opacity=30); opacity: .3; cursor: default !important; pointer-events: none; } /* Focus state outline -----------------------------------------------------------------------------------------------------------*/ .ui-btn:focus, .ui-btn.ui-focus { outline: 0; } /* Unset box-shadow in browsers that don't do it right */ .ui-noboxshadow .ui-shadow, .ui-noboxshadow .ui-shadow-inset, .ui-noboxshadow .ui-overlay-shadow, .ui-noboxshadow .ui-shadow-icon.ui-btn:after, .ui-noboxshadow .ui-shadow-icon .ui-btn:after, .ui-noboxshadow .ui-focus, .ui-noboxshadow .ui-btn:focus, .ui-noboxshadow input:focus, .ui-noboxshadow .ui-panel { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .ui-noboxshadow .ui-btn:focus, .ui-noboxshadow .ui-focus { outline-width: 1px; outline-style: auto; }