{"id":6061,"date":"2013-08-11T16:22:13","date_gmt":"2013-08-11T16:22:13","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6061"},"modified":"2019-03-03T06:58:38","modified_gmt":"2019-03-03T06:58:38","slug":"zelect","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/zelect\/","title":{"rendered":"Zelect"},"content":{"rendered":"

Los selects o dropdowns siempre han sido unos elementos HTML dif\u00edciles de personalizar.<\/p>\n

En este art\u00edculo vamos a ver una forma simple de hacerlo utilizando el plugin jQuery Zelect.<\/p>\n

La principal operaci\u00f3n del plugin es convertir las opciones del select en una lista ordenada para poder personalizarlo con m\u00e1s facilidad y con las misma funcionalidad: seleccionar un elemento del listado. Es interesante tambi\u00e9n porque incorpora un buscador que tras escribir en el campo de texto te busca en linea los registros coincidentes.<\/p>\n

Es un plugin muy liviano y f\u00e1cil de a\u00f1adir a tus p\u00e1ginas Web. Tan solo deber\u00e1s a\u00f1adirlo en la cabecera de tu p\u00e1gina:<\/p>\n

<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\".\/zelect.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(setup)\r\n\r\nfunction setup() {\r\n\u00a0\u00a0 \u00a0$('#id_country').zelect({ placeholder:'Selecciona pa\u00eds...' })\r\n}\r\n<\/script><\/pre>\n
Y en el <body>, dentro de un formulario a\u00f1adir tu select html, como por ejemplo:<\/p>\n
<select name=\"id_country\" id=\"id_country\">\r\n\u00a0\u00a0 \u00a0<option value=\"231\">Afganist\u00e1n<\/option>\r\n\u00a0\u00a0\u00a0 <option value=\"230\">Albania<\/option>\r\n\u00a0\u00a0\u00a0 <option value=\"1\">Alemania<\/option>\r\n\u00a0\u00a0\u00a0 ...\r\n<\/select><\/pre>\n
Ahora podr\u00edamos darle un poco de estilo a\u00f1adiendo lo siguiente a tu hoja de estilos:<\/p>\n
.zelect {\r\n\u00a0\u00a0\u00a0 display: inline-block;\r\n\u00a0\u00a0\u00a0 background-color: white;\r\n\u00a0\u00a0\u00a0 min-width: 300px;\r\n\u00a0\u00a0\u00a0 cursor: pointer;\r\n\u00a0\u00a0\u00a0 line-height: 36px;\r\n\u00a0\u00a0\u00a0 border: 1px solid #dbdece;\r\n\u00a0\u00a0\u00a0 border-radius: 6px;\r\n\u00a0\u00a0 \u00a0position: relative;\r\n}\r\n.zelected {\r\n\u00a0\u00a0 \u00a0font-weight: bold;\r\n\u00a0\u00a0\u00a0 padding-left: 10px;\r\n}\r\n.zelected.placeholder {\r\n\u00a0\u00a0 \u00a0color: #999f82;\r\n}\r\n.zelected:hover {\r\n\u00a0\u00a0 \u00a0border-color: #c0c4ab;\r\n\u00a0\u00a0\u00a0 box-shadow: inset 0px 5px 8px -6px #dbdece;\r\n}\r\n.zelect.open {\r\n\u00a0\u00a0\u00a0 border-bottom-left-radius: 0;\r\n\u00a0\u00a0\u00a0 border-bottom-right-radius: 0;\r\n}\r\n.dropdown {\r\n\u00a0\u00a0\u00a0 background-color: white;\r\n\u00a0\u00a0\u00a0 border-bottom-left-radius: 5px;\r\n\u00a0\u00a0\u00a0 border-bottom-right-radius: 5px;\r\n\u00a0\u00a0\u00a0 border: 1px solid #dbdece;\r\n\u00a0 \u00a0\u00a0 \u00a0border-top: none;\r\n\u00a0\u00a0\u00a0 position: absolute;\r\n\u00a0\u00a0\u00a0 left:-1px;\r\n\u00a0\u00a0\u00a0 right:-1px;\r\n\u00a0\u00a0\u00a0 top: 36px;\r\n\u00a0\u00a0\u00a0 z-index: 2;\r\n\u00a0\u00a0\u00a0 padding: 3px 5px 3px 3px;\r\n}\r\n.dropdown input {\r\n\u00a0\u00a0\u00a0 font-family: sans-serif;\r\n\u00a0\u00a0\u00a0 outline: none;\r\n\u00a0\u00a0\u00a0 font-size: 14px;\r\n\u00a0\u00a0\u00a0 border-radius: 4px;\r\n\u00a0\u00a0\u00a0 border: 1px solid #dbdece;\r\n\u00a0\u00a0\u00a0 box-sizing: border-box;\r\n\u00a0\u00a0\u00a0 width: 96%;\r\n\u00a0\u00a0\u00a0 padding: 7px 0 7px 10px;\r\n}\r\n.dropdown ol {\r\n\u00a0\u00a0 \u00a0padding: 0;\r\n\u00a0\u00a0\u00a0 margin: 3px 0 0 0;\r\n\u00a0\u00a0\u00a0 list-style-type: none;\r\n\u00a0\u00a0\u00a0 max-height: 150px;\r\n\u00a0\u00a0\u00a0 overflow-y: scroll;\r\n}\r\n.dropdown li {\r\n\u00a0\u00a0 \u00a0padding-left: 10px;\r\n}\r\n.dropdown li.current {\r\n\u00a0\u00a0 \u00a0background-color: #e9ebe1;\r\n}\r\n.dropdown .no-results {\r\n\u00a0\u00a0 \u00a0margin-left: 10px;\r\n}<\/pre>\n
Obteniendo como resultado:<\/p>\n
\"zelect\"<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n
Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Los selects o dropdowns siempre han sido unos elementos HTML dif\u00edciles de personalizar. En este art\u00edculo vamos a ver una forma simple de hacerlo utilizando el plugin jQuery Zelect. La principal operaci\u00f3n del plugin es convertir las opciones del select en una lista ordenada para poder personalizarlo con m\u00e1s facilidad y con las misma funcionalidad: […]<\/p>\n","protected":false},"author":1,"featured_media":5458,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[62],"class_list":["post-6061","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-selects"],"yoast_head":"\nZelect - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Convierte las opciones del select en una lista ordenada para poder personalizarlo con m\u00e1s facilidad y con las misma funcionalidad.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zelect - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Convierte las opciones del select en una lista ordenada para poder personalizarlo con m\u00e1s facilidad y con las misma funcionalidad.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/zelect\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-11T16:22:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-03T06:58:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/zelect\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/zelect\/\",\"name\":\"Zelect - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/zelect\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/zelect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png\",\"datePublished\":\"2013-08-11T16:22:13+00:00\",\"dateModified\":\"2019-03-03T06:58:38+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Convierte las opciones del select en una lista ordenada para poder personalizarlo con m\u00e1s facilidad y con las misma funcionalidad.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/zelect\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/zelect\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/zelect\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/zelect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Zelect\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Zelect - Jose Aguilar Blog","description":"Convierte las opciones del select en una lista ordenada para poder personalizarlo con m\u00e1s facilidad y con las misma funcionalidad.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Zelect - Jose Aguilar Blog","og_description":"Convierte las opciones del select en una lista ordenada para poder personalizarlo con m\u00e1s facilidad y con las misma funcionalidad.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/zelect\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-08-11T16:22:13+00:00","article_modified_time":"2019-03-03T06:58:38+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/zelect\/","url":"https:\/\/www.jose-aguilar.com\/blog\/zelect\/","name":"Zelect - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/zelect\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/zelect\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png","datePublished":"2013-08-11T16:22:13+00:00","dateModified":"2019-03-03T06:58:38+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Convierte las opciones del select en una lista ordenada para poder personalizarlo con m\u00e1s facilidad y con las misma funcionalidad.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/zelect\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/zelect\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/zelect\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/zelect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Zelect"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6061","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6061"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6061\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5458"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}