{"id":84,"date":"2023-08-25T18:59:16","date_gmt":"2023-08-25T18:59:16","guid":{"rendered":"\/\/jqueryui.com\/?page_id=84"},"modified":"2024-04-26T16:40:40","modified_gmt":"2024-04-26T16:40:40","slug":"widget","status":"publish","type":"page","link":"https:\/\/jqueryui.com\/widget\/","title":{"rendered":"Widget Factory"},"content":{"rendered":"<p class=\"desc\">Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets.<\/p>\n\n<div class=\"demo-list\"><h2>Examples<\/h2><ul><li class=\"active\"><a href=\"\/resources\/demos\/widget\/default.html\">Default functionality<\/a><\/li><\/ul><\/div><iframe src=\"\/resources\/demos\/widget\/default.html\" class=\"demo-frame\"><\/iframe><div class=\"demo-description\">\n<p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).<\/p>\n<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented<\/p>\n<p>To learn more about the widget factory, <a href=\"https:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/\">visit learn.jquery.com<\/a>.<\/p>\n<\/div><div class=\"view-source\"><a tabindex=\"0\"><i class=\"icon-eye-open\"><\/i> view source<\/a><div><div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n42\">42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n43\">43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n44\">44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n45\">45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n46\">46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n47\">47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n48\">48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n49\">49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n50\">50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n51\">51<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n52\">52<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n53\">53<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n54\">54<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n55\">55<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n56\">56<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n57\">57<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n58\">58<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n59\">59<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n60\">60<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n61\">61<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n62\">62<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n63\">63<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n64\">64<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n65\">65<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n66\">66<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n67\">67<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n68\">68<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n69\">69<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n70\">70<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n71\">71<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n72\">72<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n73\">73<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n74\">74<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n75\">75<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n76\">76<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n77\">77<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n78\">78<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n79\">79<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n80\">80<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n81\">81<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n82\">82<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n83\">83<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n84\">84<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n85\">85<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n86\">86<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n87\">87<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n88\">88<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n89\">89<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n90\">90<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n91\">91<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n92\">92<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n93\">93<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n94\">94<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n95\">95<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n96\">96<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n97\">97<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n98\">98<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n99\">99<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n100\">100<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n101\">101<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n102\">102<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n103\">103<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n104\">104<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n105\">105<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n106\">106<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n107\">107<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n108\">108<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n109\">109<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n110\">110<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n111\">111<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n112\">112<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n113\">113<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n114\">114<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n115\">115<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n116\">116<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n117\">117<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n118\">118<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n119\">119<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n120\">120<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n121\">121<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n122\">122<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n123\">123<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n124\">124<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n125\">125<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n126\">126<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n127\">127<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n128\">128<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n129\">129<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n130\">130<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n131\">131<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n132\">132<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n133\">133<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n134\">134<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n135\">135<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n136\">136<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n137\">137<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n138\">138<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n139\">139<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n140\">140<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n141\">141<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n142\">142<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n143\">143<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n144\">144<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n145\">145<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n146\">146<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n147\">147<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n148\">148<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n149\">149<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n150\">150<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n151\">151<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n152\">152<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n153\">153<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n154\">154<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n155\">155<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n156\">156<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n157\">157<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n158\">158<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n159\">159<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n160\">160<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n161\">161<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n162\">162<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n163\">163<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n164\">164<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n165\">165<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n166\">166<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n167\">167<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n168\">168<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n169\">169<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n170\">170<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>jQuery UI Widget - Default functionality<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/ui\/1.14.2\/themes\/base\/jquery-ui.css\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/resources\/demos\/style.css\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-class\">.custom-colorize<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">20px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">position<\/span>: relative;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">75px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">75px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-class\">.custom-colorize-changer<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">10px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">position<\/span>: absolute;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">0<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">bottom<\/span>: <span class=\"hljs-number\">0<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-3.7.1.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/ui\/1.14.2\/jquery-ui.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ the widget definition, where \"custom\" is the namespace,<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ \"colorize\" the widget name<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $.widget( <span class=\"hljs-string\">\"custom.colorize\"<\/span>, {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ default options<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">options<\/span>: {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">red<\/span>: <span class=\"hljs-number\">255<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">green<\/span>: <span class=\"hljs-number\">0<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">blue<\/span>: <span class=\"hljs-number\">0<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-comment\">\/\/ Callbacks<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">change<\/span>: <span class=\"hljs-literal\">null<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">random<\/span>: <span class=\"hljs-literal\">null<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      },<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ The constructor<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">_create<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>.element<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-comment\">\/\/ add a class for theming<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          .addClass( <span class=\"hljs-string\">\"custom-colorize\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>.changer = $( <span class=\"hljs-string\">\"&lt;button&gt;\"<\/span>, {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">\"change\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-string\">\"class\"<\/span>: <span class=\"hljs-string\">\"custom-colorize-changer\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        })<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        .appendTo( <span class=\"hljs-built_in\">this<\/span>.element )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        .button();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-comment\">\/\/ Bind click events on the changer button to the random method<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>._on( <span class=\"hljs-built_in\">this<\/span>.changer, {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-comment\">\/\/ _on won't call random when widget is disabled<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">click<\/span>: <span class=\"hljs-string\">\"random\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>._refresh();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      },<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ Called when created, and later when changing options<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">_refresh<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>.element.css( <span class=\"hljs-string\">\"background-color\"<\/span>, <span class=\"hljs-string\">\"rgb(\"<\/span> +<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-built_in\">this<\/span>.options.red +<span class=\"hljs-string\">\",\"<\/span> +<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-built_in\">this<\/span>.options.green + <span class=\"hljs-string\">\",\"<\/span> +<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-built_in\">this<\/span>.options.blue + <span class=\"hljs-string\">\")\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-comment\">\/\/ Trigger a callback\/event<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>._trigger( <span class=\"hljs-string\">\"change\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      },<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ A public method to change the color to a random value<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ can be called directly via .colorize( \"random\" )<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">random<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-keyword\">var<\/span> colors = {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">red<\/span>: <span class=\"hljs-built_in\">Math<\/span>.floor( <span class=\"hljs-built_in\">Math<\/span>.random() * <span class=\"hljs-number\">256<\/span> ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">green<\/span>: <span class=\"hljs-built_in\">Math<\/span>.floor( <span class=\"hljs-built_in\">Math<\/span>.random() * <span class=\"hljs-number\">256<\/span> ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">blue<\/span>: <span class=\"hljs-built_in\">Math<\/span>.floor( <span class=\"hljs-built_in\">Math<\/span>.random() * <span class=\"hljs-number\">256<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        };<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-comment\">\/\/ Trigger an event, check if it's canceled<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-keyword\">if<\/span> ( <span class=\"hljs-built_in\">this<\/span>._trigger( <span class=\"hljs-string\">\"random\"<\/span>, event, colors ) !== <span class=\"hljs-literal\">false<\/span> ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-built_in\">this<\/span>.option( colors );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      },<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ Events bound via _on are removed automatically<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ revert other modifications here<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">_destroy<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-comment\">\/\/ remove generated elements<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>.changer.remove();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>.element<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          .removeClass( <span class=\"hljs-string\">\"custom-colorize\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          .enableSelection()<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          .css( <span class=\"hljs-string\">\"background-color\"<\/span>, <span class=\"hljs-string\">\"transparent\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      },<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ _setOptions is called with a hash of all options that are changing<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ always refresh when changing options<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">_setOptions<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-comment\">\/\/ _super and _superApply handle keeping the right this-context<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>._superApply( <span class=\"hljs-built_in\">arguments<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>._refresh();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      },<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ _setOption is called for each individual option that is changing<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">_setOption<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> key, value <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-comment\">\/\/ prevent invalid color values<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-keyword\">if<\/span> ( <span class=\"hljs-regexp\">\/red|green|blue\/<\/span>.test(key) &amp;&amp; (value &lt; <span class=\"hljs-number\">0<\/span> || value &gt; <span class=\"hljs-number\">255<\/span>) ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-keyword\">return<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-built_in\">this<\/span>._super( key, value );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ Initialize with default options<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#my-widget1\"<\/span> ).colorize();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ Initialize with two customized options<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#my-widget2\"<\/span> ).colorize({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">red<\/span>: <span class=\"hljs-number\">60<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">blue<\/span>: <span class=\"hljs-number\">60<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ Initialize with custom green value<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ and a random callback to allow only colors with enough green<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#my-widget3\"<\/span> ).colorize( {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">green<\/span>: <span class=\"hljs-number\">128<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">random<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-keyword\">return<\/span> ui.green &gt; <span class=\"hljs-number\">128<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ Click to toggle enabled\/disabled<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#disable\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ use the custom selector created for each widget to find all instances<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-comment\">\/\/ all instances are toggled together, so we can check the state from the first<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-keyword\">if<\/span> ( $( <span class=\"hljs-string\">\":custom-colorize\"<\/span> ).colorize( <span class=\"hljs-string\">\"option\"<\/span>, <span class=\"hljs-string\">\"disabled\"<\/span> ) ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        $( <span class=\"hljs-string\">\":custom-colorize\"<\/span> ).colorize( <span class=\"hljs-string\">\"enable\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      } <span class=\"hljs-keyword\">else<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        $( <span class=\"hljs-string\">\":custom-colorize\"<\/span> ).colorize( <span class=\"hljs-string\">\"disable\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-comment\">\/\/ Click to set options after initialization<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#green\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      $( <span class=\"hljs-string\">\":custom-colorize\"<\/span> ).colorize( <span class=\"hljs-string\">\"option\"<\/span>, {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">red<\/span>: <span class=\"hljs-number\">64<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">green<\/span>: <span class=\"hljs-number\">250<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">blue<\/span>: <span class=\"hljs-number\">8<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  } );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-widget1\"<\/span>&gt;<\/span>color me<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-widget2\"<\/span>&gt;<\/span>color me<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-widget3\"<\/span>&gt;<\/span>color me<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"disable\"<\/span>&gt;<\/span>Toggle disabled option<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"green\"<\/span>&gt;<\/span>Go green<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n<\/div><\/div>\n\n<p>Want to learn more about the widget factory? Check out\nthe <a href=\"https:\/\/api.jqueryui.com\/jQuery.widget\/\">API documentation<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets. ExamplesDefault functionality This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js). The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented To learn more &hellip; <a href=\"https:\/\/jqueryui.com\/widget\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-84","page","type-page","status-publish","hentry","category-utilities"],"_links":{"self":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":2,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":352,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/84\/revisions\/352"}],"wp:attachment":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}