├── af-accordion ├── README.md ├── af.accordion.css ├── af.accordion.js └── index.html ├── af-alphatable ├── README.md ├── license.txt ├── index.html ├── af.alphatable.js └── af.scroller.js ├── af-drawer └── README.md ├── af-tabcontrol ├── README.md ├── af.tabs.css ├── index.html └── af.tabcontrol.js ├── i18n ├── bundle │ ├── Messages.properties │ ├── Messages_pt.properties │ └── Messages_pt_PT.properties ├── readme.md ├── license.txt ├── test.html └── i18n.js ├── filterlist ├── af.filterlist.css ├── index.html ├── license.txt ├── README.md └── af.filterlist.js ├── subpanels ├── subpanels.css ├── license.txt ├── README.md └── subpanels.js ├── maps ├── index.html ├── license.txt ├── README.md └── jq.maps.js ├── pathmenu ├── index.html ├── README.md ├── jq.pathmenu.js ├── jq.pathmenu.css └── jqui.demo.html ├── noticewindow ├── jq.noticeWindow.css ├── index.html ├── license.txt ├── README.md └── jq.noticeWindow.js ├── README.md ├── range ├── license.txt ├── jq.range.css ├── README.md ├── index.html └── jq.range.js └── af-carousel ├── README.md ├── index.html └── af.carousel.js /af-accordion/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /af-alphatable/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /af-drawer/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /af-tabcontrol/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /i18n/bundle/Messages.properties: -------------------------------------------------------------------------------- 1 | msg_hello = Hello 2 | msg_world = World 3 | msg_complex = Good morning {0}! -------------------------------------------------------------------------------- /i18n/bundle/Messages_pt.properties: -------------------------------------------------------------------------------- 1 | # We only provide a translation for the 'msg_hello' key 2 | msg_hello = Bom dia -------------------------------------------------------------------------------- /i18n/bundle/Messages_pt_PT.properties: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intel/appframeworkPlugins/master/i18n/bundle/Messages_pt_PT.properties -------------------------------------------------------------------------------- /filterlist/af.filterlist.css: -------------------------------------------------------------------------------- 1 | .filterInput{ border:1px solid black;border-radius:5px; } .filterList { border:1px solid red; } .filterClose{ font-weight:bold; font-size:12px; } .filterPreviousPage{ } .filterNextPage{ background:green !important; } .filterTitle{ font-weight:bold; } .filterPager{ border:1px solid #333; height:23px; } -------------------------------------------------------------------------------- /af-tabcontrol/af.tabs.css: -------------------------------------------------------------------------------- 1 | 2 | .tabs,.tabs-content { 3 | list-style-type: none; 4 | padding:0px; 5 | margin:0px; 6 | } 7 | .tabs { 8 | display:block; 9 | border:1px solid #ccc; 10 | border-radius:4px; 11 | } 12 | .tabs li { 13 | display:table-cell; 14 | width:2%; 15 | } 16 | .tabs li a { 17 | display:block; 18 | border:0px; 19 | border-radius:0px; 20 | } 21 | .tabs li:not(:last-of-type) a { 22 | border-right:1px solid #ccc; 23 | } 24 | 25 | 26 | .tabs-content { 27 | margin-top:10px; 28 | } 29 | 30 | .tabs-content li { 31 | border:1px solid #ccc; 32 | width:100%; 33 | min-height:80px; 34 | display:none; 35 | } 36 | 37 | .tabs-content li.active { 38 | display:block; 39 | } -------------------------------------------------------------------------------- /i18n/readme.md: -------------------------------------------------------------------------------- 1 | # i18n plugin using jqMobi 2 | 3 | ###Author: Ian Maffett (appMobi) 4 | 5 | This plugin helps with internationalization in your app using jqMobi 6 | 7 | This is adapted from http://code.google.com/p/jquery-i18n-properties/ 8 | 9 | 10 | # Bugs 11 | 12 | Please use github to report any bugs found. Please provide the following 13 | 14 | 1. Any error messages from the console 15 | 16 | 2. Line numbers of offending code 17 | 18 | 3. Test cases 19 | 20 | 4. Description of the Error 21 | 22 | 5. Expected result 23 | 24 | 6. Browser/Device you are testing on 25 | 26 | 27 | # License 28 | 29 | This plugin is licensed under the terms of the MIT License, see the included license.txt file. -------------------------------------------------------------------------------- /subpanels/subpanels.css: -------------------------------------------------------------------------------- 1 | .insetPanel{ 2 | -webkit-backface-visibility: hidden; 3 | z-index:1; 4 | width:100%; 5 | display:none; 6 | position:absolute; top:0px; left:0px; 7 | height:100%; 8 | overflow:auto; 9 | background:inherit; 10 | -webkit-perspective: 1000; 11 | -webkit-transition-duration:300ms; 12 | -webkit-overflow-scrolling:touch; 13 | } 14 | 15 | .insetPanel > * { 16 | -webkit-backface-visibility: hidden; 17 | -webkit-perspective: 1000; 18 | } 19 | 20 | .subpanelNav a { 21 | display:inline-block; 22 | text-decoration:none; 23 | color:white; 24 | } 25 | 26 | .jqmScrollbar{ 27 | z-index:200; 28 | } -------------------------------------------------------------------------------- /maps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | Refresh map size 17 |
18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /pathmenu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jq.pathmenu.com 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /filterlist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 |
13 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /noticewindow/jq.noticeWindow.css: -------------------------------------------------------------------------------- 1 | .noticeWindow { 2 | width:270px; 3 | padding:5px; 4 | margin-left:auto; 5 | margin-right:auto; 6 | height:280px; 7 | background:blue; 8 | border:5px; 9 | border-radius:5px; 10 | top:60px; 11 | position:relative; 12 | z-index:9999; 13 | } 14 | .noticeTitle{ 15 | color:white; 16 | font-size:1.7em; 17 | padding-bottom:5px; 18 | } 19 | .noticeContent{ 20 | background:white; 21 | color:black; 22 | height:233px; 23 | padding:5px; 24 | font-size:.8em; 25 | } 26 | .noticeArrow{ 27 | width: 0; 28 | height: 0; 29 | border-left: 20px solid transparent; 30 | border-right: 20px solid transparent; 31 | border-bottom: 20px solid blue; 32 | position:absolute; 33 | top:-20px; 34 | left:5px; 35 | } 36 | .noticeArrow.down{ 37 | border-left: 20px solid transparent; 38 | border-right: 20px solid transparent; 39 | border-top: 20px solid blue; 40 | border-bottom:none; 41 | position:absolute; 42 | top:290px; 43 | } -------------------------------------------------------------------------------- /pathmenu/README.md: -------------------------------------------------------------------------------- 1 | # Path style menu for jqMobi apps 2 | 3 | ###Author: Ian Maffett (appMobi) 4 | 5 | This plugin creates a path style menu system with animations 6 | 7 | # Using the path menu plugin 8 | 9 | 1) Call $(container).pathmenu({opts}) 10 | 11 | 12 | 13 | ```js 14 | $(document.body).pathmenu({ 15 | btnclass:'pathbtn', //CSS class of the menu items that pop out 16 | menubtnclass:'pathmenubtn', //CSS class of the bottom trigger menu 17 | button:'{!}' //Text to display in the menu button 18 | }); 19 | 20 | ``` 21 | 22 | # Bugs 23 | 24 | Please use github to report any bugs found. Please provide the following 25 | 26 | 1. Any error messages from the console 27 | 28 | 2. Line numbers of offending code 29 | 30 | 3. Test cases 31 | 32 | 4. Description of the Error 33 | 34 | 5. Expected result 35 | 36 | 6. Browser/Device you are testing on 37 | 38 | 39 | # License 40 | 41 | All plugins are licensed under the terms of the MIT License, see the included license.txt file. -------------------------------------------------------------------------------- /noticewindow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 26 | 27 | 28 | 29 | Middle Arrow | Bottom Arrow 30 | 31 | 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | App Framework 2 | ========= 3 | 4 | This is the officialy community repository for App Framework plugins. Anyone can fork this repository and create a pull request to have their plugin included. Plugins submitted are bound to the license and terms by the author. 5 | 6 | 7 | How to Submit 8 | ============= 9 | 10 | Submitting your plugin is simple. 11 | 12 | 1) Fork the repository 13 | 14 | 2) Add a new folder for your plugin 15 | 16 | 3) Submit a pull request 17 | 18 | 4) Wait for approval 19 | 20 | 21 | Folder Structure 22 | ============ 23 | 24 | The folder structure should look like 25 | 26 | 27 | --- plugin name 28 | --- plugin.js 29 | --- README.md 30 | --- license.txt (we recommend the MIT/X11 license) 31 | --- tests(folder) 32 | --- tests.js 33 | 34 | 35 | You must include a README.md file and a license.txt. Tests are optional. 36 | 37 | README.md 38 | ========== 39 | 40 | Your README.md must cover the following 41 | 42 | 1) Title 43 | 2) Author and link to your site/plugin 44 | 3) Description 45 | 4) API Function list 46 | 5) Example Usage 47 | 6) License reference 48 | -------------------------------------------------------------------------------- /i18n/license.txt: -------------------------------------------------------------------------------- 1 | MIT X11 License 2 | Copyright (C) <2011> by 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. -------------------------------------------------------------------------------- /maps/license.txt: -------------------------------------------------------------------------------- 1 | MIT X11 License 2 | Copyright (C) <2011> by 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. -------------------------------------------------------------------------------- /range/license.txt: -------------------------------------------------------------------------------- 1 | MIT X11 License 2 | Copyright (C) <2011> by 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. -------------------------------------------------------------------------------- /filterlist/license.txt: -------------------------------------------------------------------------------- 1 | MIT X11 License 2 | Copyright (C) <2011> by 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. -------------------------------------------------------------------------------- /noticewindow/license.txt: -------------------------------------------------------------------------------- 1 | MIT X11 License 2 | Copyright (C) <2011> by 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. -------------------------------------------------------------------------------- /subpanels/license.txt: -------------------------------------------------------------------------------- 1 | MIT X11 License 2 | Copyright (C) <2011> by 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. -------------------------------------------------------------------------------- /af-alphatable/license.txt: -------------------------------------------------------------------------------- 1 | MIT X11 License 2 | Copyright (C) <2011> by 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. -------------------------------------------------------------------------------- /af-accordion/af.accordion.css: -------------------------------------------------------------------------------- 1 | .accordion li>div { 2 | opacity:0; 3 | 4 | overflow:auto; 5 | height:0px; 6 | -webkit-transition: opacity 0.30s linear; 7 | transition: opacity 0.30s linear; 8 | transition-delay: 100ms; 9 | -webkit-transition-delay: 100ms; 10 | } 11 | 12 | .accordion { 13 | list-style-type: none; 14 | margin-left:10px; 15 | margin-right:10px; 16 | padding:0px; 17 | } 18 | 19 | .accordion li:target>div{ 20 | height:auto; 21 | opacity:1; 22 | } 23 | .accordion li.active>div{ 24 | opacity:1; 25 | } 26 | .accordion li { 27 | display:block; 28 | width:100%; 29 | } 30 | .accordion li a { 31 | text-decoration: none; 32 | position: relative; 33 | display: block; 34 | padding: 8px 12px; 35 | margin: 0; 36 | font-weight: bold; 37 | line-height: 18px; 38 | color: #333; 39 | text-align: left; 40 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 41 | vertical-align: top; 42 | cursor: pointer; 43 | background-color: #f8f8f8; 44 | 45 | border: 1px solid; 46 | border-color: rgba(0, 0, 0, .3); 47 | border-radius: 3px; 48 | box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05); 49 | text-decoration: none; 50 | } 51 | 52 | -------------------------------------------------------------------------------- /range/jq.range.css: -------------------------------------------------------------------------------- 1 | .slider { 2 | position: relative; 3 | width: 100%; 4 | height: 50px; 5 | } 6 | 7 | .range,.rangefill { 8 | position: absolute; 9 | top: 10px; 10 | left: 0; 11 | right: 0; 12 | height: 3px; 13 | background-color: #ccc; 14 | -webkit-border-radius: 10px; 15 | border-radius: 10px; 16 | z-index: -1; 17 | border-radius:5px; 18 | border:1px solid #666; 19 | } 20 | 21 | .rangefill{ 22 | width:0px; 23 | background-color:#5393C5; 24 | } 25 | 26 | .rangeBubble{ 27 | position:absolute;top:-25px; 28 | width:20px; 29 | height:20px; 30 | border-radius:15px; 31 | text-align:center; 32 | margin-auto; 33 | border:1px solid #5393C5; 34 | background:#fff; 35 | font-size:.5em; 36 | line-height:20px; 37 | } 38 | 39 | .pointer { 40 | position: absolute; 41 | margin: 0; 42 | padding: 0; 43 | height: 20px; 44 | width: 20px; 45 | background-color: black; 46 | -webkit-border-radius: 10px; 47 | border-radius: 10px; 48 | background: -webkit-gradient(linear, left top, left bottom, from(rgb(253,253,253)), to(rgb(190,190,190))); 49 | background: -webkit-linear-gradient(top, rgb(253,253,253), rgb(190,190,190)); 50 | border: 1px solid rgb(160,160,160); 51 | cursor: pointer; 52 | } -------------------------------------------------------------------------------- /noticewindow/README.md: -------------------------------------------------------------------------------- 1 | # Notice window plugin for jqUi 2 | 3 | ###Author: Ian Maffett (appMobi) 4 | 5 | This plugin gives "facebook" style notice windows (clicking on messages, notices, etc). 6 | 7 | # Using the notice window plugin 8 | 9 | 1) Call $(container).noticeWindow({opts}) 10 | 11 | 12 | 13 | ```js 14 | $(document.body).noticeWindow({ 15 | title:'Notifications', //string 16 | content:'This is a sample', //string of thml 17 | arrowLeft:'middle' //left,middle,right or pixels from the left 18 | }); 19 | 20 | ``` 21 | 22 | There are different configuration options you can pass in. Please note, if jq.scroller.js is included, we will add a scroller to the content area 23 | 24 | ```js 25 | containerCss:'' //CSS for the container class 26 | title:'' //Title at the top 27 | content:'' //Html content to show 28 | arrowLeft:"5px"// Position from the left for the arrow. Can also be left/middle/right 29 | arrowDirection:"up" //Is the arrow at the top or bottom 30 | ``` 31 | 32 | 33 | # Bugs 34 | 35 | Please use github to report any bugs found. Please provide the following 36 | 37 | 1. Any error messages from the console 38 | 39 | 2. Line numbers of offending code 40 | 41 | 3. Test cases 42 | 43 | 4. Description of the Error 44 | 45 | 5. Expected result 46 | 47 | 6. Browser/Device you are testing on 48 | 49 | 50 | # License 51 | 52 | All plugins are licensed under the terms of the MIT License, see the included license.txt file. -------------------------------------------------------------------------------- /af-tabcontrol/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 23 | 24 | 25 |
26 | 31 |
    32 |
  • 33 | This is tab 1 34 |
  • 35 |
  • 36 | this is tab 2

    37 | this is tab 2

    38 | this is tab 2

    39 | this is tab 2

    40 | this is tab 2

    41 | this is tab 2

    42 | this is tab 2

    43 | this is tab 2

    44 |
  • 45 |
  • 46 | this is tab 3 47 |
  • 48 |
49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /range/README.md: -------------------------------------------------------------------------------- 1 | # range slider plugin for jqMobi apps 2 | ###Author: Ian Maffett (appMobi) 3 | 4 | This plugin is similar to the HTML5 range input, but works great on mobile devices 5 | 6 | # Using the range slider plugin 7 | 8 | 1) Call $(container).range({opts}) 9 | 10 | 11 | 12 | ```html 13 |
14 | ``` 15 | 16 | ```js 17 | $("#slider2").range({value:15}); 18 | ``` 19 | 20 | There are different configuration options you can pass in. Please note, if jq.scroller.js is included, we will add a scroller to the content area 21 | 22 | ```js 23 | min:1, //Minimum value for the range slider 24 | max:100, //Maximum value for the range slider 25 | value:0, //initial starting value 26 | rangeClass:"range", //CSS class for range div 27 | pointerClass:"pointer", //CSS class for the bubble/circle on the range 28 | sliderClass:"slider",//CSS class for the slider in general 29 | rangeFillClass:"rangefill", //CSS class for the range as it gets filled 30 | bubbleClass:"rangeBubble", //CSS class for the bubble that appears on top with the value in it 31 | stepFunc:function(){},//Function that gets executed every step when the range gets moved 32 | ``` 33 | 34 | 35 | # Bugs 36 | 37 | Please use github to report any bugs found. Please provide the following 38 | 39 | 1. Any error messages from the console 40 | 41 | 2. Line numbers of offending code 42 | 43 | 3. Test cases 44 | 45 | 4. Description of the Error 46 | 47 | 5. Expected result 48 | 49 | 6. Browser/Device you are testing on 50 | 51 | 52 | # License 53 | 54 | All plugins are licensed under the terms of the MIT License, see the included license.txt file. -------------------------------------------------------------------------------- /range/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mobile Range Slider - A Touch Slider for Webkit / Mobile Safari 6 | 7 | 8 | 9 | 18 | 19 | 20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | 36 | 37 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /af-tabcontrol/af.tabcontrol.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @copyright: 2013 Intel 3 | * @description: A tab control script to let users toggle divs. 4 | */ 5 | ;(function($,window){ 6 | "use strict"; 7 | var cache = []; 8 | var objId = function(obj) { 9 | if(!obj.afAccordionID) obj.afAccordionID = $.uuid(); 10 | return obj.afAccordionID; 11 | }; 12 | $.fn.tabcontrol=function(opts){ 13 | opts=opts||{}; 14 | if(this.length===0) return; 15 | var tmp, id; 16 | for(var i = 0; i < this.length; i++) { 17 | //cache system 18 | id = objId(this[i]); 19 | if(!cache[id]) { 20 | if(!opts) opts = {}; 21 | tmp = new Tabcontrol(this[i], opts); 22 | cache[id] = tmp; 23 | } else { 24 | tmp = cache[id]; 25 | } 26 | } 27 | return this.length == 1 ? tmp : this; 28 | }; 29 | 30 | function Tabcontrol(el,opts){ 31 | $(el).one('destroy', function(e){ 32 | var id = el.afAccordionID; 33 | if(cache[id]) delete cache[id]; 34 | e.stopPropagation(); 35 | $el.off("click","li"); 36 | }); 37 | this.el=el; 38 | var $el=$(el); 39 | var $tabs=$el.find(".tabs"); 40 | $tabs.on("click","li",function(e){ 41 | e.preventDefault(); 42 | var $content=$el.find(".tabs-content"); 43 | $el.find(".tabs a").removeClass("pressed"); 44 | $(e.target).addClass("pressed"); 45 | $content.find("li").removeClass("active"); 46 | $content.find(e.target.hash).addClass("active"); 47 | }); 48 | //Check if there is a default 49 | var $selTab=$el.find(".tabs-content li.active"); 50 | if($selTab.length>0){ 51 | $el.find("a[href='#"+$selTab.prop("id")+"']").addClass("pressed"); 52 | } 53 | } 54 | })(af,window); -------------------------------------------------------------------------------- /af-carousel/README.md: -------------------------------------------------------------------------------- 1 | #af.carousel.js 2 | 3 | 4 | # af.carousel 5 | 6 | To use af.carousel you must do the following 7 | 8 | 1. Create a div with the content inside you want to page between. You must set the height and width of this div, along with overflow:hidden 9 | 10 | ``` html 11 |
12 |
13 |
14 |
15 | ``` 16 | 17 | 2. if you want the dots to show up for paging, create the div 18 | 19 | ``` html 20 | 21 | ``` 22 | 23 | 3. Call the javascript function to create the carousel 24 | 25 | ``` js 26 | var carousel = $("#my_div").carousel(); 27 | ``` 28 | 29 | There are additional configuration options that are passed in as an object parameter 30 | 31 | ``` js 32 | var options={ 33 | vertical:false, // page up/down 34 | horizontal:true, // page left/right 35 | pagingDiv:null, // div to hold the dots for paging 36 | pagingCssName:"carousel_paging", //classname for the paging dots 37 | pagingCssNameSelected: "carousel_paging_selected", //classname for the selected page dots 38 | wrap:true //Creates a continuous carousel 39 | } 40 | var carousel = $("#my_div").carousel(options); 41 | ``` 42 | 43 | There are two functions for adding/removing items 44 | ``` js 45 | carousel.addItem(element); 46 | carousel.removeItem(); //remove all items 47 | carousel.removeItem(index); //remove an item by index 48 | ``` -------------------------------------------------------------------------------- /i18n/test.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | jq.i18n.properties: Demo 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /af-accordion/af.accordion.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @copyright: 2013 Intel 3 | * @description: An accordion script that will animate hiding/showing content. 4 | */ 5 | ;(function($,window){ 6 | "use strict"; 7 | var cache = []; 8 | var objId = function(obj) { 9 | if(!obj.afAccordionID) obj.afAccordionID = $.uuid(); 10 | return obj.afAccordionID; 11 | }; 12 | $.fn.accordion=function(opts){ 13 | opts=opts||{}; 14 | if(this.length===0) return; 15 | var tmp, id; 16 | for(var i = 0; i < this.length; i++) { 17 | //cache system 18 | id = objId(this[i]); 19 | if(!cache[id]) { 20 | if(!opts) opts = {}; 21 | tmp = new Accordion(this[i], opts); 22 | cache[id] = tmp; 23 | } else { 24 | tmp = cache[id]; 25 | } 26 | } 27 | return this.length == 1 ? tmp : this; 28 | }; 29 | 30 | function Accordion(el,opts){ 31 | var time=opts&&opts.time; 32 | var $el=$(el); 33 | if(time){ 34 | $el.find("li>div").vendorCss("TransitionDuration",time); 35 | } 36 | $el.one('destroy', function(e){ 37 | var id = el.afAccordionID; 38 | if(cache[id]) delete cache[id]; 39 | e.stopPropagation(); 40 | $el.off("click","li"); 41 | }); 42 | 43 | $el.on("click","li",function(e){ 44 | 45 | var $e = $(e.target).siblings("div"); 46 | $e.parent().addClass("active"); 47 | $el.find("li").not($e.parent().get(0)).removeClass("active"); 48 | $el.find("div").not($e.get(0)).css("height", "0px"); 49 | window.setTimeout(function () { 50 | if ($e.get(0).clientHeight > 0) 51 | $e.css("height", "0"); 52 | else { 53 | var to = $e.data("height"); 54 | if (to == null) 55 | to = "auto"; 56 | $e.css("height", to); 57 | } 58 | }); 59 | e.preventDefault(); 60 | }); 61 | 62 | } 63 | })(af,window); 64 | -------------------------------------------------------------------------------- /maps/README.md: -------------------------------------------------------------------------------- 1 | # Google Maps plugin using jqMobi 2 | 3 | ###Author: Ian Maffett (appMobi) 4 | 5 | This plugin helps you create a google maps object on your page. You can include the google maps script tag, or we can create it asyncronously. 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | # Using 12 | 13 | To use this, call .gmaps on a jqMobi collection and pass in options from the google maps API. If you have not included the google maps script tag from above, we will add it for you. 14 | https://developers.google.com/maps/documentation/javascript/ 15 | 16 | ```js 17 | $(document).ready(function(){ 18 | $("#maps").gmaps({options}); 19 | }); 20 | ``` 21 | 22 | #Retreiving the Google maps object 23 | 24 | To get a google maps object that you can interact with, call the gmaps function with no parameters. You must create the map before hand. 25 | 26 | ```js 27 | var myMap=$("#maps").gmaps(); 28 | ``` 29 | 30 | #Triggering a resize command 31 | 32 | To trigger a resize command 33 | 34 | ```js 35 | $("#maps").gmaps('resize'); 36 | ``` 37 | 38 | #Using in jqUi 39 | 40 | If you are using this in jqUi, you need to trigger a resize when the panel is loaded. 41 | 42 | ```html 43 |
44 | 45 |
46 | ``` 47 | 48 | ```js 49 | function resizeMap(){ 50 | $("#maps").gmaps("resize"); 51 | } 52 | ``` 53 | 54 | 55 | # Bugs 56 | 57 | Please use github to report any bugs found. Please provide the following 58 | 59 | 1. Any error messages from the console 60 | 61 | 2. Line numbers of offending code 62 | 63 | 3. Test cases 64 | 65 | 4. Description of the Error 66 | 67 | 5. Expected result 68 | 69 | 6. Browser/Device you are testing on 70 | 71 | 72 | # License 73 | 74 | This plugin is licensed under the terms of the MIT License, see the included license.txt file. -------------------------------------------------------------------------------- /subpanels/README.md: -------------------------------------------------------------------------------- 1 | # Subpanel plugin for jqUi 2 | ###Author: Ian Maffett (appMobi) 3 | 4 | This plugin allows users to create "subpanels" that can be navigated in a panel. 5 | 6 | # Using subpanel plugin 7 | 8 | 1) Create your container div and put the 'sub panel's indside of it. You can disable scrolling by setting scrolling="no" 9 | 10 | 2) Create your nav div with class 'subpanelNav' 11 | 12 | 3) on document read, call .subpanel() 13 | 14 | We automagically wire in the scrollers for you. If you do not want scrolling, set "scrolling='no'" on that sub panel 15 | 16 | You must lay out your HTML accordingly 17 | 18 | ```html 19 |
20 | 25 | 26 | 27 |
28 |
Page 1
29 |
Page 2
30 |
Page 3
31 |
32 | 33 |
34 | | 35 | | 36 | 37 |
38 |
39 | ``` 40 | 41 | # Bugs 42 | 43 | Please use github to report any bugs found. Please provide the following 44 | 45 | 1. Any error messages from the console 46 | 47 | 2. Line numbers of offending code 48 | 49 | 3. Test cases 50 | 51 | 4. Description of the Error 52 | 53 | 5. Expected result 54 | 55 | 6. Browser/Device you are testing on 56 | 57 | 58 | # License 59 | 60 | All plugins are licensed under the terms of the MIT License, see the included license.txt file. -------------------------------------------------------------------------------- /pathmenu/jq.pathmenu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jq.pathmenu.js 3 | * @author appMobi 4 | * @copyright appMobi 5 | 6 | * @desc a jqMobi plugin for creating path style menu's. 7 | Your HTML needs to be a
    with
  • as the items (up to 5) 8 | 9 | 16 | 17 | * Then you simply call $("#pathmenu").pathmenu(opts) to enable it 18 | * 19 | * opts 20 | btnclass - button class for the popup links 21 | menubtnclass - class for the menu button 22 | button - text to show in the button 23 | */ 24 | 25 | ; 26 | (function($){ 27 | 28 | $.fn.pathmenu=function(opts){ 29 | if(this.length==0) return; 30 | new pathmenu(this[0],opts); 31 | return this; 32 | } 33 | 34 | var pathmenu=function(el,opts){ 35 | this.container=$(el); 36 | opts.btnclass=opts.btnclass||"pathbtn"; 37 | opts.menubtnclass=opts.menubtnclass||"pathmenubutton"; 38 | opts.button=opts.button||"!" 39 | var self=this; 40 | 41 | 42 | //subscribe for the destroy event to prevent memory leaks 43 | this.container.bind('destroy', function(){ 44 | self.container.off("click"); 45 | }); 46 | //Add the button class to the 47 | this.container.find("li").addClass(opts.btnclass); 48 | //Add the actual button 49 | this.container.addClass("pathcircle"); 50 | this.container.append("
  • ") 51 | 52 | //Handle clicking the links 53 | this.container.on("click","."+opts.btnclass,function(){ 54 | //Wait 50ms to close 55 | setTimeout(function(){ 56 | self.container.find("."+opts.btnclass).removeClass("open"); 57 | self.container.find("."+opts.menubtnclass).removeClass("open"); 58 | },50); 59 | }); 60 | //Toggle clicking the menu 61 | this.container.find("."+opts.menubtnclass).bind("click",function(){ 62 | var btns=self.container.find("."+opts.btnclass); 63 | if(btns.hasClass("open")) 64 | btns.removeClass("open"),$(this).removeClass("open"); 65 | else 66 | btns.addClass("open"),$(this).addClass("open"); 67 | }); 68 | }; 69 | })(jq) -------------------------------------------------------------------------------- /af-accordion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 |
      14 |
    • One 15 |
      16 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 17 |
      18 |
    • 19 |
    • Two 20 |
      21 | Quisque commodo egestas purus non pretium. Fusce ac elit quis lorem placerat vestibulum nec quis est. Pellentesque vitae ipsum tellus, et euismod lacus. Aenean mi diam, laoreet vel condimentum eget, rutrum eu tellus. In malesuada cursus consequat. Sed at pharetra odio. Donec condimentum molestie sodales. Nunc varius aliquam odio vel molestie. Suspendisse elit ligula, venenatis eget posuere sed, tristique nec velit. Donec eget velit metus, eu dapibus dui. Praesent sed pulvinar ante. Duis lectus erat, rhoncus at placerat nec, convallis sit amet velit. 22 |
      23 |
    • 24 |
    • Three 25 |
      26 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat, enim eu porta ornare, purus sem pellentesque elit, eget accumsan lorem odio eu magna. Mauris id erat sapien. Donec vestibulum imperdiet feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras faucibus sem in libero pretium imperdiet. Vivamus condimentum rutrum dui at congue. Sed eleifend nibh et tortor lacinia nec placerat lorem adipiscing. Proin ac erat ut velit varius luctus sed id justo. Integer et nibh quis sem pretium venenatis id ut nisi. 27 |
      28 |
    • 29 |
    30 | 31 | 32 | -------------------------------------------------------------------------------- /maps/jq.maps.js: -------------------------------------------------------------------------------- 1 | // @author Ian Maffett 2 | // @copywrite AppMobi 2012 3 | // Please see - https://developers.google.com/maps/documentation/javascript/ for the API 4 | 5 | 6 | /** 7 | * jq.maps.js - google maps plugin wrapper for jqMobi apps. You can pass in configuration options that are from the Google Maps API 8 | ``` 9 | $("#map").gmaps({zoom: 8,center: new google.maps.LatLng(40.010787, -76.278076),mapTypeId: google.maps.MapTypeId.ROADMAP}); // create the map with basic options 10 | $("#map").gmaps() //return the google maps object back from cache 11 | ``` 12 | *@param {Object} [options] 13 | *@title $().gmaps([options]); 14 | */ 15 | (function () { 16 | var gmapsLoaded = false; 17 | $(document).ready(function () { 18 | if(window['google']&&google.maps){ 19 | $(document).trigger("gmaps:available"); 20 | gmapsLoaded = true; 21 | return true; 22 | } 23 | var gmaps = document.createElement("script"); 24 | gmaps.src = "http://maps.google.com/maps/api/js?sensor=true&callback=gmapsPluginLoaded"; 25 | $("head").append(gmaps); 26 | window['gmapsPluginLoaded'] = function () { 27 | $(document).trigger("gmaps:available"); 28 | gmapsLoaded = true; 29 | } 30 | }); 31 | 32 | var mapsCache = {}; 33 | 34 | $.fn.gmaps = function (opts) { 35 | if (this.length == 0) return; 36 | if (!opts) return mapsCache[this[0].id]; 37 | if(opts=="resize"&&mapsCache[this[0].id]) 38 | { 39 | return google.maps.event.trigger(mapsCache[this[0].id], 'resize'); 40 | } 41 | for (var i = 0; i < this.length; i++) { 42 | new gmaps(this[i], opts); 43 | } 44 | }; 45 | 46 | 47 | 48 | var gmaps = function (elem, opts) { 49 | var createMap = function () { 50 | if (!opts || Object.keys(opts).length == 0) { 51 | opts = { 52 | zoom: 8, 53 | center: new google.maps.LatLng(40.010787, -76.278076), 54 | mapTypeId: google.maps.MapTypeId.ROADMAP 55 | } 56 | } 57 | mapsCache[elem.id] = new google.maps.Map(elem, opts); 58 | google.maps.event.trigger(mapsCache[elem.id], 'resize'); 59 | } 60 | 61 | if (!gmapsLoaded) { 62 | $(document).one("gmaps:available", function () { 63 | createMap() 64 | }); 65 | } else { 66 | createMap(); 67 | } 68 | } 69 | })(jq); -------------------------------------------------------------------------------- /af-carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 28 | 29 | 30 | 58 | 72 | 74 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /filterlist/README.md: -------------------------------------------------------------------------------- 1 | # Filter list plugin using jqMobi 2 | 3 | ###Author: Ian Maffett (appMobi) 4 | 5 | This plugin allows you to filter an unordered list or ordered list. It will create an input box above the list for you to filter. 6 | 7 | # Using 8 | 9 | To use this, call .filterlist on a jqMobi collection 10 | 11 | ```js 12 | $(document).ready(function(){ 13 | $("#list").filterList({revealElements:false,perPage:3,caseInsensitive:true}); 14 | }); 15 | ``` 16 | 17 | When you create the list, we cache the items in the list for performance. If you update them, you must call refresh 18 | 19 | ```js 20 | $("#list").filterList("refresh"); 21 | ``` 22 | 23 | # List Options 24 | 25 | The idea is that we are filtering
  • elements, but more often then not, the
  • will have child items. We only go to the child though to check against that, for anchors and such. 26 | 27 | ```html 28 |
  • Test 29 |
  • Test 30 | ``` 31 | 32 | We allow two data attributes to be set 33 | 34 | 1) data-filter="foo" //We will filter against that value instead 35 | 36 | 2) data-ignore="true" //Ignore this item when filtering 37 | 38 | 39 | #Options 40 | 41 | ```js 42 | var opts { 43 | caseInsensitive: false, //Fasle = case sensitive search. true = case insensitive 44 | perPage: null, //Setting this will allow you to page the options 45 | revealElements:false, //Setting this to true will hide all elements and only show the matching ones 46 | cbFunc:function(){} //Comparison function to use. We have a built in one, so it's best to leave this blank 47 | } 48 | ``` 49 | 50 | #Sample 51 | 52 | ```html 53 | 54 | 55 | 56 | 57 | 58 | 63 | 64 | 65 |
    66 | 75 |
    76 | 77 | 78 | ``` 79 | 80 | # Bugs 81 | 82 | Please use github to report any bugs found. Please provide the following 83 | 84 | 1. Any error messages from the console 85 | 86 | 2. Line numbers of offending code 87 | 88 | 3. Test cases 89 | 90 | 4. Description of the Error 91 | 92 | 5. Expected result 93 | 94 | 6. Browser/Device you are testing on 95 | 96 | 97 | # License 98 | 99 | This plugin is licensed under the terms of the MIT License, see the included license.txt file. -------------------------------------------------------------------------------- /pathmenu/jq.pathmenu.css: -------------------------------------------------------------------------------- 1 | .pathcircle{ 2 | position: absolute; 3 | bottom: 10px; 4 | left: 10px; 5 | list-style-type:none; 6 | height: 45px; 7 | width: 45px; 8 | } 9 | 10 | .pathcircle li { 11 | display:inline; 12 | } 13 | 14 | 15 | .pathmenubutton { 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | border-radius: 40px; 20 | height: 45px; 21 | width: 45px; 22 | background: #fff; 23 | -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5); 24 | box-shadow: 0px 1px 3px rgba(0,0,0,.5); 25 | padding: 0; 26 | } 27 | 28 | .pathmenubutton div a{ 29 | height: 45px; 30 | display: block; 31 | -webkit-transition: all 400ms; 32 | transition: all 400ms; 33 | -webkit-transform: rotate(0); 34 | transform: rotate(0); 35 | } 36 | .pathmenubutton.open div a{ 37 | transform: rotate(90deg); 38 | -webkit-transform: rotate(90deg); 39 | } 40 | 41 | .pathmenubutton div{ 42 | height: 45px; 43 | width: 45px; 44 | background: #db3a2b; 45 | background: -webkit-linear-gradient(top, #db3a2b 0%,#cf0404 100%); 46 | background: linear-gradient(top, #db3a2b 0%,#cf0404 100%); 47 | border-radius: 45px; 48 | border: 1px solid #cf0404; 49 | line-height: 36px; 50 | text-align: center; 51 | color: #fff; 52 | font-size: 36px; 53 | font-weight: 700; 54 | padding: 0; 55 | } 56 | 57 | .pathbtn{ 58 | position: absolute; 59 | height: 36px; 60 | width: 36px; 61 | border-radius: 25px; 62 | top: 6px; 63 | left: 6px; 64 | background: #fff; 65 | -webkit-transition: all 250ms; 66 | transition: all 250ms; 67 | -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5); 68 | box-shadow: 0px 1px 3px rgba(0,0,0,.5); 69 | } 70 | 71 | .pathbtn.open{ 72 | transition: all 350ms; 73 | -webkit-transition: all 350ms; 74 | -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.400, 1.650); 75 | transition-timing-function: cubic-bezier(0.250, 0.250, 0.400, 1.650); 76 | } 77 | 78 | .pathbtn{ 79 | margin: 3px; 80 | width: 35px; 81 | height: 35px; 82 | background: #222; 83 | border-radius: 20px; 84 | line-height: 35px; 85 | text-align: center; 86 | color: #fff; 87 | font-size: 12px; 88 | } 89 | .pathbtn a { 90 | text-decoration: none; 91 | color:#fff; 92 | display:block; 93 | border:none; 94 | font-size:12px; 95 | line-height:35px; 96 | padding:0px; 97 | margin:0px; 98 | } 99 | 100 | .pathbtn:nth-child(1).open{ 101 | -webkit-transform:translate3d(0px,-120px,0); 102 | } 103 | 104 | .pathbtn:nth-child(2).open{ 105 | -webkit-transform:translate3d(40px,-100px,0); 106 | -webkit-transition-delay:30ms: 107 | } 108 | 109 | .pathbtn:nth-child(3).open{ 110 | -webkit-transform:translate3d(80px,-75px,0); 111 | -webkit-transition-delay:60ms; 112 | } 113 | 114 | .pathbtn:nth-child(4).open{ 115 | 116 | -webkit-transform:translate3d(110px,-40px,0); 117 | -webkit-transition-delay:90ms; 118 | } 119 | 120 | .pathbtn:nth-child(5).open{ 121 | -webkit-transform:translate3d(130px,0px,0); 122 | -webkit-transition-delay:120ms; 123 | } 124 | 125 | .pathbtn a::after { 126 | content:none; 127 | 128 | } -------------------------------------------------------------------------------- /noticewindow/jq.noticeWindow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jq.noticeWindow.js 3 | * @copy 2012 AppMobi 4 | * Facebook style notification/modal window 5 | ``` 6 | $("#container").noticeWindow({ 7 | title:'Notifications', //string 8 | content:__html__, //string of thml 9 | arrowLeft:'60px' //left,middle,right or pixels from the left 10 | }); 11 | ``` 12 | * @title $().noticeWindow({}) 13 | */ 14 | 15 | (function($){ 16 | var create=true; 17 | var noticeObj; 18 | $.fn.noticeWindow=function(opts){ 19 | if(this.length==0) return noticeObj; 20 | if(create) 21 | noticeObj=new noticeWindow(this[0],opts,create); 22 | else{ 23 | //noticeObj.destroy(); 24 | noticeObj.update(opts); 25 | } 26 | create=false; 27 | return this; 28 | } 29 | 30 | var noticeWindow=function(element,opts,create){ 31 | 32 | this.container=$(element); 33 | for(var j in opts){ 34 | this[j]=opts[j]; 35 | } 36 | switch(this['arrowLeft']){ 37 | case "left":this.arrowLeft='5px'; 38 | break; 39 | case "middle":this.arrowLeft="120px"; 40 | break; 41 | case "right":this.arrowLeft="230px"; 42 | break; 43 | } 44 | if(parseInt(this.arrowLeft)<=0||isNaN(parseInt(this.arrowLeft))) 45 | this.arrowLeft='5px'; 46 | 47 | if(create) 48 | this.show(); 49 | else 50 | this.update(); 51 | } 52 | 53 | noticeWindow.prototype={ 54 | container:'', 55 | containerCss:'', 56 | title:'', 57 | content:'', 58 | arrowLeft:"5px", 59 | mask:null, 60 | arrowDirection:"up", 61 | _contentDiv:null, 62 | _scroller:null, 63 | show:function(){ 64 | 65 | this.container.append('
    '+this.title+'
    '+this.content+'
    '); 66 | this.mask=$('
    '); 67 | if(this.mask.__proto__["scroller"]) 68 | { 69 | //Setup a scroller 70 | this._scroller=this.container.find("#noticeContent").scroller({ 71 | scrollBars: true, 72 | verticalScroll: true, 73 | horizontalScroll: false, 74 | vScrollCSS: "jqmScrollbar", 75 | refresh: false 76 | }); 77 | this._contentDiv=this.container.find("#noticeContent").children().get(0); 78 | this.container.find("#noticeWindow").css("overflow",""); 79 | } 80 | else 81 | this._contentDiv=this.container.find("#noticeContent"); 82 | var that=this; 83 | this.container.append(this.mask); 84 | this.mask.bind("click",function(){ 85 | that.destroy(); 86 | }); 87 | }, 88 | update:function(opts){ 89 | this.title=opts['title']||""; 90 | this.content=opts["content"]||""; 91 | this.arrowLeft=opts["arrowLeft"]||""; 92 | this.arrowDirection=opts["arrowDirection"]=="down"?"down":"up"; 93 | this.containerCss=opts["containerCss"]||""; 94 | switch(this['arrowLeft']){ 95 | case "left":this.arrowLeft='5px'; 96 | break; 97 | case "middle":this.arrowLeft="120px"; 98 | break; 99 | case "right":this.arrowLeft="230px"; 100 | break; 101 | } 102 | this.container.find(".noticeTitle").html(this.title); 103 | this.updateContent(this.content); 104 | this.container.get().style.cssText=this.containerCss; 105 | this.container.find(".noticeArrow").css("left",this.arrowLeft).get(0).className="noticeArrow "+this.arrowDirection; 106 | }, 107 | updateContent:function(html){ 108 | this._contentDiv.html(html); 109 | }, 110 | destroy:function(){ 111 | if(this._scroller) 112 | this._scroller.disable(); 113 | create=true; 114 | this.container.find("#noticeWindow").remove(); 115 | this.mask.remove(); 116 | } 117 | }; 118 | 119 | })(jq); 120 | 121 | -------------------------------------------------------------------------------- /subpanels/subpanels.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This plugin lets users create sub panels that can be animated by users in jqUi 3 | * @Author Ian Maffett 4 | * @Copyright appMobi 5 | Example below. 6 | 7 | 1) Create your container div and put the 'sub panel's indside of it. You can disable scrolling by setting scrolling="no" 8 | 2) Create your nav div with class 'subpanelNav' 9 | 3) on document read, call .subpanel() 10 | 11 | You must create your jqUi panel and set scrolling = "no" on it 12 |
    13 | 18 | 19 | 20 |
    21 |
    Page 1
    22 |
    Page 2
    23 |
    Page 3
    24 |
    25 | 26 |
    27 | | 28 | | 29 | 30 |
    31 |
    32 | */ 33 | 34 | (function($) { 35 | if (!$.ui) { 36 | return alert("This library requires jqUi"); 37 | } 38 | var scrollers = []; 39 | $.fn.subpanel = function() { 40 | if (this.length == 0) return; 41 | 42 | for (var i = 0; i < this.length; i++) { 43 | new subpanel(this[i]); 44 | } 45 | return this; 46 | } 47 | 48 | var subpanel = function(item) { 49 | this.container = $(item); 50 | 51 | //let's delegate the clicks to handle routing 52 | var self = this; 53 | this.container.parent().find(".subpanelNav").on("click", "a", function(e) { 54 | self.loadNewDiv($(this.hash).get(), $(this).data("transition"), false); 55 | e.preventDefault(); 56 | }); 57 | this.container.css("overflow", "hidden"); 58 | this.container.parent().find(".subpanelNav a").data("ignore", "true"); //Set data ignore so the main click handler doesn't process it 59 | this.container.find("div.insetPanel").forEach(function(obj) { 60 | if ($(obj).attr("scrolling") == "no") return; 61 | scrollers[obj.id] = $(obj).scroller({ 62 | scrollBars: true, 63 | verticalScroll: true, 64 | vScrollCSS: "jqmScrollbar", 65 | useJsScroll: !$.feat.nativeTouchScroll, 66 | noParent:$.feat.nativeTouchScroll 67 | }); 68 | scrollers[obj.id].disable(); 69 | }); 70 | this.loadCurrent(); 71 | this.container.bind("destroy", function() { 72 | this.container.find("div").forEach(function(obj) { 73 | if ($(obj).attr("scrolling") == "no") return; 74 | scrollers[obj.id].disable(); 75 | delete scrollers[obj.id]; 76 | }); 77 | }) 78 | var that = this; 79 | this.container.parent().find(".backButton").bind("click", function() { 80 | if (that.history.length > 0) { 81 | var el = that.history.pop(); 82 | that.loadNewDiv(el.old, el.trans, true, el.new); 83 | } 84 | }) 85 | }; 86 | 87 | subpanel.prototype = { 88 | container: null, 89 | currentDiv: null, 90 | history: [], 91 | loadCurrent: function() { 92 | var div = this.container.find(".default"); 93 | div.css("-webkit-transform", "none"); 94 | div.show(); 95 | this.currentDiv = div.get(); 96 | if (scrollers[this.currentDiv.id]) scrollers[this.currentDiv.id].enable(); 97 | }, 98 | loadNewDiv: function(newDiv, trans, back, prevDiv) { 99 | if (newDiv == this.currentDiv) return; 100 | back = back || false; 101 | var oldDiv = prevDiv || this.currentDiv; 102 | $.ui.doingTransition = true; 103 | $.ui.runTransition(trans, oldDiv, newDiv, back); 104 | if (scrollers[this.currentDiv.id]) scrollers[this.currentDiv.id].disable(); 105 | this.currentDiv = newDiv; 106 | if (scrollers[this.currentDiv.id]) scrollers[this.currentDiv.id].enable(); 107 | if (back) return; 108 | this.history.push({ 109 | 'old': oldDiv, 110 | 'new': newDiv, 111 | 'trans': trans 112 | }); 113 | } 114 | 115 | }; 116 | 117 | })(jq) -------------------------------------------------------------------------------- /range/jq.range.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @author Ian Maffett 3 | * @copywrite AppMobi 2012 4 | * @desc - Range slider for jqMobi apps 5 | */ 6 | 7 | 8 | /** 9 | * 10 | jq.range.js replicates the HTML5 range input for mobile apps. 11 | This is based on https://github.com/ubilabs/mobile-range-slider 12 | but adapted for jqMobi and webkit only. 13 | ``` 14 | $("#slider1").range({min:1,max:20,val:10,stepFunc(val){}}); 15 | ``` 16 | *@param {Object} [options] 17 | *@title $().range([options]); 18 | */ 19 | (function ($) { 20 | 21 | var rangeCache=[]; 22 | /** 23 | * This creates a range object or retrieves it from the cache 24 | */ 25 | $.fn.range = function (opts) { 26 | if (this.length == 0) return; 27 | if(opts===undefined) 28 | return rangeCache[this[0].jqid]; 29 | for (var i = 0; i < this.length; i++) { 30 | //Assign a jqid for the cache in case they don't have an id on the elements 31 | if(!this[i].jqid) 32 | this[i].jqid=$.uuid(); 33 | rangeCache[this[i].jqid]=new range(this[i], opts); 34 | } 35 | }; 36 | 37 | var range = function (elem, opts) { 38 | var that=this; 39 | this.elem=elem; 40 | this.pointer=$("
    ").get(); //round pointer we drag 41 | this.range=$("
    ").get(); //range that we drag on 42 | this.rangeFill=$("
    ").get(); //range fill to the left 43 | this.bubble=$("
    ").get(); //bubble above showing the value 44 | this.pointer.style.webkitTransitionDuration="0ms" 45 | this.elem.appendChild(this.pointer); 46 | this.elem.appendChild(this.range); 47 | this.elem.appendChild(this.rangeFill); 48 | this.elem.appendChild(this.bubble); 49 | if(this.elem.style.position==="static") 50 | this.elem.style.position="relative"; 51 | 52 | for(var j in opts){ 53 | this[j]=opts[j]; 54 | } 55 | 56 | if(opts['value']) 57 | this.val(opts['value']); 58 | 59 | this.elem.addEventListener("touchstart",this); 60 | } 61 | 62 | range.prototype={ 63 | min:1, 64 | max:100, 65 | value:0, 66 | rangeClass:"range", 67 | pointerClass:"pointer", 68 | sliderClass:"slider", 69 | rangeFillClass:"rangefill", 70 | bubbleClass:"rangeBubble", 71 | stepFunc:function(){}, 72 | handleEvent:function(evt){ 73 | switch(evt.type){ 74 | case "touchstart":this.onTouchStart(evt); 75 | break; 76 | case "touchmove":this.onTouchMove(evt); 77 | break; 78 | case "touchend":this.onTouchEnd(evt); 79 | break; 80 | } 81 | }, 82 | onTouchStart:function(event){ 83 | var that=this; 84 | this.elem.addEventListener("touchmove",this); 85 | this.elem.addEventListener("touchend",this); 86 | 87 | }, 88 | onTouchMove:function(event){ 89 | event.preventDefault(); 90 | 91 | 92 | var position = event.touches[0].pageX, 93 | element, 94 | pointerW = this.pointer.offsetWidth, 95 | rangeW = this.range.offsetWidth, 96 | width = rangeW - pointerW, 97 | range = this.max - this.min, 98 | value; 99 | 100 | position-=$(this.elem).offset().left; 101 | 102 | position += pointerW / 2; 103 | position = Math.min(position, rangeW); 104 | position = Math.max(position - pointerW, 0); 105 | this.bubble.style.webkitTransform=this.pointer.style.webkitTransform="translate3d("+position+"px,0,0)"; 106 | 107 | // update 108 | value = this.min + Math.round(position * range / width); 109 | this.val(value,position); 110 | }, 111 | onTouchEnd:function(event){ 112 | 113 | this.elem.removeEventListener("touchmove",this,true); 114 | this.elem.removeEventListener("touchend",this,true); 115 | }, 116 | val:function(val,position){ 117 | if (val === undefined) 118 | return this.value 119 | 120 | val = Math.min(val, this.max); 121 | val = Math.max(val, this.min); 122 | if(position===undefined){ 123 | var 124 | pointerW = this.pointer.offsetWidth, 125 | rangeW = this.range.offsetWidth, 126 | range = this.max - this.min, 127 | width = rangeW - pointerW, 128 | position = Math.round((val - this.min) * width / range); 129 | this.bubble.style.webkitTransform=this.pointer.style.webkitTransform="translate3d("+position+"px,0,0)"; 130 | 131 | } 132 | this.rangeFill.style.width=position+"px"; 133 | 134 | this.bubble.innerHTML=val; 135 | this.value = val; 136 | this.stepFunc(val); 137 | } 138 | } 139 | })(jq); -------------------------------------------------------------------------------- /pathmenu/jqui.demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jq.pathmenu.com 7 | 8 | 9 | 10 | 11 | 12 | 13 | 22 | 26 | 27 |
    28 | 29 |
    30 |
    Main
    31 |
    32 |
    33 | adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui 34 | sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue 35 | sed convallis elementum, magna diam pharetra magna, id vestibulum est 36 | eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem 37 | scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet 38 | pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id 39 | ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin 40 | laoreet. Cras vitae sodales diam. Donec mollis, libero ut 41 | pellentesque dignissim, risus orci ornare nisi, sed eleifend enim 42 | purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, 43 | eleifend venenatis ligula. Vivamus placerat neque sit amet metus 44 | ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi 45 | tristique senectus et netus et malesuada fames ac turpis egestas. Sed 46 | commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget 47 | lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare 48 | vestibulum. Integer gravida magna quam. Donec augue ante, fringilla 49 | non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad 50 | litora torquent per conubia nostra, per inceptos himenaeos. Maecenas 51 | nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas 52 | fermentum sapien turpis, sit amet eleifend justo. Aenean auctor 53 | interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. 54 | Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas 55 | sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat 56 | orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam 57 | convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum 58 | diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt 59 | aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel 60 | felis
    61 |
    Lorem ipsum dolor sit amet, consectetur 62 | adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui 63 | sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue 64 | sed convallis elementum, magna diam pharetra magna, id vestibulum est 65 | eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem 66 | scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet 67 | pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id 68 | ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin 69 | laoreet. Cras vitae sodales diam. Donec mollis, libero ut 70 | pellentesque dignissim, risus orci ornare nisi, sed eleifend enim 71 | purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, 72 | eleifend venenatis ligula. Vivamus placerat neque sit amet metus 73 | ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi 74 | tristique senectus et netus et malesuada fames ac turpis egestas. Sed 75 | commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget 76 | lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare 77 | vestibulum. Integer gravida magna quam. Donec augue ante, fringilla 78 | non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad 79 | litora torquent per conubia nostra, per inceptos himenaeos. Maecenas 80 | nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas 81 | fermentum sapien turpis, sit amet eleifend justo. Aenean auctor 82 | interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. 83 | Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas 84 | sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat 85 | orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam 86 | convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum 87 | diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt 88 | aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel 89 | felis
    90 |
    91 |
    Main
    92 |
    Main
    93 |
    94 | 95 | 102 |
    103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /af-alphatable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | alphaTable 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 29 | 30 | 31 | 32 | 46 |

    Scroll an alphabetical list like contacts

    47 |
    48 |
    49 |
    50 |
    A
    51 | 52 |
  • These are all
  • 53 |
    sample entries that
    54 |
    could be DIVs or
    55 | 56 |
    B
    57 | 58 |
    any sort of styled
    59 |
    entries you might wish
    60 |
    that way you don't have to
    61 |
    deal with all the crazy
    62 |
    CSS that is in iScroll.js
    63 | 64 |
    C
    65 |
  • nec tincidunt lacus suscipit a
  • 66 |
  • Morbi mollis dui vel urna
  • 67 |
  • facilisis ut condimentum
  • 68 |
  • mi ullamcorper
  • 69 |
    D
    70 |
  • Sed rhoncus mollis est
  • 71 |
  • vitae vestibulum massa fringilla id
  • 72 |
  • Vestibulum rhoncus lorem nec
  • 73 |
  • Aenean volutpat nisi quis
  • 74 |
    E
    75 |
  • Pellentesque porttitor ornare
  • 76 |
  • Aliquam luctus dui
  • 77 |
  • Cras facilisis arcu ac
  • 78 |
  • Sed id leo quis massa
  • 79 |
  • Duis vitae elit vel eros
  • 80 |
    F
    81 |
  • Morbi sed purus enim
  • 82 |
  • Nunc volutpat odio vulputate
  • 83 |
  • Fusce id ligula erat
  • 84 |
  • Vestibulum adipiscing
  • 85 |
    G
    86 |
  • Cras eu augue nec est
  • 87 |
  • Cras sit amet neque
  • 88 |
  • Mauris bibendum condimentum
  • 89 | 90 | 91 | 92 | 99 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /filterlist/af.filterlist.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jq.filterlist.js - Filter list plugin for jqMobi applications 3 | * This expects a list and will allow you to filter/page the results. 4 | * @Author Ian Maffett 5 | * @Copyright AppMobi 6 | */ 7 | (function($) { 8 | 9 | var compareFunc = function(elem, val, caseInsensitive) 10 | { 11 | return caseInsensitive ? elem.toLowerCase().indexOf(val.toLowerCase()) !== -1 : elem.indexOf(val) !== -1; 12 | } 13 | 14 | 15 | var filterCache = []; 16 | $.fn.filterList = function(opts) { 17 | if (opts == "refresh") 18 | { 19 | for (var i = 0; i < this.length; i++) 20 | { 21 | filterCache[this[i].id] && filterCache[this[i].id].refresh(); 22 | } 23 | return this; 24 | } 25 | for (var i = 0; i < this.length; i++) 26 | { 27 | filterCache[this[i].id] = new filterList(this[i], opts); 28 | } 29 | }; 30 | 31 | 32 | var filterList = function(elem, opts) { 33 | this.options = []; 34 | this.ele = ele = $(elem); 35 | if (ele.parent().find(".filterList").length > 0) 36 | return; 37 | 38 | if (this instanceof filterList) { 39 | for (var j in opts) { 40 | if (opts.hasOwnProperty(j)) { 41 | this[j] = opts[j]; 42 | } 43 | } 44 | } else { 45 | 46 | return new filterList(elem, opts); 47 | } 48 | var input = $(""); 49 | var wrapper = $("
    "); 50 | var closer = $(""); 51 | wrapper.append(input).append(closer).insertBefore(ele); 52 | 53 | 54 | this.refresh(); 55 | if (this.perPage > 0) 56 | { 57 | this.prevPage = $("